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

feat:confagent下载弹出框

Browse Source
This commit is contained in:
wangwenrui
2021-04-08 19:36:14 +08:00
parent 2c6ffb4b6d
commit f259ed2750
3 changed files with 162 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
nezha-fronted/src/components/common/js/constants.js
View File

@@ -87,7 +87,21 @@ export const promServer = {
]
}
export const promServer2 = {
theData: [
{
label: 'Global',
value: 1,
text: 'Global'
},
{
label: 'Per-datacenter',
value: 2,
text: 'Per-datacenter'
}
]
}
export const asset = {
pingData: [
{ value: 1, label: 'up' },

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

@@ -729,7 +729,14 @@ const en = {
state: 'State',
longitude: 'Longitude',
latitude: 'Latitude',
lnglat: 'Coordinate'
lnglat: 'Coordinate',
agent:{
title:"Download agent",
download:"Download",
osType:"OS type",
autoScript:"Auto install script",
type:"Agent type"
}
},
model: {
model: 'Asset model',

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

@@ -15,6 +15,9 @@
id="dc-add" class="top-tool-btn margin-l-20">
<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 :delete-objs="batchDeleteObjs" @before="delFlag=true" @after="getTableData" api="idc" v-has="'dc_delete'" id="dc-list-batch-delete"></delete-button>
<button id="account-column-setting" class="top-tool-btn margin-l-10"
type="button" @click="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
@@ -131,6 +134,50 @@
<traffic-setting-box @close="closeTrafficBox" :dc="dc" ref="trafficBox" v-if="rightBox.trafficSetting.show"></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>
@@ -254,7 +301,25 @@ export default {
searchLabel: {}, // 搜索参数
tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
scrollbarWrap: null,
delFlag: false
delFlag: false,
showAgentDownload:false,
token:'',
ipAddr:'',
allDc:[],
loadFinish :false,
osTypes:[{
label:"Centos",
name:"centos",
},
{
label:"Ubuntu",
name:"ubuntu"
}],
agentParam:{
osType:"Centos",
dc:"",
type:1,
}
}
},
computed: {
@@ -266,6 +331,38 @@ 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'
@@ -370,7 +467,7 @@ export default {
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete('idc?ids=' + u.id).then(response => {
this.$delete('dc?ids=' + u.id).then(response => {
if (response.code === 200) {
this.delFlag = true
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -383,7 +480,7 @@ export default {
})
},
statusChange (idc) {
this.$put('idc', idc).then(response => {
this.$put('dc', idc).then(response => {
if (response.code === 200) {
this.rightBox.show = false
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -417,7 +514,7 @@ export default {
},
getUserData () {
return new Promise(resolve => {
this.$get('sys/user/list', { pageSize: -1, pageNo: 1 }).then(response => {
this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
if (response.code === 200) {
this.userData = response.data.list
}
@@ -536,8 +633,9 @@ export default {
this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
: this.tableTitle
this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
// this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
this.getTableData()
this.getAllDc();
}
}
</script>
@@ -545,4 +643,41 @@ 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>