338 lines
12 KiB
Vue
338 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<nz-data-list
|
|||
|
|
ref="dataList"
|
|||
|
|
:api="url"
|
|||
|
|
:custom-table-title.sync="tools.customTableTitle"
|
|||
|
|
:from="fromRoute.agent"
|
|||
|
|
:layout="['searchInput', 'elementSet']"
|
|||
|
|
:search-msg="searchMsg">
|
|||
|
|
<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">
|
|||
|
|
<i class="nz-icon-download nz-icon"></i>
|
|||
|
|
</button>
|
|||
|
|
<delete-button 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"
|
|||
|
|
v-loading="slotProps.loading"
|
|||
|
|
:api="url"
|
|||
|
|
:custom-table-title="tools.customTableTitle"
|
|||
|
|
:height="mainTableHeight"
|
|||
|
|
:table-data="tableData"
|
|||
|
|
@del="del"
|
|||
|
|
@edit="edit"
|
|||
|
|
@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" :prom-server="object" @close="closeRightBox"></agent-box>
|
|||
|
|
</transition>
|
|||
|
|
<el-dialog :title="$t('config.agent.agent.title')" :visible.sync="showAgentDownload" append-to-body class="nz-dialog agent-dialog" width="620px" @close="closeDialog">
|
|||
|
|
<div v-if="showAgentDownload" 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('config.agent.agent.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" placeholder="">
|
|||
|
|
<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">
|
|||
|
|
<button class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" @click="downloadAgent">{{$t('config.agent.agent.download')}}</button>
|
|||
|
|
</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('config.dc.dc')" class="half-form-item" prop="dc">
|
|||
|
|
<el-select v-model="agentParam.dc" class="right-box-row-with-btn" placeholder="">
|
|||
|
|
<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" placeholder="">
|
|||
|
|
<el-option v-for="item in agent2.theData" :key="item.value" :label="item.label" :value="item.value">
|
|||
|
|
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<div v-if="loadFinish" class="download-url">
|
|||
|
|
<el-input id="download-url-curl" v-model="curlUrl" :disabled="true">
|
|||
|
|
<el-popover slot="suffix" v-model="curlVisible" :content="$t('tip.copySuccess')" placement="top" popper-class="small-pop" trigger="manual" @after-enter="popShow('curl')">
|
|||
|
|
<i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-curl')"></i>
|
|||
|
|
</el-popover>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="loadFinish" class="download-url">
|
|||
|
|
<el-input id="download-url-wget" v-model="wgetUrl" :disabled="true">
|
|||
|
|
<el-popover slot="suffix" v-model="wgetVisible" :content="$t('tip.copySuccess')" placement="top" popper-class="small-pop" trigger="manual" @after-enter="popShow('wget')">
|
|||
|
|
<i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-wget')"></i>
|
|||
|
|
</el-popover>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import deleteButton from '@/components/common/deleteButton'
|
|||
|
|
import agentBox from '@/components/common/rightBox/agentBox'
|
|||
|
|
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
|
|||
|
|
},
|
|||
|
|
mixins: [dataListMixin],
|
|||
|
|
computed: {
|
|||
|
|
wgetUrl () {
|
|||
|
|
return 'wget -qO- --header="Authorization:'+this.token+'" '+ this.ipAddr+'/agent/'+this.agentParam.dc+'/'+this.agentParam.type+'/install.sh | bash'
|
|||
|
|
},
|
|||
|
|
curlUrl () {
|
|||
|
|
return 'curl -o- -H "Authorization:'+this.token+'" '+ this.ipAddr+'/agent/'+this.agentParam.dc+'/'+this.agentParam.type+'/install.sh | bash'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
url: 'agent',
|
|||
|
|
tableId: 'promTable', // 需要分页的table的id，用于记录每页数量
|
|||
|
|
blankObject: {
|
|||
|
|
id: '',
|
|||
|
|
host: '',
|
|||
|
|
port: 9090,
|
|||
|
|
dc: { id: '', name: '', location: '' }
|
|||
|
|
},
|
|||
|
|
agent: agent,
|
|||
|
|
agent2: agent2,
|
|||
|
|
dcData: [],
|
|||
|
|
searchMsg: { // 给搜索框子组件传递的信息
|
|||
|
|
zheze_none: true,
|
|||
|
|
searchLabelList: [{
|
|||
|
|
id: 1,
|
|||
|
|
name: 'ID',
|
|||
|
|
type: 'input',
|
|||
|
|
label: 'id',
|
|||
|
|
disabled: false
|
|||
|
|
}, {
|
|||
|
|
id: 5,
|
|||
|
|
name: this.$t('config.agent.dataCenter'),
|
|||
|
|
type: 'dc',
|
|||
|
|
label: 'dc',
|
|||
|
|
disabled: false
|
|||
|
|
}, {
|
|||
|
|
id: 6,
|
|||
|
|
name: this.$t('config.agent.type'),
|
|||
|
|
type: 'select',
|
|||
|
|
label: 'promType',
|
|||
|
|
disabled: false
|
|||
|
|
}, {
|
|||
|
|
id: 8,
|
|||
|
|
name: this.$t('project.endpoint.host'),
|
|||
|
|
type: 'input',
|
|||
|
|
label: 'host',
|
|||
|
|
disabled: false
|
|||
|
|
}, {
|
|||
|
|
id: 9,
|
|||
|
|
name: this.$t('project.endpoint.port'),
|
|||
|
|
type: 'input',
|
|||
|
|
label: 'port',
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
toDownloadAgent: function () {
|
|||
|
|
this.showAgentDownload = true
|
|||
|
|
this.token = sessionStorage.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
|
|||
|
|
this.loadFinish = true
|
|||
|
|
this.agentParam.dc = this.allDc[0].id
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
copyUrl (id) {
|
|||
|
|
const input = document.createElement('input')
|
|||
|
|
const text = document.getElementById(id).value
|
|||
|
|
document.body.appendChild(input)
|
|||
|
|
input.setAttribute('value', text)
|
|||
|
|
input.select()
|
|||
|
|
if (document.execCommand('copy')) {
|
|||
|
|
document.execCommand('copy')
|
|||
|
|
}
|
|||
|
|
document.body.removeChild(input)
|
|||
|
|
|
|||
|
|
if(id.indexOf('curl') != -1){
|
|||
|
|
this.curlVisible = true
|
|||
|
|
// let timeout = setTimeout(()=>{
|
|||
|
|
// this.curlVisible = false;
|
|||
|
|
// clearTimeout(timeout)
|
|||
|
|
// },1000)
|
|||
|
|
}else{
|
|||
|
|
this.wgetVisible = true
|
|||
|
|
// let timeout = setTimeout(()=>{
|
|||
|
|
// this.wgetVisible = false;
|
|||
|
|
// clearTimeout(timeout)
|
|||
|
|
// },1000)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
popShow:function(where){
|
|||
|
|
const self = this
|
|||
|
|
if(where == 'curl'){
|
|||
|
|
let timeout = setTimeout(()=>{
|
|||
|
|
self.curlVisible = false;
|
|||
|
|
clearTimeout(timeout)
|
|||
|
|
},1000)
|
|||
|
|
}else{
|
|||
|
|
let timeout = setTimeout(()=>{
|
|||
|
|
self.wgetVisible = false;
|
|||
|
|
clearTimeout(timeout)
|
|||
|
|
},1000)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
downloadAgent: function () {
|
|||
|
|
axios.get('agent/download?os=' + this.agentParam.osType, { responseType: 'blob' }).then(data => {
|
|||
|
|
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)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
this.getAllDc()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
.agent-dialog .agent-box{
|
|||
|
|
padding:10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-box >.right-box-form>.el-form-item.half-form-item{
|
|||
|
|
width: 220px;
|
|||
|
|
}
|
|||
|
|
.agent-box >.right-box-form>.el-form-item.half-form-item:nth-child(odd){
|
|||
|
|
width: 220px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-box .download-url{
|
|||
|
|
height: 40px;
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.agent-box .download-url .url-copy{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
top: 5px;
|
|||
|
|
}
|
|||
|
|
.agent-box .download-url .url-copy i{
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
.agent-box .download-url pre code {
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 0;
|
|||
|
|
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
|||
|
|
line-height: 40px;
|
|||
|
|
padding: 5px 20px 5px 5px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
background-color: #F6F8FA;;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-box .download-url code {
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
<style>
|
|||
|
|
.download-url > .el-input.is-disabled .el-input__inner{
|
|||
|
|
background-color: #F6F8FA;;
|
|||
|
|
border-color: #E4E7ED;
|
|||
|
|
color: #333;
|
|||
|
|
cursor: text;
|
|||
|
|
}
|
|||
|
|
.download-url .el-input__suffix {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 8px;
|
|||
|
|
-webkit-transition: all .3s;
|
|||
|
|
height: 100%;
|
|||
|
|
color: #333;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
</style>
|