feat： module新增完成
This commit is contained in:
zhangyu
@@ -1416,12 +1416,9 @@ li{
|
|||||||
height: 140px;
|
height: 140px;
|
||||||
}
|
}
|
||||||
.param-box-row {
|
.param-box-row {
|
||||||
padding: 7px 10px 0 10px;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.param-box-row:last-of-type {
|
|
||||||
padding-bottom: 7px;
|
|
||||||
}
|
|
||||||
.param-box-row>div {
|
.param-box-row>div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,55 +36,49 @@
|
|||||||
size="small"
|
size="small"
|
||||||
type="textarea"></el-input>
|
type="textarea"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<!--Enpoint template-->
|
||||||
|
<div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }}
|
||||||
|
<el-tooltip effect="light" placement="top">
|
||||||
|
<div slot="content">
|
||||||
|
{{$t('project.module.tip.defaultEndpointSet')}}
|
||||||
|
<div></div>
|
||||||
|
{{$t('project.module.tip.relation')}}
|
||||||
|
</div>
|
||||||
|
<i class="nz-icon nz-icon-info-normal"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
<div class="right-box-line"></div>
|
||||||
|
|
||||||
|
<div class="endpoint-title">
|
||||||
|
<span class="endpoint-title-content">
|
||||||
|
Metrics
|
||||||
|
</span>
|
||||||
|
<el-switch v-model="editModule.configs[0].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-tabs v-model="activeName">
|
||||||
|
<el-tab-pane label="Basic" name="Basic">
|
||||||
|
<!--path-->
|
||||||
|
<el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path">
|
||||||
|
<el-input id="module-box-input-path" v-model="editModule.configs[0].config.metrics_path" placeholder="" size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<!--port-->
|
||||||
|
<el-form-item :label='$t("project.endpoint.port")' class="half-form-item" prop="configs[0].config.port" :rules="[
|
||||||
|
{ validator: port, trigger: 'blur' },
|
||||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||||
|
]">
|
||||||
|
<el-input id="module-box-input-port" v-model.number="editModule.configs[0].config.port" placeholder="" size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
<!--type-->
|
<!--type-->
|
||||||
<el-form-item :label='$t("project.endpoint.type")' prop="type">
|
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type">
|
||||||
<el-select id="module-box-input-type" v-model="editModule.type" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
|
<el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
|
||||||
<el-option v-for="item in typetList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
<el-option v-for="item in typetList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<!--host-->
|
||||||
<!-- snmp表单 -->
|
<el-form-item :label='$t("project.endpoint.host")' class="half-form-item" prop="host">
|
||||||
<span v-if="editModule.type && editModule.type == 'snmp'" class="snmp-form">
|
<el-input id="module-box-input-host" v-model="editModule.configs[0].config.host" placeholder="" size="small"></el-input>
|
||||||
<div class="right-box-sub-title">SNMP settings</div>
|
|
||||||
<div class="right-box-line"></div>
|
|
||||||
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="6">
|
|
||||||
<div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="24">
|
|
||||||
<el-form-item prop="walk">
|
|
||||||
<select-walk ref="selectWalk" :currentWalk="editModule.walk" :expandedWalk="expandedWalkData" :placement="'bottom-start'" :walkData="walkData" @selectWalk="selectWalk">
|
|
||||||
<template v-slot:trigger>
|
|
||||||
<div class="el-cascader">
|
|
||||||
<div class="el-input">
|
|
||||||
<input aria-expanded="false" autocomplete="off" class="el-input__inner" readonly="readonly" type="text">
|
|
||||||
</div>
|
|
||||||
<div class="el-cascader__tags">
|
|
||||||
<div ref="walkScrollbar" style="height: 100%; overflow: auto;">
|
|
||||||
<span v-for="(item, index) in editModule.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
|
|
||||||
<span v-html="mibName(item)"></span>
|
|
||||||
<div class="walk-close-box" @click.stop="removeWalk(item)">
|
|
||||||
<i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</select-walk>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<!--credentials-->
|
|
||||||
<el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
|
|
||||||
<el-select id="module-box-input-credentials" v-model="editModule.configs.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
|
|
||||||
<el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<!-- ChartTemplate -->
|
<!-- ChartTemplate -->
|
||||||
<el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
|
<el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
|
||||||
<v-selectpage
|
<v-selectpage
|
||||||
@@ -105,33 +99,43 @@
|
|||||||
@values="(data) => {editModule.chartIds = data.map(d => d.id).join(',')}"
|
@values="(data) => {editModule.chartIds = data.map(d => d.id).join(',')}"
|
||||||
></v-selectpage>
|
></v-selectpage>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!--Enpoint template-->
|
<!-- snmp表单 -->
|
||||||
<div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }}
|
<span v-if="editModule.configs[0].config.protocol && editModule.configs[0].config.protocol == 'snmp'" class="snmp-form">
|
||||||
<el-tooltip effect="light" placement="top">
|
<el-row>
|
||||||
<div slot="content">
|
<el-col :span="6">
|
||||||
{{$t('project.module.tip.defaultEndpointSet')}}
|
<div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
|
||||||
<div></div>
|
</el-col>
|
||||||
{{$t('project.module.tip.relation')}}
|
<el-col :span="24">
|
||||||
|
<el-form-item prop="walk">
|
||||||
|
<select-walk ref="selectWalk" :currentWalk="editModule.configs[0].config.walk" :expandedWalk="expandedWalkData" :placement="'bottom-start'" :walkData="walkData" @selectWalk="selectWalk">
|
||||||
|
<template v-slot:trigger>
|
||||||
|
<div class="el-cascader">
|
||||||
|
<div class="el-input">
|
||||||
|
<input aria-expanded="false" autocomplete="off" class="el-input__inner" readonly="readonly" type="text">
|
||||||
</div>
|
</div>
|
||||||
<i class="nz-icon nz-icon-info-normal"></i>
|
<div class="el-cascader__tags">
|
||||||
</el-tooltip>
|
<div ref="walkScrollbar" style="height: 100%; overflow: auto;">
|
||||||
|
<span v-for="(item, index) in editModule.configs[0].config.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
|
||||||
|
<span v-html="mibName(item)"></span>
|
||||||
|
<div class="walk-close-box" @click.stop="removeWalk(item)">
|
||||||
|
<i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box-line"></div>
|
</span>
|
||||||
|
</div>
|
||||||
<el-tabs v-model="activeName">
|
</div>
|
||||||
<el-tab-pane label="Basic" name="Basic">
|
</div>
|
||||||
<!--path-->
|
</template>
|
||||||
<el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path">
|
</select-walk>
|
||||||
<el-input id="module-box-input-path" v-model="editModule.configs.metrics_path" placeholder="" size="small"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!--port-->
|
</el-col>
|
||||||
<el-form-item :label='$t("project.endpoint.port")' class="half-form-item" prop="port">
|
</el-row>
|
||||||
<el-input id="module-box-input-port" v-model.number="editModule.port" placeholder="" size="small"></el-input>
|
<!--credentials-->
|
||||||
</el-form-item>
|
<el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
|
||||||
<!--host-->
|
<el-select id="module-box-input-credentials" v-model="editModule.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
|
||||||
<el-form-item :label='$t("project.endpoint.host")' prop="host">
|
<el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||||
<el-input id="module-box-input-host" v-model="editModule.configs.host" placeholder="" size="small"></el-input>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
</span>
|
||||||
<transition name="el-zoom-in-top">
|
<transition name="el-zoom-in-top">
|
||||||
<div v-show="showAllBasicOption" >
|
<div v-show="showAllBasicOption" >
|
||||||
<!--name pattern-->
|
<!--name pattern-->
|
||||||
@@ -148,13 +152,13 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!--scrape_interval-->
|
<!--scrape_interval-->
|
||||||
<el-form-item :label='$t("project.endpoint.scrape_interval")' class="half-form-item" prop="scrape_interval">
|
<el-form-item :label='$t("project.endpoint.scrape_interval")' class="half-form-item" prop="scrape_interval">
|
||||||
<el-input id="module-box-input-scrape_interval" v-model.number="editModule.configs.scrape_interval" :placeholder='$t("project.endpoint.scrape_interval_placeholder")' size="small">
|
<el-input id="module-box-input-scrape_interval" v-model.number="editModule.configs[0].config.scrape_interval" :placeholder='$t("project.endpoint.scrape_interval_placeholder")' size="small">
|
||||||
<template slot="append">s</template>
|
<template slot="append">s</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!--scrape_timeout-->
|
<!--scrape_timeout-->
|
||||||
<el-form-item :label='$t("project.endpoint.scrape_timeout")' class="half-form-item" prop="scrape_timeout">
|
<el-form-item :label='$t("project.endpoint.scrape_timeout")' class="half-form-item" prop="scrape_timeout">
|
||||||
<el-input id="module-box-input-scrape_timeout" v-model.number="editModule.configs.scrape_timeout" :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' size="small">
|
<el-input id="module-box-input-scrape_timeout" v-model.number="editModule.configs[0].config.scrape_timeout" :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' size="small">
|
||||||
<template slot="append">s</template>
|
<template slot="append">s</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -189,7 +193,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div style="text-align: center">
|
<div style="text-align: center">
|
||||||
<span id="module-add-param" class="right-box-form-add module-add-label" type="button" @click="addParam">
|
<span id="module-add-param" class="right-box-form-add module-add-label" type="button" @click="addParam">
|
||||||
<span><i class="nz-icon nz-icon-create-square" style="font-size: 16px;"></i></span>
|
<span><i class="nz-icon nz-icon-plus" style="font-size: 16px;"></i></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
@@ -208,11 +212,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div style="text-align: center">
|
<div style="text-align: center">
|
||||||
<span id="module-add-label" class="right-box-form-add module-add-label" type="button" @click="addLabel">
|
<span id="module-add-label" class="right-box-form-add module-add-label" type="button" @click="addLabel">
|
||||||
<span><i class="nz-icon nz-icon-create-square" style="font-size: 16px;"></i></span>
|
<span><i class="nz-icon nz-icon-plus" style="font-size: 16px;"></i></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane v-if="editModule.type !== 'snmp'" label="Auth" name="Auth">
|
<el-tab-pane v-if="editModule.configs[0].config.protocol !== 'snmp'" label="Auth" name="Auth">
|
||||||
<!--authtype-->
|
<!--authtype-->
|
||||||
<el-form-item :label='$t("project.endpoint.type")' prop="authtype">
|
<el-form-item :label='$t("project.endpoint.type")' prop="authtype">
|
||||||
<el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
|
<el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
|
||||||
@@ -222,24 +226,233 @@
|
|||||||
|
|
||||||
<!--authtype 1-->
|
<!--authtype 1-->
|
||||||
<el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="authtype">
|
<el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="authtype">
|
||||||
<el-input id="module-box-input-uername" v-model.number="editModule.configs.basic_auth.username" placeholder='' size="small"></el-input>
|
<el-input id="module-box-input-uername" v-model.number="editModule.configs[0].config.basic_auth.username" placeholder='' size="small"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="authtype">
|
<el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="authtype">
|
||||||
<el-input id="module-box-input-password" v-model.number="editModule.configs.basic_auth.password" placeholder='' size="small"></el-input>
|
<el-input id="module-box-input-password" v-model.number="editModule.configs[0].config.basic_auth.pin" placeholder='' size="small"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<!--authtype 2-->
|
<!--authtype 2-->
|
||||||
<el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="authtype">
|
<el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="authtype">
|
||||||
<el-input id="module-box-input-bearer_token" v-model.number="editModule.configs.bearer_token" placeholder='' size="small"></el-input>
|
<el-input id="module-box-input-bearer_token" v-model.number=editModule.configs[0].config.bearer_token" placeholder='' size="small"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
<el-tab-pane label="Preview" name="Preview">
|
||||||
<div class="configs-copy-value">
|
<div id="module-box-preview" ref="previewBoxScrollbar" class="configs-copy-value" style="height: 100%; overflow: auto;">
|
||||||
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
|
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
|
||||||
<pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
|
<pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
|
||||||
</div>
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<div class="endpoint-title" style="margin-top: 10px">
|
||||||
|
<span class="endpoint-title-content">
|
||||||
|
Logs
|
||||||
|
</span>
|
||||||
|
<el-switch v-model="editModule.configs[1].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item, index) in editModule.configs[1].config" :key="index" style="position: relative">
|
||||||
|
<el-tabs v-model="activeNameLogs[index]" class="special-tabs" @tab-click="()=>{tabClick(index)}">
|
||||||
|
<el-tab-pane label="Basic" name="Basic">
|
||||||
|
<!--type-->
|
||||||
|
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
|
||||||
|
<el-select id="module-box-input-type" v-model="item.basic.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
|
||||||
|
<el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
v-if='item.basic.type === "file"'
|
||||||
|
:label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
|
||||||
|
:prop="'configs[1].config.'+ index +'.basic.fileName'"
|
||||||
|
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-if='item.basic.type === "file"' v-model="item.basic.fileName" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
v-if='item.basic.type === "journal"'
|
||||||
|
:label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
|
||||||
|
:prop="'configs[1].config.'+ index +'.basic.unit'"
|
||||||
|
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-if='item.basic.type === "journal"' v-model="item.basic.unit" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
v-if='item.basic.type === "syslog"'
|
||||||
|
:label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
|
||||||
|
:prop="'configs[1].config.'+ index +'.basic.listenAddress'"
|
||||||
|
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-if='item.basic.type === "syslog"' v-model="item.basic.listenAddress" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
v-if="item.basic.type === 'syslog'"
|
||||||
|
:label=' $t("project.endpoint.basicAppName")'
|
||||||
|
class="half-form-item"
|
||||||
|
:prop="'configs[1].config.'+ index +'.basic.appName'"
|
||||||
|
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item.basic.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="Labels" name="Labels">
|
||||||
|
<div id="module-box-logs-labels" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
|
||||||
|
<div v-for="(item1, i) in item.labelModule" :key="i" class="param-box-row">
|
||||||
|
<el-form-item :prop="'configs[1].config.'+ index +'.labelModule.' + i + '.key'" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" class="param-box-row-key">
|
||||||
|
<el-input v-model="item1.key" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<span class="param-box-row-eq">=</span>
|
||||||
|
<el-form-item class="param-box-row-value">
|
||||||
|
<el-input v-model="item1.value" placeholder="value" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<span :id="'moduel-remove-label-'+i" class="param-box-row-symbol" @click="removeLogsLabel(index, i)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: center">
|
||||||
|
<span id="module-add-logs-label" class="right-box-form-add module-add-label" type="button" @click="addLogsLabel(index)">
|
||||||
|
<span><i class="nz-icon nz-icon-plus" style="font-size: 16px;"></i></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="Pipeline" name="Pipeline">
|
||||||
|
<div v-for="(item2, index2) in item.pipeline" :key="index2">
|
||||||
|
<div class="pipeline-box">
|
||||||
|
<span class="pipeline-title">{{item2.type}}</span>
|
||||||
|
<span class="pipeline-option">
|
||||||
|
<pipelineSelect :index="index2" :father-pipeline="item.pipeline" @addPipeline="(pipelineIndex,obj)=>{addPipeline(obj,index,pipelineIndex,'splice')}" :type="'splice'"/>
|
||||||
|
<i class="nz-icon nz-icon-shanchu1" @click="delPipeline(index,index2)"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="item2.type === 'regex'">
|
||||||
|
<el-form-item
|
||||||
|
:label="'Expression'"
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.expression'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.expression" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
:label="'Source'"
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.source'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.source" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-if="item2.type === 'json'">
|
||||||
|
<label style="padding-bottom: 6px;font-size: 14px;line-height: 16px;color: #666;">Expressions</label>
|
||||||
|
<div v-for="(expressions, eindex) in item2.expressions" :key="eindex" style="display: flex;justify-content: space-around;align-items: center;margin-bottom: 16px">
|
||||||
|
<el-form-item
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.expressions.'+eindex"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
style="width: 90%;margin: 0"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.expressions[eindex]" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<span style="display: inline-block;width: 10%">
|
||||||
|
<i class="nz-icon nz-icon-plus" @click="addPipelineItem(index, index2)"></i>
|
||||||
|
<i class="nz-icon nz-icon-shanchu1" @click="delPipelineItem((index, index2, eindex))"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<el-form-item
|
||||||
|
:label="'Source'"
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.source'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.source" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-if="item2.type === 'template'">
|
||||||
|
<el-form-item
|
||||||
|
:label="'Source'"
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.source'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.source" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
:label="'Template'"
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.template'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.template" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-if="item2.type === 'timestamp'">
|
||||||
|
<el-form-item
|
||||||
|
:label="'Source'"
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.source'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.source" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
:label="'Timestamp'"
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.timestamp'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.timestamp" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-if="item2.type === 'labels'">
|
||||||
|
<label style="padding-bottom: 6px;font-size: 14px;line-height: 16px;color: #666;">Key/value</label>
|
||||||
|
<div v-for="(expressions, eindex) in item2.labels" :key="eindex" style="display: flex;justify-content: space-around;align-items: center;margin-bottom: 16px">
|
||||||
|
<el-form-item
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.labels.'+eindex+'.key'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
style="width: 45%;margin: 0"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.labels[eindex].key" placeholder="key" size="mini" ></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
=
|
||||||
|
<el-form-item
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.labels.'+eindex+'.value'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
style="width: 45%;margin: 0"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.labels[eindex].value" placeholder="key" size="mini" ></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<i class="nz-icon nz-icon-plus" @click="addPipelineItem(index, index2)"></i>
|
||||||
|
<i class="nz-icon nz-icon-shanchu1" @click="delPipelineItem((index, index2, eindex))"></i>
|
||||||
|
</div>
|
||||||
|
<el-form-item
|
||||||
|
:label="'Source'"
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.source'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.source" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-if="item2.type === 'output'">
|
||||||
|
<el-form-item
|
||||||
|
:label="'Source'"
|
||||||
|
:prop="'configs[1].config.'+ index +'.pipeline.' + index2 + '.source'"
|
||||||
|
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="item2.source" placeholder="key" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: center">
|
||||||
|
<div class="value-mapping-add" style="text-align: center;width: 25px;display: inline-block;margin-right: 44px">
|
||||||
|
<pipelineSelect :index="item.pipeline.length - 1" :father-pipeline="item.pipeline" @addPipeline="(pipelineIndex,obj)=>{addPipeline(obj,index,pipelineIndex,'push')}" :type="'push'"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="Preview" name="Preview">
|
||||||
|
<div id="module-box-logs-preview" ref="previewBoxScrollbar" class="configs-copy-value" style="height: 100%; overflow: auto;">
|
||||||
|
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyLogsValue(index)"></i></span>
|
||||||
|
<pre style="overflow-y: auto;height:100%;width: 97%;">{{logsCopyValue[index]}}</pre>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<span class="nz-icon-minus-medium">
|
||||||
|
<i class="nz-icon nz-icon-minus" @click="removeLogsArr(index)"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="value-mapping-add" style="text-align: center;margin: 10px 180px 10px 144px;" @click="logsLogsArrAdd()">
|
||||||
|
<i class="nz-icon nz-icon-plus"></i>
|
||||||
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -260,6 +473,7 @@
|
|||||||
import { noSpecialChar, port, nzNumber } from '../js/validate'
|
import { noSpecialChar, port, nzNumber } from '../js/validate'
|
||||||
import selectWalk from '../popBox/selectWalk'
|
import selectWalk from '../popBox/selectWalk'
|
||||||
import editRigthBox from '../mixin/editRigthBox'
|
import editRigthBox from '../mixin/editRigthBox'
|
||||||
|
import pipelineSelect from './pipelineSelect'
|
||||||
import VueTagsInput from '@johmun/vue-tags-input'
|
import VueTagsInput from '@johmun/vue-tags-input'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -270,7 +484,8 @@ export default {
|
|||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
'select-walk': selectWalk,
|
'select-walk': selectWalk,
|
||||||
VueTagsInput
|
VueTagsInput,
|
||||||
|
pipelineSelect
|
||||||
},
|
},
|
||||||
mixins: [editRigthBox],
|
mixins: [editRigthBox],
|
||||||
data () {
|
data () {
|
||||||
@@ -278,6 +493,8 @@ export default {
|
|||||||
walkData: [],
|
walkData: [],
|
||||||
chartlList: [],
|
chartlList: [],
|
||||||
activeName: 'Basic',
|
activeName: 'Basic',
|
||||||
|
activeNameLogs: ['Basic'],
|
||||||
|
pipelineOptionValue: '',
|
||||||
expandedWalkData: [],
|
expandedWalkData: [],
|
||||||
radio: 'password',
|
radio: 'password',
|
||||||
editModule: {},
|
editModule: {},
|
||||||
@@ -304,10 +521,6 @@ export default {
|
|||||||
walk: [
|
walk: [
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||||
],
|
],
|
||||||
port: [
|
|
||||||
{ validator: port, trigger: 'blur' },
|
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
||||||
],
|
|
||||||
username: [
|
username: [
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||||
],
|
],
|
||||||
@@ -339,16 +552,71 @@ export default {
|
|||||||
name: 'SNMP'
|
name: 'SNMP'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
logsBasicList: [
|
||||||
|
{
|
||||||
|
value: 'file',
|
||||||
|
name: 'File'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'journal',
|
||||||
|
name: 'Journal'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'syslog',
|
||||||
|
name: 'Syslog'
|
||||||
|
}
|
||||||
|
],
|
||||||
authType: 0,
|
authType: 0,
|
||||||
authTypeList: [
|
authTypeList: [
|
||||||
{ name: this.$t('project.endpoint.authTypeNull'), value: 0 },
|
{ name: this.$t('project.endpoint.authTypeNull'), value: 0 },
|
||||||
{ name: this.$t('project.endpoint.authTypeWord'), value: 1 },
|
{ name: this.$t('project.endpoint.authTypeWord'), value: 1 },
|
||||||
{ name: this.$t('project.endpoint.authTypeToken'), value: 2 }
|
{ name: this.$t('project.endpoint.authTypeToken'), value: 2 }
|
||||||
],
|
],
|
||||||
configsCopyValue: ''
|
configsCopyValue: '',
|
||||||
|
logsCopyValue: [],
|
||||||
|
pipelineOption: [
|
||||||
|
{
|
||||||
|
label: 'Parsing stages',
|
||||||
|
pipelineOption: [
|
||||||
|
{
|
||||||
|
value: 'regex',
|
||||||
|
label: 'Regex'
|
||||||
|
}, {
|
||||||
|
value: 'json',
|
||||||
|
label: 'Json'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Transform stages',
|
||||||
|
pipelineOption: [
|
||||||
|
{
|
||||||
|
value: 'template',
|
||||||
|
label: 'Template'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Action stages',
|
||||||
|
pipelineOption: [
|
||||||
|
{
|
||||||
|
value: 'timestamp',
|
||||||
|
label: 'Timestamp'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'labels',
|
||||||
|
label: 'Labels'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'output',
|
||||||
|
label: 'Output'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
port: port,
|
||||||
selectWalk (walk) {
|
selectWalk (walk) {
|
||||||
if (this.editModule.walk.indexOf(walk) != -1) {
|
if (this.editModule.walk.indexOf(walk) != -1) {
|
||||||
this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
|
this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
|
||||||
@@ -455,16 +723,21 @@ export default {
|
|||||||
/* 保存 */
|
/* 保存 */
|
||||||
save () {
|
save () {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.editModule.configs.params = this.paramToJson(this.editModule.paramObj)
|
this.editModule.configs[0].config.params = this.paramToJson(this.editModule.paramObj)
|
||||||
this.editModule.configs.labels = this.labelsToJson(this.editModule.labelModule)
|
this.editModule.configs[0].config.labels = this.labelsToJson(this.editModule.labelModule)
|
||||||
|
this.editModule.configs[1].config.forEach(item => {
|
||||||
|
if (item.labels) {
|
||||||
|
item.labels = this.labelsToJson(item.labels)
|
||||||
|
}
|
||||||
|
})
|
||||||
const params = { ...this.editModule }
|
const params = { ...this.editModule }
|
||||||
params.configs.walk = params.walk
|
|
||||||
params.configs.port = params.port
|
|
||||||
params.configs = JSON.stringify(params.configs)
|
params.configs = JSON.stringify(params.configs)
|
||||||
if (this.authType === 2 && !this.editModule.configs.bearer_token) {
|
if (this.authType === 2 && !this.editModule.configs[0].config.bearer_token) {
|
||||||
this.$message.error("'token' is required")
|
this.$message.error("'token' is required")
|
||||||
} else if (this.authType === 1 && !(this.editModule.configs.basic_auth.username && this.editModule.configs.basic_auth.pin)) {
|
return
|
||||||
|
} else if (this.authType === 1 && !(this.editModule.configs[0].config.basic_auth.username && this.editModule.configs[0].config.basic_auth.pin)) {
|
||||||
this.$message.error("'username' and 'password' is required")
|
this.$message.error("'username' and 'password' is required")
|
||||||
|
return
|
||||||
} else {
|
} else {
|
||||||
this.authType = 0
|
this.authType = 0
|
||||||
}
|
}
|
||||||
@@ -556,13 +829,24 @@ export default {
|
|||||||
addLabel () {
|
addLabel () {
|
||||||
this.editModule.labelModule.push({ key: '', value: '' })
|
this.editModule.labelModule.push({ key: '', value: '' })
|
||||||
},
|
},
|
||||||
|
addLogsLabel (index) {
|
||||||
|
this.editModule.configs[1].config[index].labelModule.push({ key: '', value: '' })
|
||||||
|
},
|
||||||
// 移除单个Label
|
// 移除单个Label
|
||||||
removeLabel (index) {
|
removeLabel (index) {
|
||||||
if (this.editModule.labelModule.length === 1) {
|
if (this.editModule.labelModule.length === 1) {
|
||||||
this.editModule.labelModule = [{ key: '', value: '' }]
|
this.editModule.labelModule = [{ key: '', value: '' }]
|
||||||
|
return
|
||||||
}
|
}
|
||||||
this.editModule.labelModule.splice(index, 1)
|
this.editModule.labelModule.splice(index, 1)
|
||||||
},
|
},
|
||||||
|
removeLogsLabel (logsIndex, i) {
|
||||||
|
if (this.editModule.configs[1].config[logsIndex].labelModule.length === 1) {
|
||||||
|
this.editModule.configs[1].config[logsIndex].labelModule = [{ key: '', value: '' }]
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editModule.configs[1].config[logsIndex].labelModule.splice(i, 1)
|
||||||
|
},
|
||||||
tagsChange (newTags, index) {
|
tagsChange (newTags, index) {
|
||||||
this.editModule.paramObj[index].value = newTags.map(item => item.text)
|
this.editModule.paramObj[index].value = newTags.map(item => item.text)
|
||||||
},
|
},
|
||||||
@@ -601,12 +885,39 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
changeAuthType () {
|
changeAuthType () {
|
||||||
this.editModule.configs.bearer_token = ''
|
this.editModule.configs[0].config.bearer_token = ''
|
||||||
this.editModule.configs.basic_auth = {
|
this.editModule.configs[0].config.basic_auth = {
|
||||||
username: '',
|
username: '',
|
||||||
pin: ''
|
pin: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
logsLogsArrAdd () {
|
||||||
|
this.activeNameLogs.push('Basic')
|
||||||
|
this.logsCopyValue.push('')
|
||||||
|
this.editModule.configs[1].config.push({
|
||||||
|
basic: {
|
||||||
|
type: 'file',
|
||||||
|
fileName: '',
|
||||||
|
appName: '',
|
||||||
|
listenAddress: '',
|
||||||
|
unit: ''
|
||||||
|
},
|
||||||
|
labels: '',
|
||||||
|
labelModule: [{ key: '', value: '' }],
|
||||||
|
pipeline: []
|
||||||
|
})
|
||||||
|
},
|
||||||
|
removeLogsArr (index) {
|
||||||
|
if (this.editModule.configs[1].config.length !== 1) {
|
||||||
|
this.editModule.configs[1].config.splice(index, 1)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
logsBasicTypeChange (i) {
|
||||||
|
this.editModule.configs[1].config[i].basic.value = ''
|
||||||
|
this.editModule.configs[1].config[i].basic.appName = ''
|
||||||
|
this.editModule.configs[1].config[i].basic.listenAddress = ''
|
||||||
|
this.editModule.configs[1].config[i].basic.unit = ''
|
||||||
|
},
|
||||||
copyValue () {
|
copyValue () {
|
||||||
const domUrl = document.createElement('input')
|
const domUrl = document.createElement('input')
|
||||||
domUrl.value = this.configsCopyValue
|
domUrl.value = this.configsCopyValue
|
||||||
@@ -618,6 +929,46 @@ export default {
|
|||||||
creatDom.parentNode.removeChild(creatDom)
|
creatDom.parentNode.removeChild(creatDom)
|
||||||
this.$message.success(this.$t('overall.copySuccess'))
|
this.$message.success(this.$t('overall.copySuccess'))
|
||||||
},
|
},
|
||||||
|
copyLogsValue (index) {
|
||||||
|
const domUrl = document.createElement('input')
|
||||||
|
domUrl.value = this.logsCopyValue[index]
|
||||||
|
domUrl.id = 'creatDom'
|
||||||
|
document.body.appendChild(domUrl)
|
||||||
|
domUrl.select() // 选择对象
|
||||||
|
document.execCommand('Copy') // 执行浏览器复制命令
|
||||||
|
const creatDom = document.getElementById('creatDom')
|
||||||
|
creatDom.parentNode.removeChild(creatDom)
|
||||||
|
this.$message.success(this.$t('overall.copySuccess'))
|
||||||
|
},
|
||||||
|
tabClick (index) {
|
||||||
|
if (this.activeNameLogs[index] === 'Preview') {
|
||||||
|
const params = JSON.parse(JSON.stringify(this.editModule.configs[1].config[index]))
|
||||||
|
params.labels = this.labelsToJson(params.labelModule)
|
||||||
|
delete params.labelModule
|
||||||
|
Object.keys(params).forEach(key => {
|
||||||
|
if (!params[key]) {
|
||||||
|
delete params[key]
|
||||||
|
}
|
||||||
|
if (Array.isArray(params[key]) && !params[key].length) {
|
||||||
|
delete params[key]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (params.labels && !Object.keys(params.labels).length) {
|
||||||
|
delete params.labels
|
||||||
|
}
|
||||||
|
Object.keys(params.basic).forEach(key => {
|
||||||
|
if (!params.basic[key]) {
|
||||||
|
delete params.basic[key]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
params.pipeline && params.pipeline.forEach(item => {
|
||||||
|
if (item.type === 'labels') {
|
||||||
|
item.labels = this.labelsToJson(item.labels)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.logsCopyValue[index] = JSON.stringify(params, null, 2)
|
||||||
|
}
|
||||||
|
},
|
||||||
syntaxHighlight (json) {
|
syntaxHighlight (json) {
|
||||||
if (typeof json != 'string') {
|
if (typeof json != 'string') {
|
||||||
json = JSON.stringify(json, undefined, 2)
|
json = JSON.stringify(json, undefined, 2)
|
||||||
@@ -657,6 +1008,47 @@ export default {
|
|||||||
this.$get('visual/panel/chart', { pageSize: -1, varType: 2, panelId: 0, returnChildren: 0, groupId: 0 }).then(res => {
|
this.$get('visual/panel/chart', { pageSize: -1, varType: 2, panelId: 0, returnChildren: 0, groupId: 0 }).then(res => {
|
||||||
this.chartlList = res.data.list
|
this.chartlList = res.data.list
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
// 添加pipeline
|
||||||
|
addPipeline (obj, logsIndex, pipeLineIndex, type) {
|
||||||
|
if (type == 'splice') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline.splice(pipeLineIndex, 0, obj)
|
||||||
|
}
|
||||||
|
if (type == 'push') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline.push(obj)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除pipeline
|
||||||
|
delPipeline (logsIndex, pipeLineIndex) {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline.splice(pipeLineIndex, 1)
|
||||||
|
},
|
||||||
|
// 添加pipelineItem
|
||||||
|
addPipelineItem (logsIndex, pipelineIndex) {
|
||||||
|
const val = this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].type
|
||||||
|
if (val === 'regex') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expression.push('')
|
||||||
|
} else if (val === 'json') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('')
|
||||||
|
} else if (val === 'template') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('')
|
||||||
|
} else if (val === 'timestamp') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('')
|
||||||
|
} else if (val === 'labels') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].labels.push({
|
||||||
|
key: '',
|
||||||
|
value: ''
|
||||||
|
})
|
||||||
|
} else if (val === 'output') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
delPipelineItem (logsIndex, pipelineIndex, itemIndex) {
|
||||||
|
const val = this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].type
|
||||||
|
if (val === 'json') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.splice(itemIndex, 1)
|
||||||
|
} else if (val === 'labels') {
|
||||||
|
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].labels.splice(itemIndex, 1)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
@@ -682,10 +1074,11 @@ export default {
|
|||||||
this.isEdit = true
|
this.isEdit = true
|
||||||
this.editModule = JSON.parse(JSON.stringify(n))
|
this.editModule = JSON.parse(JSON.stringify(n))
|
||||||
this.activeName = 'Basic'
|
this.activeName = 'Basic'
|
||||||
|
this.activeNameLogs = this.editModule.configs[1].config.map(() => 'Basic')
|
||||||
if (this.editModule.configs.bearer_token) {
|
this.logsCopyValue = this.editModule.configs[1].config.map(() => '')
|
||||||
|
if (this.editModule.configs[0].config.bearer_token) {
|
||||||
this.authType = 2
|
this.authType = 2
|
||||||
} else if (this.editModule.configs.basic_auth.username) {
|
} else if (this.editModule.configs[0].config.basic_auth.username) {
|
||||||
this.authType = 1
|
this.authType = 1
|
||||||
} else {
|
} else {
|
||||||
this.authType = 0
|
this.authType = 0
|
||||||
@@ -693,18 +1086,9 @@ export default {
|
|||||||
if (n.type && n.type.toLowerCase() == 'snmp') {
|
if (n.type && n.type.toLowerCase() == 'snmp') {
|
||||||
this.$refs.selectWalk.show()
|
this.$refs.selectWalk.show()
|
||||||
for (let i = 0; i < this.editModule.walk.length; i++) {
|
for (let i = 0; i < this.editModule.walk.length; i++) {
|
||||||
this.expandedWalkData.push(this.editModule.configs.walk[i].substring(0, this.editModule.configs.walk[i].lastIndexOf('.')))
|
this.expandedWalkData.push(this.editModule.configs[0].config.walk[i].substring(0, this.editModule.configs[0].config.walk[i].lastIndexOf('.')))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// if (n.id) {
|
|
||||||
// } else {
|
|
||||||
// if (n.type && n.type.toLowerCase() == 'snmp') {
|
|
||||||
// this.$refs.selectWalk.show()
|
|
||||||
// for (let i = 0; i < this.editModule.walk.length; i++) {
|
|
||||||
// this.expandedWalkData.push(this.editModule.walk[i].substring(0, this.editModule.walk[i].lastIndexOf('.')))
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
editModule: {
|
editModule: {
|
||||||
@@ -744,7 +1128,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.module-walk-box {
|
.module-walk-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid #DCDFE6;
|
border: 1px solid #DCDFE6;
|
||||||
@@ -819,7 +1203,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
/deep/ .el-tabs__content{
|
/deep/ .el-tabs__content{
|
||||||
padding-left: 18px;
|
/*padding-left: 18px;*/
|
||||||
}
|
}
|
||||||
.need-rotate.nz-icon-arrow-down{
|
.need-rotate.nz-icon-arrow-down{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -832,14 +1216,14 @@ export default {
|
|||||||
}
|
}
|
||||||
.module-add-label{
|
.module-add-label{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 300px;
|
width: 16px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
background: #FFFCF9;
|
background: rgba(250,144,28,0.1);
|
||||||
border: 1px solid #FFE0BD;
|
border: 1px solid #FFE0BD;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
margin-right: 80px;
|
margin-right: 55px;
|
||||||
}
|
}
|
||||||
.configs-copy-value{
|
.configs-copy-value{
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
@@ -850,8 +1234,12 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 10px 0px 10px 15px;
|
padding: 10px 0px 10px 15px;
|
||||||
width: calc(100% - 40px);
|
width:100%;
|
||||||
margin-left: 20px;
|
margin-left: 0px;
|
||||||
|
pre{
|
||||||
|
max-height: 300px;
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.configs-copy-value .copy-value-content{
|
.configs-copy-value .copy-value-content{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -874,6 +1262,59 @@ export default {
|
|||||||
/deep/ .el-form-item__content .el-input-group {
|
/deep/ .el-form-item__content .el-input-group {
|
||||||
vertical-align: unset;
|
vertical-align: unset;
|
||||||
}
|
}
|
||||||
|
/deep/ .special-tabs.el-tabs.el-tabs--top{
|
||||||
|
border: 1px dashed #D8D9DA;
|
||||||
|
padding: 7px 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nz-icon-minus-medium {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 15px;
|
||||||
|
background: rgba(236,127,102,0.1);
|
||||||
|
padding: 2px 6px;
|
||||||
|
color: #EC7F66;
|
||||||
|
}
|
||||||
|
.endpoint-title{
|
||||||
|
border: 1px solid #E7EAED;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: flex;
|
||||||
|
padding: 8px 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.endpoint-title .endpoint-title-content{
|
||||||
|
font-family: Roboto-Medium;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.value-mapping-add {
|
||||||
|
background: rgba(250,144,28,0.1);
|
||||||
|
border: 1px solid #FFE0BD;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #FA901C;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.pipeline-box{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #E7EAED;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.pipeline-title{
|
||||||
|
font-family: Roboto-Medium;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FA901C;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: Capitalize;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.sub-label {
|
.sub-label {
|
||||||
|
|||||||
216
nezha-fronted/src/components/common/rightBox/pipelineSelect.vue
Normal file
216
nezha-fronted/src/components/common/rightBox/pipelineSelect.vue
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<span style="position: relative">
|
||||||
|
<el-select
|
||||||
|
id="module-box-logs-pipeline-type"
|
||||||
|
class="right-box__select"
|
||||||
|
placeholder=""
|
||||||
|
popper-class="right-box-select-dropdown prevent-clickoutside pipeline"
|
||||||
|
size="small"
|
||||||
|
ref="select"
|
||||||
|
v-model="pipelineOptionValue"
|
||||||
|
@change="(val)=>{addPipeline(val)}"
|
||||||
|
style="width: 0;height: 0;opacity: 0;z-index: -1">
|
||||||
|
<el-option-group
|
||||||
|
v-for="group in option"
|
||||||
|
:key="group.label"
|
||||||
|
:label="group.label">
|
||||||
|
<el-option
|
||||||
|
v-for="item in group.pipelineOption"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-option-group>
|
||||||
|
</el-select>
|
||||||
|
<i class="nz-icon nz-icon-plus" @click="addPipelineShow"></i>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'pepelineSelect',
|
||||||
|
props: {
|
||||||
|
fatherPipeline: {
|
||||||
|
type: Array
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
pipelineOption: [
|
||||||
|
{
|
||||||
|
label: 'Parsing stages',
|
||||||
|
pipelineOption: [
|
||||||
|
{
|
||||||
|
value: 'regex',
|
||||||
|
label: 'Regex'
|
||||||
|
}, {
|
||||||
|
value: 'json',
|
||||||
|
label: 'Json'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Transform stages',
|
||||||
|
pipelineOption: [
|
||||||
|
{
|
||||||
|
value: 'template',
|
||||||
|
label: 'Template'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Action stages',
|
||||||
|
pipelineOption: [
|
||||||
|
{
|
||||||
|
value: 'timestamp',
|
||||||
|
label: 'Timestamp'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'labels',
|
||||||
|
label: 'Labels'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'output',
|
||||||
|
label: 'Output'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}],
|
||||||
|
option: [],
|
||||||
|
pipelineOptionValue: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
fatherPipeline: {
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
handler (n) { // 共6种添加的情况 0-0 0-1 0-2 1-1 1-2 2-2
|
||||||
|
const prev = n[this.index - 1]
|
||||||
|
const now = n[this.index]
|
||||||
|
if (!now) {
|
||||||
|
this.option = this.pipelineOption
|
||||||
|
}
|
||||||
|
const prevTypeIndex = this.getTypeindex(prev)
|
||||||
|
const nowTypeIndex = this.getTypeindex(now)
|
||||||
|
if (this.type === 'push') { // 向后添加
|
||||||
|
if (nowTypeIndex === 0) {
|
||||||
|
this.option = [...this.pipelineOption]
|
||||||
|
} else if (nowTypeIndex === 1) {
|
||||||
|
this.option = [this.pipelineOption[1], this.pipelineOption[2]]
|
||||||
|
} else if (nowTypeIndex === 2) {
|
||||||
|
this.option = [this.pipelineOption[2]]
|
||||||
|
}
|
||||||
|
} else if (this.type === 'splice') {
|
||||||
|
if (prevTypeIndex === nowTypeIndex) { // 判断为0-0 1-1 2-2的情况
|
||||||
|
this.option = [this.pipelineOption[nowTypeIndex]]
|
||||||
|
} else
|
||||||
|
if (prevTypeIndex === 0 && nowTypeIndex === 2) { // 判断为0-2的情况
|
||||||
|
this.option = [...this.pipelineOption]
|
||||||
|
} else { // 判断为0-1 1-2的情况
|
||||||
|
this.option = [this.pipelineOption[prevTypeIndex], this.pipelineOption[nowTypeIndex]]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addPipeline (val) {
|
||||||
|
console.log(val)
|
||||||
|
let obj = ''
|
||||||
|
this.pipelineOptionValue = ''
|
||||||
|
if (val === 'regex') {
|
||||||
|
obj = {
|
||||||
|
type: 'regex',
|
||||||
|
expression: '',
|
||||||
|
source: ''
|
||||||
|
}
|
||||||
|
} else if (val === 'json') {
|
||||||
|
obj = {
|
||||||
|
type: 'json',
|
||||||
|
expressions: [''],
|
||||||
|
source: ''
|
||||||
|
}
|
||||||
|
} else if (val === 'template') {
|
||||||
|
obj = {
|
||||||
|
type: 'template',
|
||||||
|
template: '',
|
||||||
|
source: ''
|
||||||
|
}
|
||||||
|
} else if (val === 'timestamp') {
|
||||||
|
obj = {
|
||||||
|
type: 'timestamp',
|
||||||
|
format: '',
|
||||||
|
source: ''
|
||||||
|
}
|
||||||
|
} else if (val === 'labels') {
|
||||||
|
obj = {
|
||||||
|
type: 'labels',
|
||||||
|
labels: [{ key: '', value: '' }],
|
||||||
|
source: ''
|
||||||
|
}
|
||||||
|
} else if (val === 'output') {
|
||||||
|
obj = {
|
||||||
|
type: 'output',
|
||||||
|
source: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$emit('addPipeline', this.index, obj)
|
||||||
|
},
|
||||||
|
addPipelineShow () {
|
||||||
|
this.$refs.select.visible = true
|
||||||
|
},
|
||||||
|
getTypeindex (item) {
|
||||||
|
if (!item || item.type === 'regex' || item.type === 'json') {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
if (item.type === 'template') {
|
||||||
|
return 1
|
||||||
|
}
|
||||||
|
if (item.type === 'timestamp' || item.type === 'labels' || item.type === 'output') {
|
||||||
|
return 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.right-box__select{
|
||||||
|
position: absolute;
|
||||||
|
left: -55px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.pipeline{
|
||||||
|
width: 178px !important;
|
||||||
|
.el-select-group__wrap:not(:last-of-type){
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.el-select-group__title{
|
||||||
|
padding-left: 10px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.el-select-dropdown__item{
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.el-select-group__wrap:not(:last-of-type)::after{
|
||||||
|
bottom: -2px;
|
||||||
|
left: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.el-select-dropdown__wrap{
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
.popper__arrow{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -90,10 +90,14 @@ export default {
|
|||||||
projectId: '',
|
projectId: '',
|
||||||
name: '',
|
name: '',
|
||||||
endpointNameTmpl: '{{module.name}}-{{asset.name}}',
|
endpointNameTmpl: '{{module.name}}-{{asset.name}}',
|
||||||
type: 'http',
|
|
||||||
port: '',
|
port: '',
|
||||||
chartIds: '',
|
chartIds: '',
|
||||||
configs: {
|
metricsEnable: 1,
|
||||||
|
configs: [
|
||||||
|
{
|
||||||
|
type: 'metrics',
|
||||||
|
config: {
|
||||||
|
protocol: 'http',
|
||||||
walk: [],
|
walk: [],
|
||||||
snmpCredentialsId: '',
|
snmpCredentialsId: '',
|
||||||
metrics_path: '',
|
metrics_path: '',
|
||||||
@@ -107,8 +111,27 @@ export default {
|
|||||||
username: '',
|
username: '',
|
||||||
pin: ''
|
pin: ''
|
||||||
},
|
},
|
||||||
bearer_token: ''
|
bearer_token: '',
|
||||||
},
|
},
|
||||||
|
enable: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'logs',
|
||||||
|
config: [{
|
||||||
|
basic: {
|
||||||
|
type: 'file',
|
||||||
|
fileName: '',
|
||||||
|
appName: '',
|
||||||
|
listenAddress: '',
|
||||||
|
unit: ''
|
||||||
|
},
|
||||||
|
labels: '',
|
||||||
|
labelModule: [{ key: '', value: '' }],
|
||||||
|
pipeline: [],
|
||||||
|
}],
|
||||||
|
enable: 1
|
||||||
|
}
|
||||||
|
],
|
||||||
walk: [],
|
walk: [],
|
||||||
labelModule: [{
|
labelModule: [{
|
||||||
key: '',
|
key: '',
|
||||||
@@ -171,6 +194,16 @@ export default {
|
|||||||
this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
|
this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
|
||||||
this.object.paramObj = []
|
this.object.paramObj = []
|
||||||
this.object.labelModule = []
|
this.object.labelModule = []
|
||||||
|
this.object.logsConfig.forEach(item => {
|
||||||
|
item.labelModule = []
|
||||||
|
if (JSON.stringify(item.labels) !== '{}' && item.labels) {
|
||||||
|
Object.keys(this.object.configs.labels).forEach(key => {
|
||||||
|
item.labelModule.push({ key, value: item.labels[key] })
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
item.labelModule.push({ key: '', value: '' })
|
||||||
|
}
|
||||||
|
})
|
||||||
if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) {
|
if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) {
|
||||||
Object.keys(this.object.configs.labels).forEach(key => {
|
Object.keys(this.object.configs.labels).forEach(key => {
|
||||||
this.object.labelModule.push({ key, value: this.object.configs.labels[key] })
|
this.object.labelModule.push({ key, value: this.object.configs.labels[key] })
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
{"baseUrl":"/", "version": "21.04"}
|
{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "21.04"}
|
||||||
|
|||||||
Reference in New Issue
Block a user