610 lines
19 KiB
Vue
610 lines
19 KiB
Vue
<template>
|
||
<div class="collectors">
|
||
<div class="system-title">{{ $t("buttons.system.monitor") }}</div>
|
||
<div class="collectors-settingTable list-page">
|
||
<div class="nz-table-list">
|
||
<el-table :data="configurationData" border>
|
||
<el-table-column
|
||
class="table-column__head"
|
||
v-for="(item, index) in tableTitle"
|
||
:key="`col-${index}-${item.prop}`"
|
||
:width="`${item.width}`"
|
||
:min-width="`${item.minWidth}`"
|
||
:label="item.label"
|
||
:prop="item.prop"
|
||
:resizable="true"
|
||
>
|
||
<template slot="header">
|
||
<span class="data-column__span">{{ item.label }}</span>
|
||
<div class="col-resize-area"></div>
|
||
</template>
|
||
<template slot-scope="scope" :column="item">
|
||
<span v-if="item.prop === 'asset_ping_interval' || item.prop === 'default_scrape_interval'">
|
||
{{ scope.row[item.prop] }}
|
||
<span>{{$t('alert.config.second')}}</span>
|
||
</span>
|
||
<span v-if="item.prop === 'metrics_storage_retention' || item.prop === 'logs_storage_retention'">
|
||
{{ scope.row[item.prop] }}
|
||
<span>{{$t('config.system.basic.day')}}</span>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :resizable="false" fixed="right" width="120px">
|
||
<div slot-scope="scope">
|
||
<div class="table-operation-items">
|
||
<button
|
||
class="table-operation-edit"
|
||
style="cursor: pointer"
|
||
@click="configurationEdit()"
|
||
:title="$t('config.edit_APM_settings')"
|
||
>
|
||
<i class="nz-icon-gear nz-icon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</el-table-column>
|
||
<template slot="empty">
|
||
<div class="table-no-data">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||
</svg>
|
||
<div class="table-no-data__title">No results found</div>
|
||
</div>
|
||
</template>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-title">{{ $t("overall.collectors") }}</div>
|
||
<nz-data-list
|
||
ref="dataList"
|
||
:api="url"
|
||
:custom-table-title.sync="tools.customTableTitle"
|
||
:from="fromRoute.agent"
|
||
:layout="['searchInput', 'elementSet', 'pagination']"
|
||
:search-msg="searchMsg"
|
||
@search="search"
|
||
>
|
||
<template v-slot:top-tool-right>
|
||
<button
|
||
id="prom-add"
|
||
v-has="'agent_add'"
|
||
:title="$t('overall.createPrometheusServer')"
|
||
class="top-tool-btn margin-r-10"
|
||
type="button"
|
||
@click="add"
|
||
>
|
||
<i class="nz-icon-create-square nz-icon"></i>
|
||
</button>
|
||
<button
|
||
id="load-agent"
|
||
class="top-tool-btn margin-r-10"
|
||
type="button"
|
||
@click="toDownloadAgent"
|
||
v-has="'agent_edit'"
|
||
:title="$t('overall.download')"
|
||
>
|
||
<i class="nz-icon-download nz-icon"></i>
|
||
</button>
|
||
<delete-button
|
||
ref="deleteButton"
|
||
:single="false"
|
||
:from="'agent'"
|
||
:forceDeleteShow="true"
|
||
id="promserver-list-batch-delete"
|
||
v-has="'agent_delete'"
|
||
:delete-objs="batchDeleteObjs"
|
||
api="agent"
|
||
@after="getTableData"
|
||
@before="delFlag = true"
|
||
></delete-button>
|
||
</template>
|
||
<template v-slot:default="slotProps">
|
||
<agent-table
|
||
ref="dataTable"
|
||
:orderByFa="orderBy"
|
||
v-my-loading="tools.loading"
|
||
:loading="tools.loading"
|
||
:api="url"
|
||
:custom-table-title="tools.customTableTitle"
|
||
:height="mainTableHeight"
|
||
:table-data="tableData"
|
||
@del="del"
|
||
@edit="edit"
|
||
@copy="copy"
|
||
@orderBy="tableDataSort"
|
||
@reload="getTableData"
|
||
@selectionChange="selectionChange"
|
||
@showBottomBox="
|
||
(targetTab, object) => {
|
||
$refs.dataList.showBottomBox(targetTab, object);
|
||
}
|
||
"
|
||
></agent-table>
|
||
</template>
|
||
<!-- 分页组件 -->
|
||
<template v-slot:pagination>
|
||
<Pagination
|
||
ref="Pagination"
|
||
:pageObj="pageObj"
|
||
:tableId="tableId"
|
||
@pageNo="pageNo"
|
||
@pageSize="pageSize"
|
||
></Pagination>
|
||
</template>
|
||
</nz-data-list>
|
||
<transition name="right-box">
|
||
<agent-box
|
||
v-if="rightBox.show"
|
||
:agent="object"
|
||
@close="closeRightBox"
|
||
></agent-box>
|
||
</transition>
|
||
<transition name="right-box">
|
||
<configuration-box
|
||
v-if="configurationBox"
|
||
:obj="configurationObject"
|
||
@close="closeConfiguration"
|
||
></configuration-box>
|
||
</transition>
|
||
<el-dialog
|
||
:title="$t('guide.downloadAgent')"
|
||
:visible.sync="showAgentDownload"
|
||
:append-to-body="false"
|
||
class="nz-dialog agent-dialog no-transform-dialog"
|
||
width="800px"
|
||
@close="closeDialog"
|
||
>
|
||
<div class="agent-box">
|
||
<el-form
|
||
v-model="agentParam"
|
||
class="right-box-form right-box-form-left"
|
||
label-position="top"
|
||
label-width="120px"
|
||
size="small"
|
||
style="width: 100%"
|
||
>
|
||
<div class="right-box-sub-title">{{ $t("overall.download") }}</div>
|
||
<div style="margin-bottom: 20px; width: 100%"></div>
|
||
<el-form-item
|
||
:label="$t('config.agent.agent.osType')"
|
||
class="half-form-item"
|
||
prop="osType"
|
||
>
|
||
<el-select
|
||
v-model="agentParam.osType"
|
||
class="right-box-row-with-btn"
|
||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||
placeholder=""
|
||
:popper-append-to-body="false"
|
||
>
|
||
<el-option
|
||
v-for="item in osTypes"
|
||
:key="item.name"
|
||
:label="item.label"
|
||
:value="item.name"
|
||
>
|
||
<span class="panel-dropdown-label-txt">{{ item.label }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item class="half-form-item" style="width: 300px">
|
||
<button
|
||
:class="{ 'nz-btn-disabled': downloadAgentFlag }"
|
||
:disabled="downloadAgentFlag"
|
||
class="nz-btn nz-btn-size-normal nz-btn-style-normal"
|
||
type="button"
|
||
@click="downloadAgent"
|
||
>
|
||
{{ $t("overall.download") }}
|
||
</button>
|
||
<span class="downloading" v-if="downloadAgentFlag">{{
|
||
$t("overall.downloading")
|
||
}}</span>
|
||
</el-form-item>
|
||
<div class="right-box-sub-title">
|
||
{{ $t("config.agent.agent.autoScript") }}
|
||
</div>
|
||
<div style="margin-bottom: 20px; width: 100%"></div>
|
||
|
||
<el-form-item
|
||
:label="$t('overall.dc')"
|
||
class="half-form-item"
|
||
prop="dc"
|
||
>
|
||
<el-select
|
||
v-model="agentParam.dc"
|
||
class="right-box-row-with-btn"
|
||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||
placeholder=""
|
||
:popper-append-to-body="false"
|
||
>
|
||
<el-option
|
||
v-for="item in allDc"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
>
|
||
<span class="panel-dropdown-label-txt">{{ item.name }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="$t('config.agent.agent.type')"
|
||
class="half-form-item"
|
||
prop="type"
|
||
>
|
||
<el-select
|
||
v-model="agentParam.type"
|
||
class="right-box-row-with-btn"
|
||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||
placeholder=""
|
||
:popper-append-to-body="false"
|
||
>
|
||
<el-option
|
||
v-for="item in agent2.theData"
|
||
:key="item.value"
|
||
:label="$t(item.label)"
|
||
:value="item.value"
|
||
:disabled="federationEnabled && item.value == 2"
|
||
>
|
||
<span class="panel-dropdown-label-txt">{{ item.label }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="CURL" v-if="loadFinish" class="download-url">
|
||
<el-input id="download-url-curl" :disabled="true" v-model="curlUrl">
|
||
<el-popover
|
||
:content="$t('overall.copySuccess')"
|
||
placement="top"
|
||
trigger="manual"
|
||
v-model="curlVisible"
|
||
popper-class="small-pop"
|
||
slot="suffix"
|
||
@after-enter="popShow('curl')"
|
||
style="cursor: pointer"
|
||
>
|
||
<i
|
||
v-if="curlUrl"
|
||
slot="reference"
|
||
class="nz-icon nz-icon-override"
|
||
@click="copyUrl(curlUrl)"
|
||
:title="$t('overall.copyText')"
|
||
></i>
|
||
</el-popover>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="Wget" v-if="loadFinish" class="download-url">
|
||
<el-input id="download-url-wget" :disabled="true" v-model="wgetUrl">
|
||
<el-popover
|
||
:content="$t('overall.copySuccess')"
|
||
placement="top"
|
||
trigger="manual"
|
||
v-model="wgetVisible"
|
||
popper-class="small-pop"
|
||
slot="suffix"
|
||
@after-enter="popShow('wget')"
|
||
style="cursor: pointer"
|
||
>
|
||
<i
|
||
v-if="wgetUrl"
|
||
slot="reference"
|
||
class="nz-icon nz-icon-override"
|
||
@click="copyUrl(wgetUrl)"
|
||
:title="$t('overall.copyText')"
|
||
></i>
|
||
</el-popover>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import deleteButton from '@/components/common/deleteButton'
|
||
import agentBox from '@/components/common/rightBox/agentBox'
|
||
import configurationBox from '@/components/common/rightBox/configurationBox'
|
||
import { agent, agent2 } from '@/components/common/js/constants'
|
||
import nzDataList from '@/components/common/table/nzDataList'
|
||
import dataListMixin from '@/components/common/mixin/dataList'
|
||
import agentTable from '@/components/common/table/settings/agentTable'
|
||
import axios from 'axios'
|
||
export default {
|
||
name: 'agent',
|
||
components: {
|
||
nzDataList,
|
||
agentBox,
|
||
agentTable,
|
||
deleteButton,
|
||
configurationBox
|
||
},
|
||
mixins: [dataListMixin],
|
||
computed: {
|
||
wgetUrl () {
|
||
return (
|
||
'wget -qO- --no-check-certificate --header="Authorization:' +
|
||
this.token +
|
||
'" ' +
|
||
this.ipAddr +
|
||
'/agent/' +
|
||
this.agentParam.dc +
|
||
'/' +
|
||
this.agentParam.type +
|
||
'/install.sh | sudo -E bash'
|
||
)
|
||
},
|
||
curlUrl () {
|
||
return (
|
||
'curl -o- -k -H "Authorization:' +
|
||
this.token +
|
||
'" ' +
|
||
this.ipAddr +
|
||
'/agent/' +
|
||
this.agentParam.dc +
|
||
'/' +
|
||
this.agentParam.type +
|
||
'/install.sh | sudo -E bash'
|
||
)
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
url: 'agent',
|
||
tableId: 'promTable', // 需要分页的table的id，用于记录每页数量
|
||
detailType: 'list',
|
||
blankObject: {
|
||
id: '',
|
||
name: '',
|
||
host: '',
|
||
port: 10090,
|
||
dc: { id: '', name: '', location: '' },
|
||
protocol: 'http'
|
||
},
|
||
agent: agent,
|
||
agent2: agent2,
|
||
dcData: [],
|
||
searchMsg: {
|
||
// 给搜索框子组件传递的信息
|
||
zheze_none: true,
|
||
searchLabelList: [
|
||
{
|
||
name: 'ID',
|
||
type: 'input',
|
||
label: 'ids',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: this.$t('overall.name'),
|
||
type: 'input',
|
||
label: 'name',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: this.$t('overall.dc'),
|
||
type: 'dc',
|
||
label: 'dcIds',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: this.$t('overall.type'),
|
||
type: 'select',
|
||
label: 'promType',
|
||
readonly: true,
|
||
disabled: false
|
||
},
|
||
{
|
||
name: this.$t('overall.state'),
|
||
type: 'select',
|
||
label: 'promState',
|
||
readonly: true,
|
||
disabled: false
|
||
},
|
||
{
|
||
name: 'IP',
|
||
type: 'input',
|
||
label: 'host',
|
||
disabled: false
|
||
}
|
||
]
|
||
},
|
||
promServerType: null,
|
||
showAgentDownload: false,
|
||
token: '',
|
||
ipAddr: '',
|
||
allDc: [],
|
||
loadFinish: false,
|
||
osTypes: [
|
||
{
|
||
label: 'Centos',
|
||
name: 'centos'
|
||
}
|
||
// {
|
||
// label: 'Ubuntu',
|
||
// name: 'ubuntu'
|
||
// }
|
||
],
|
||
agentParam: {
|
||
osType: 'centos',
|
||
dc: '',
|
||
type: 1
|
||
},
|
||
wgetVisible: false,
|
||
curlVisible: false,
|
||
federationEnabled: !Number(
|
||
localStorage.getItem('nz-prometheus-federation-enabled')
|
||
),
|
||
downloadAgentFlag: false,
|
||
tableTitle: [
|
||
{
|
||
label: this.$t('config.system.basic.assetPingInterval'),
|
||
prop: 'asset_ping_interval'
|
||
},
|
||
{
|
||
label: this.$t('config.default_scrape_interval'),
|
||
prop: 'default_scrape_interval'
|
||
},
|
||
{
|
||
label: this.$t('config.metric_retention_days'),
|
||
prop: 'metrics_storage_retention'
|
||
},
|
||
{
|
||
label: this.$t('config.log_retention_days'),
|
||
prop: 'logs_storage_retention'
|
||
}
|
||
],
|
||
configurationData: [
|
||
{
|
||
asset_ping_interval: '',
|
||
default_scrape_interval: '',
|
||
metrics_storage_retention: '',
|
||
logs_storage_retention: ''
|
||
}
|
||
],
|
||
configurationObject: {},
|
||
configurationBox: false
|
||
}
|
||
},
|
||
methods: {
|
||
closeConfiguration (refresh) {
|
||
if (refresh) {
|
||
this.getConfiguration()
|
||
}
|
||
this.configurationBox = false
|
||
},
|
||
configurationEdit () {
|
||
this.$get('/sys/config/monitor').then(response => {
|
||
if (response.code === 200) {
|
||
this.configurationObject = response.data
|
||
if (response.data.interface_name) {
|
||
const arr = response.data.interface_name.split(',')
|
||
this.configurationObject.interface_name = arr.map(item => {
|
||
return { text: item }
|
||
})
|
||
}
|
||
this.configurationBox = true
|
||
}
|
||
})
|
||
},
|
||
getConfiguration () {
|
||
this.$get('/sys/config/monitor').then((response) => {
|
||
if (response.code == 200) {
|
||
if (response.data) {
|
||
this.$set(this.configurationData, 0, response.data)
|
||
localStorage.setItem('nz-prometheus-federation-enabled', response.data.prometheus_federation_enabled)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
toDownloadAgent: function () {
|
||
this.agentParam = {
|
||
osType: 'centos',
|
||
dc: '',
|
||
type: 1
|
||
}
|
||
this.getAllDc()
|
||
this.showAgentDownload = true
|
||
this.token = localStorage.getItem('nz-token')
|
||
axios.get('/healthy').then((response) => {
|
||
const url = response.request.responseURL
|
||
this.ipAddr = url.split('/healthy')[0]
|
||
})
|
||
},
|
||
closeDialog: function () {
|
||
this.showAgentDownload = false
|
||
},
|
||
getAllDc () {
|
||
this.$get('dc?pageSize=-1').then((response) => {
|
||
this.tools.loading = false
|
||
if (response.code === 200) {
|
||
this.allDc = response.data.list
|
||
if (this.allDc && this.allDc.length > 0) {
|
||
this.loadFinish = true
|
||
this.agentParam.dc = this.allDc[0].id
|
||
}
|
||
}
|
||
})
|
||
},
|
||
copyUrl (txt) {
|
||
this.$copyText(txt).then(() => {
|
||
this.$message.success({ message: this.$t('overall.copySuccess') })
|
||
})
|
||
},
|
||
popShow: function (where) {
|
||
const self = this
|
||
if (where == 'curl') {
|
||
const timeout = setTimeout(() => {
|
||
self.curlVisible = false
|
||
clearTimeout(timeout)
|
||
}, 1000)
|
||
} else {
|
||
const timeout = setTimeout(() => {
|
||
self.wgetVisible = false
|
||
clearTimeout(timeout)
|
||
}, 1000)
|
||
}
|
||
},
|
||
downloadAgent: function () {
|
||
this.downloadAgentFlag = true
|
||
axios
|
||
.get('agent/download?os=' + this.agentParam.osType, {
|
||
responseType: 'blob'
|
||
})
|
||
.then((data) => {
|
||
this.downloadAgentFlag = false
|
||
let fileName = 'confagent'
|
||
const disposition = data.headers['content-disposition']
|
||
if (disposition) {
|
||
fileName = disposition.split(';')[1].split('filename=')[1]
|
||
}
|
||
// 由于ie不支持download属性，故需要做兼容判断
|
||
if (navigator.appVersion.toString().indexOf('.NET') > 0) {
|
||
// ie独有的msSaveBlob属性，data.data为Blob文件流
|
||
window.navigator.msSaveBlob(data.data, fileName)
|
||
} else {
|
||
// 以下流程即为文章开始的下载流程
|
||
const url = window.URL.createObjectURL(data.data)
|
||
const link = document.createElement('a')
|
||
link.style.display = 'none'
|
||
link.href = url
|
||
link.download = fileName
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
window.URL.revokeObjectURL(link.href)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.downloadAgentFlag = false
|
||
})
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getConfiguration()
|
||
},
|
||
watch: {
|
||
$route: {
|
||
immediate: true,
|
||
handler () {
|
||
// 是否弹出侧滑
|
||
const add = this.$route.query.add
|
||
const download = this.$route.query.download
|
||
if (add) {
|
||
if (add === 'agent') {
|
||
this.add()
|
||
const newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝
|
||
delete newQuery.add
|
||
this.$router.replace({ query: newQuery })
|
||
}
|
||
}
|
||
if (download) {
|
||
this.toDownloadAgent()
|
||
const newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝
|
||
delete newQuery.download
|
||
this.$router.replace({ query: newQuery })
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|