gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:完善agent download

Browse Source
This commit is contained in:
wangwenrui
2021-04-09 13:01:10 +08:00
parent 617c2e232e
commit 1eeb2ef600
8 changed files with 219 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
nezha-fronted/src/components/common/language/cn.js
View File

@@ -487,7 +487,8 @@ const cn = {
noImportFile: '没有可导入的文件',
noAccess: '无访问权限',
confirmDuplicate: '确认复制吗？',
confirmCancel: '您所做的修改将不会被保存？'
confirmCancel: '您所做的修改将不会被保存？',
copySuccess: '复制成功'
},
asset: {
asset: '资产',
@@ -705,7 +706,14 @@ const cn = {
editProm: '修改Prometheus服务',
type: '类别',
checkTime: '检查时间',
dataCenter: '数据中心'
dataCenter: '数据中心',
agent: {
title: '下载Agent',
download: '下载',
osType: 'OS 类型',
autoScript: '自动安装脚本',
type: 'Agent类型'
}
},
terminallog: {
terminallog: '终端日志',

19
nezha-fronted/src/components/common/language/en.js
View File

@@ -490,7 +490,8 @@ const en = {
noImportFile: 'No import file found',
noAccess: 'No access',
confirmDuplicate: 'Are you sure to duplicate this chart?',
confirmCancel: 'Changes you made are not saved?'
confirmCancel: 'Changes you made are not saved?',
copySuccess: 'Copy success'
},
asset: {
asset: 'Asset',
@@ -709,7 +710,14 @@ const en = {
editProm: 'Edit prometheus server', // "修改Prometheus Server"
type: 'Type', // "类别"
checkTime: 'Check time',
dataCenter: 'Data center'
dataCenter: 'Data center',
agent: {
title: 'Download agent',
download: 'Download',
osType: 'OS type',
autoScript: 'Auto install script',
type: 'Agent type'
}
},
dc: {
dc: 'Data center',
@@ -736,13 +744,6 @@ const en = {
longitude: 'Longitude',
latitude: 'Latitude',
lnglat: 'Coordinate',
agent:{
title:"Download agent",
download:"Download",
osType:"OS type",
autoScript:"Auto install script",
type:"Agent type"
}
},
model: {
model: 'Asset model',

2
nezha-fronted/src/components/common/mixin/table.js
View File

@@ -28,7 +28,7 @@ export default {
scrollbarWrap: null,
delFlag: false,
operationWidth: "165" // 操作列宽
operationWidth: '165' // 操作列宽
}
},
methods: {

41
nezha-fronted/src/components/common/rightBox/promServerBox.vue
View File

@@ -39,15 +39,25 @@
</el-form-item>
<!--type-->
<el-form-item :label="$t('config.promServer.type')" prop="type">
<el-cascader
id="prom-box-input-type"
style="width: 100%"
v-model="editPromServer.type"
placeholder=""
size="small"
:options="$CONSTANTS.promServer.theData"
:props="{ multiple: false, checkStrictly: false ,emitPath:false}"
clearable></el-cascader>
<!-- <el-cascader-->
<!-- id="prom-box-input-type"-->
<!-- style="width: 100%"-->
<!-- v-model="editPromServer.type"-->
<!-- placeholder=""-->
<!-- size="small"-->
<!-- :options="$CONSTANTS.promServer.theData"-->
<!-- :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
<!-- clearable></el-cascader>-->
<el-select placeholder="" v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" popper-class="config-dropdown" value-key="value" size="small">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in $CONSTANTS.promServer2.theData">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Token" prop="token">
<el-input class="right-box-row-with-btn" type="text" placeholder="" v-model="editPromServer.token" size="small" id="prom-box-input-token">
<i slot="suffix" class="nz-icon nz-icon-refresh" @click="refreshToken"></i>
</el-input>
</el-form-item>
</el-form>
</div>
@@ -96,6 +106,19 @@ export default {
}
},
methods: {
refreshToken: function () {
if(!this.editPromServer.token||this.editPromServer.token == ''){
this.$message.error("The token is empty")
return;
}
this.$post('agent/token/refresh' , this.editPromServer).then(response=>{
if(response.code == 200){
this.editPromServer.token = response.data.token;
}else{
this.$message.error(response.msg)
}
})
},
/* 关闭弹框 */
esc (refresh) {
this.$emit('close', refresh)

130
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -135,50 +135,7 @@
<traffic-setting-box v-if="rightBox.trafficSetting.show" ref="trafficBox" :dc="object" @close="closeTrafficBox"></traffic-setting-box>
</transition>
<span v-if="dcDataRefresh" style="display: none"></span>
<el-dialog :visible.sync="showAgentDownload" width="620px" append-to-body class="nz-dialog agent-dialog" @close="closeDialog" :title="$t('config.dc.agent.title')">
<div class="agent-box" v-if="showAgentDownload">
<el-form size="small" v-model="agentParam" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" style="width: 100%">
<div class="right-box-sub-title">{{$t('config.dc.agent.download')}}</div>
<div style="margin-bottom: 20px;width: 100%"></div>
<el-form-item :label="$t('config.dc.agent.osType')" prop="osType" class="half-form-item">
<el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.osType">
<el-option :key="item.name" :label="item.label" :value="item.name" v-for="item in osTypes">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<div class="right-box-sub-title">{{$t('config.dc.agent.autoScript')}}</div>
<div style="margin-bottom: 20px;width: 100%"></div>
<el-form-item :label="$t('config.dc.agent.dc')" prop="dc" class="half-form-item">
<el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.dc">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in allDc">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('config.dc.agent.type')" prop="type" class="half-form-item">
<el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.type">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in $CONSTANTS.promServer2.theData">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="download-url" v-if="loadFinish">
<el-scrollbar class="el-scrollbar-small" style="width: calc(100% - 40px); height: 100%;">
<pre><code id="download-url-curl">curl -o- -H "Authorization:{{token}}" http://{{ipAddr}}/agent/{{agentParam.dc}}/{{agentParam.type}}/install.sh | bash</code></pre>
</el-scrollbar>
<span @click="copyUrl('download-url-curl')" class="url-copy"><i class="nz-icon nz-icon-override"></i></span>
</div>
<div class="download-url" v-if="loadFinish">
<el-scrollbar class="el-scrollbar-small" style="width: calc(100% - 40px);height: 100%;">
<pre><code id="download-url-wget">wget -qO- --header="Authorization:{{token}}" http://{{ipAddr}}/agent/{{agentParam.dc}}/{{agentParam.type}}/install.sh | bash</code></pre>
</el-scrollbar>
<span @click="copyUrl('download-url-wget')" class="url-copy"><i class="nz-icon nz-icon-override"></i></span>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
@@ -272,24 +229,6 @@ export default {
},
tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
delFlag: false,
showAgentDownload:false,
token:'',
ipAddr:'',
allDc:[],
loadFinish :false,
osTypes:[{
label:"Centos",
name:"centos",
},
{
label:"Ubuntu",
name:"ubuntu"
}],
agentParam:{
osType:"Centos",
dc:"",
type:1,
},
userData: []
}
},
@@ -302,38 +241,6 @@ export default {
}
},
methods: {
toDownloadAgent:function(){
this.showAgentDownload = true;
this.token = sessionStorage.getItem('nz-token');
let reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
this.ipAddr = reg.exec(window.location.href)[0];
},
closeDialog:function(){
this.showAgentDownload = false;
},
getAllDc:function(){
this.$get('idc?pageSize=-1', ).then(response => {
console.log('load dc data....')
this.tools.loading = false
if (response.code === 200) {
this.allDc = response.data.list
console.log(this.allDc)
this.loadFinish = true;
this.agentParam.dc = this.allDc[0].id;
}
})
},
copyUrl:function(id){
let text = document.querySelector("#"+id).innerText;
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', text);
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
}
document.body.removeChild(input);
},
assetStatClassName (param) {
if (param.column.label == this.$t('config.dc.assets')) {
return 'asset-state'
@@ -443,41 +350,4 @@ export default {
/deep/ td .nz-icon-gear:before{
color: #606266;
}
.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;
}
.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;
white-space: nowrap;
background-color: #F6F8FA;;
color: #333;
}
.agent-box .download-url code {
color: #333;
}
</style>

166
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -13,6 +13,9 @@
type="button" @click="add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<button :title="$t('overall.createDatacenter')" @click="toDownloadAgent" type="button" id="load-agent" class="top-tool-btn margin-l-20">
<i class="nz-icon-download nz-icon"></i>
</button>
<delete-button id="promserver-list-batch-delete" v-has="'prom_delete'" :delete-objs="batchDeleteObjs" api="agent" @after="getTableData" @before="delFlag=true"></delete-button>
</template>
<template v-slot:default="slotProps">
@@ -92,6 +95,53 @@
<transition name="right-box">
<prom-server-box v-if="rightBox.show" :prom-server="object" @close="closeRightBox"></prom-server-box>
</transition>
<el-dialog :visible.sync="showAgentDownload" width="620px" append-to-body class="nz-dialog agent-dialog" @close="closeDialog" :title="$t('config.promServer.agent.title')">
<div class="agent-box" v-if="showAgentDownload">
<el-form size="small" v-model="agentParam" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" style="width: 100%">
<div class="right-box-sub-title">{{$t('config.promServer.agent.download')}}</div>
<div style="margin-bottom: 20px;width: 100%"></div>
<el-form-item :label="$t('config.promServer.agent.osType')" prop="osType" class="half-form-item">
<el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.osType">
<el-option :key="item.name" :label="item.label" :value="item.name" v-for="item in osTypes">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item class="half-form-item">
<button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" @click="downloadAgent">{{$t('config.promServer.agent.download')}}</button>
</el-form-item>
<div class="right-box-sub-title">{{$t('config.promServer.agent.autoScript')}}</div>
<div style="margin-bottom: 20px;width: 100%"></div>
<el-form-item :label="$t('config.dc.dc')" prop="dc" class="half-form-item">
<el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.dc">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in allDc">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('config.promServer.agent.type')" prop="type" class="half-form-item">
<el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.type">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in $CONSTANTS.promServer2.theData">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="download-url" v-if="loadFinish">
<el-scrollbar class="el-scrollbar-small" style="width: calc(100% - 40px); height: 100%;">
<pre><code id="download-url-curl">curl -o- -H "Authorization:{{token}}" http://{{ipAddr}}/agent/{{agentParam.dc}}/{{agentParam.type}}/install.sh | bash</code></pre>
</el-scrollbar>
<span @click="copyUrl('download-url-curl')" class="url-copy"><i class="nz-icon nz-icon-override"></i></span>
</div>
<div class="download-url" v-if="loadFinish">
<el-scrollbar class="el-scrollbar-small" style="width: calc(100% - 40px);height: 100%;">
<pre><code id="download-url-wget">wget -qO- --header="Authorization:{{token}}" http://{{ipAddr}}/agent/{{agentParam.dc}}/{{agentParam.type}}/install.sh | bash</code></pre>
</el-scrollbar>
<span @click="copyUrl('download-url-wget')" class="url-copy"><i class="nz-icon nz-icon-override"></i></span>
</div>
</div>
</el-dialog>
</div>
</template>
@@ -101,6 +151,7 @@ import promServerBox from '@/components/common/rightBox/promServerBox'
import { promServer } from '@/components/common/js/constants'
import nzDataList from '@/components/common/table/nzDataList'
import tableMixin from '@/components/common/mixin/table'
import axios from 'axios'
export default {
name: 'promServer',
components: {
@@ -186,10 +237,83 @@ export default {
disabled: false
}]
},
promServerType: null
promServerType: null,
showAgentDownload: false,
token: '',
ipAddr: '',
allDc: [],
loadFinish: false,
osTypes: [{
label: 'Centos',
name: 'centos'
},
{
label: 'Ubuntu',
name: 'ubuntu'
}],
agentParam: {
osType: 'centos',
dc: '',
type: 1
}
}
},
methods: {
toDownloadAgent: function () {
this.showAgentDownload = true
this.token = sessionStorage.getItem('nz-token')
const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
this.ipAddr = reg.exec(window.location.href)[0]
},
closeDialog: function () {
this.showAgentDownload = false
},
getAllDc: function () {
this.$get('idc?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: function (id) {
const text = document.querySelector('#' + id).innerText
const input = document.createElement('input')
document.body.appendChild(input)
input.setAttribute('value', text)
input.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
}
document.body.removeChild(input)
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.copySuccess') })
},
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)
}
})
},
getTableData () {
if (!this.hasButton('prom_view')) {
this.$message.error(this.$t('tip.noAccess'))
@@ -248,6 +372,46 @@ export default {
Promise.all([this.getDcData()]).then(response => {
this.getTableData()
})
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;
}
.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;
white-space: nowrap;
background-color: #F6F8FA;;
color: #333;
}
.agent-box .download-url code {
color: #333;
}
</style>

2
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -247,7 +247,6 @@
</el-cascader>
</el-form-item>
<el-form-item :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" prop="param.url" v-if="isUrl">
<el-input maxlength="1024" show-word-limit size="small" type="textarea" v-model="editChart.param.url" id="chart-box-url"></el-input>
</el-form-item>
@@ -270,7 +269,6 @@
<el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
</el-form-item>
<!--<el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
<el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
</el-form-item>-->

2
nezha-fronted/src/components/page/dashboard/explore/explore.vue
View File

@@ -583,7 +583,7 @@ export default {
panel: '',
sync: 0,
groupId: '',
remark: '',
remark: ''
}
this.expressions.forEach((exp) => {
chart.elements.push({ expression: exp, legend: '', type: 'expert', id: '' })