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

NZ-584 feat: overview调整

Browse Source
This commit is contained in:
chenjinsong
2021-04-28 17:48:50 +08:00
parent 6ba59a4e86
commit f91133cbb6
10 changed files with 1318 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
nezha-fronted/src/components/common/alert/alertLabel2.vue
View File

@@ -3,125 +3,117 @@
<div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">SN</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.sn:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Host</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.host:'--'}}</div>
<div class="alert-label-title">IP</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">State</div>
<div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Ping</div>
<div class="alert-label-value">
<div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
<span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':'--'}}</span>
<div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 1,'red-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 0}" class="active-icon"></div>
<span v-if="alertLabelData">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.rtt ? alertLabelData.pingInfo.rtt + 'ms':'--'}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Asset Type</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Vendor</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:'--'}}</div>
<div class="alert-label-title">Brand</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Model</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.model:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">PingLastReply</div>
<div class="alert-label-value">{{(alertLabelData&&alertLabelData.pingLastReply)?alertLabelData.pingLastReply:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? alertLabelData.pingInfo.lastUpdate : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Alert</div>
<div class="alert-label-value">
<span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
<span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">DC</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:'--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:'--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Administrator</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.principal:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div>
</div>
</div>
<div class="alert-label-info" v-if="type==='module'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.name:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Project</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div>
</div>
</div>
<div class="alert-label-info" v-if="type==='project'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.name:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
</div>
</div>
<div class="alert-label-info" v-if="type==='endpoint'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Project</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Module</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.module.name:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Labels</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.labels:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.labels ? alertLabelData.labels : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Host</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.host:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.host ? alertLabelData.host : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Port</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.port:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.port ? alertLabelData.port : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Path</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.path:'--'}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.path ? alertLabelData.path : '--'}}</div>
</div>
</div>
</div>
@@ -240,40 +232,40 @@ export default {
init () {
this.loading = true
if (this.type === 'asset') {
this.$get('/asset/info?id=' + this.id).then((res) => {
this.$get('asset/asset/' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data.Basic
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
}
})
}
if (this.type === 'project') {
this.$get('/project?id=' + this.id).then((res) => {
this.$get('monitor/project/' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data.list[0]
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
}
})
}
if (this.type === 'module') {
this.$get('/module?id=' + this.id).then((res) => {
this.$get('monitor/module/' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data.list[0]
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
}
})
}
if (this.type === 'endpoint') {
this.$get('/endpoint?id=' + this.id).then((res) => {
this.$get('monitor/endpoint/' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data.list[0]
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
}
@@ -392,13 +384,13 @@ export default {
word-break: break-all;
}
.danger{
background-color: #d64f40;
background-color: $--danger-color;
color: white;
padding: 2px 5px;
border-radius: 4px;
}
.success{
background-color: #50d050;
background-color: $--success-color;
color: white;
padding: 2px 5px;
border-radius: 4px;