perf:alertMessage label增加排序 & 部分国际化补充、更正

This commit is contained in:
wangwenrui
2020-07-22 19:04:30 +08:00
parent 942f84cefa
commit f42698fff1
7 changed files with 86 additions and 26 deletions

View File

@@ -100,11 +100,11 @@
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
</span>
<template v-else-if="item.prop == 'labels'">
<nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
:cursor-point="tagType(key) == 'info' ? false : true"
:key="key"
v-if="key != 'alertname' && key != 'severity'"
v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true"
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
</template>
<div v-else-if="item.prop == 'state'">
<span class="">
@@ -203,11 +203,11 @@
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
</span>
<template v-else-if="item.prop == 'labels'">
<nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
:cursor-point="tagType(key) == 'info' ? false : true"
:key="key"
v-if="key != 'alertname' && key != 'severity'"
v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true"
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
</template>
<div v-else-if="item.prop == 'state'">
<span class="">
@@ -503,6 +503,21 @@ export default {
startResize(e) {
let vm = this;
this.$chartResizeTool.start(vm, this.data, e);
},
labelsSort:function(obj){
let buildIn=['asset','endpoint','module','project','datacenter']
let labels=JSON.parse(JSON.stringify(obj));
let result=[];
for(let key of buildIn){
if(key in labels){
result.push({label:key,value:labels[key]})
delete labels[key]
}
}
Object.keys(labels).sort().forEach(key=>{
result.push({label:key,value:labels[key]})
})
return result;
},
labelsClassName(row) {
if (row.column.label == this.$t("alert.list.labels")) {

View File

@@ -92,11 +92,11 @@
<span v-else>-</span>
</div>-->
<template v-else-if="item.prop == 'labels'">
<nz-alert-tag :label="key" type="info" style="margin: 5px;"
<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
:cursor-point="false"
:key="key"
v-if="key != 'alertname' && key != 'severity'"
v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
<!--<el-tag v-if="key != 'alertname' && key != 'severity'"
:key="key"
type="info"
@@ -362,6 +362,15 @@
}
},
computed: {
tagType() {
return (key) => {
if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
return "normal";
} else {
return "info";
}
}
},
tagValue() {
return (key, value) => {
if (key == 'type') {
@@ -378,6 +387,21 @@
}
},
methods: {
labelsSort:function(obj){
let buildIn=['asset','endpoint','module','project','datacenter']
let labels=JSON.parse(JSON.stringify(obj));
let result=[];
for(let key of buildIn){
if(key in labels){
result.push({label:key,value:labels[key]})
delete labels[key]
}
}
Object.keys(labels).sort().forEach(key=>{
result.push({label:key,value:labels[key]})
})
return result;
},
elementsetShow(s, e) {
this.showElementSet = true;
this.$nextTick(() => {

View File

@@ -139,7 +139,7 @@ const cn = {
label: "表格"
},
stackArea: {
label: "面积图"
label: "堆叠区域图"
},
url: {
label: "URL",
@@ -703,7 +703,9 @@ const cn = {
systemName: "系统名称",
curUrl: "网站URL",
timezone: "时区",
defaultCabinetUsize: "机柜默认U位"
defaultCabinetUsize: "机柜默认U位",
second:'秒',
day:'天'
},
email: {
email: "邮件",
@@ -791,7 +793,8 @@ const cn = {
name: "名称",
receiver: "用户组",
expr: "表达式",
for: "For (s)",
for: "持续(秒)",
second:'秒',
link: "关联",
option: "操作",
alertConfig: "告警规则",

View File

@@ -710,7 +710,9 @@ const en = {
systemName:'System name',
curUrl:'Current site URL',
timezone:'Timezone',
defaultCabinetUsize:'Cabinet U Size'
defaultCabinetUsize:'Cabinet U Size',
second:'second',
day:'day'
},
email:{
email:'Email',
@@ -801,6 +803,7 @@ const en = {
receiver: 'Receiver',//"用户组"
expr: 'Expression',//"表达式"
for: "Duration (s)",//For (s)
second:'second',
link: 'Link',//'关联'
option: 'Operation',//"操作"
alertConfig: 'Alert rule',//"告警规则"

View File

@@ -65,7 +65,7 @@
<!--last-->
<el-form-item :label="$t('alert.config.for')" prop="last">
<el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model.number="alertRule.last" size="small">
<template slot="append">second</template>
<template slot="append">{{$t('alert.config.second')}}</template>
</el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
</el-form-item>

View File

@@ -107,11 +107,11 @@
</div>-->
<template v-else-if="item.prop == 'labels'">
<!-- <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;" @click="showTagDetail(scope.row, key)"-->
<nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
:cursor-point="tagType(key) == 'info' ? false : true"
:key="key"
v-if="key != 'alertname' && key != 'severity'"
v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true"
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
<!--<el-tag @click="showTagDetail(scope.row, key)"
:key="key"
:class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"
@@ -443,6 +443,21 @@
}
},
methods: {
labelsSort:function(obj){
let buildIn=['asset','endpoint','module','project','datacenter']
let labels=JSON.parse(JSON.stringify(obj));
let result=[];
for(let key of buildIn){
if(key in labels){
result.push({label:key,value:labels[key]})
delete labels[key]
}
}
Object.keys(labels).sort().forEach(key=>{
result.push({label:key,value:labels[key]})
})
return result;
},
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,

View File

@@ -53,10 +53,10 @@
<el-input v-model="basic.node_exporter_target_path"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="scrape_interval">
<el-input v-model.number="basic.scrape_interval" ></el-input><span class="nz-input-append">s</span>
<el-input v-model.number="basic.scrape_interval" ></el-input><span class="nz-input-append">{{$t('config.system.basic.second')}}</span>
</el-form-item>
<el-form-item :label="$t('config.system.basic.storageRetention')" prop="storage_local_retention">
<el-input v-model.number="basic.storage_local_retention" ></el-input><span class="nz-input-append">d</span>
<el-input v-model.number="basic.storage_local_retention" ></el-input><span class="nz-input-append">{{$t('config.system.basic.day')}}</span>
</el-form-item>
<el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
<!-- <el-input v-model.number="basic.timezone" ></el-input>-->