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

feat：修复metric列表没数据bug；样式优化；

Browse Source
This commit is contained in:
陈劲松
2020-12-16 18:41:29 +08:00
committed by chenjinsong
parent 1561e3d7c0
commit 1018584b79
8 changed files with 179 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -288,14 +288,12 @@ li{
.nz-btn.nz-btn-style-normal-new { /* 新版橙色按钮 */
background: $btn-normal-background-color-new;
color: $btn-normal-txt-color-new;
//box-shadow: $btn-normal-shadow;
border: 0px;
border: 1px solid $btn-normal-background-color-new;
}
.nz-btn.nz-btn-style-error-new { /* 新版红色色按钮 */
background: $btn-error-background-color-new;
color: $btn-error-txt-color-new;
//box-shadow: $btn-normal-shadow;
border: 0px;
border: 1px solid $btn-error-background-color-new;
}
.nz-btn.nz-btn-style-light-new { /* 新版浅色按钮 */
background: #fff;
@@ -1271,16 +1269,16 @@ li{
margin-right: 15px
}
.dc-asset-state-in {
background-color: #90ee90;
background-color: $success-color;
}
.dc-asset-state-out {
background-color: orange;
}
.dc-asset-state-suspended {
background-color: rgba(255, 0, 0, 0.6);;
background-color: $danger-color;
}
.dc-asset-state-P1 {
background-color: rgba(255, 0, 0, 0.6);
background-color: $danger-color;
}
.chart-box-dropdown {
width: 519px;

3
nezha-fronted/src/components/common/header.vue
View File

@@ -460,8 +460,9 @@
logout() {
this.$get('logout').then(() => {
this.logoutSuccess();
document.location.href = "/";
});
document.location.reload();
//this.jumpTo('/login');
},
refreshLang() {

45
nezha-fronted/src/components/common/project/addLine.vue
View File

@@ -311,6 +311,10 @@
},
data(){
return{
metricList: [], // metric列表
metricCascaderList:[],//metric级联列表
metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
metricOptions: [],
form:{
arrows:'0',
label:'',
@@ -354,6 +358,7 @@
},
mounted(){
// this.addExpression();
this.queryMetrics();
if( this.lineData.expressions){
this.lineData.expressions.forEach((item,index)=>{
this.$refs['promql-'+(index)][0].metricChange(this.expressions[index]);
@@ -361,6 +366,46 @@
}
},
methods:{
getMetricOptions() {
return this.metricOptions;
},
queryMetrics() {
this.metricOptions = [];
this.$get('prom/api/v1/label/__name__/values').then(response=>{
if(response.status == 'success'){
let metrics=response.data.sort();
let metricMap=new Map();
metrics.forEach((item)=>{
let key='';
if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
key=item.split('_')[0];
}else if(/^_\w*/.test(item)){
key=' ';
}else{
key=item;
}
if(metricMap.get(key)){
let values=metricMap.get(key);
values.push({label:item,value:item});
}else{
let values=[{label:item,value:item}];
metricMap.set(key,values);
}
//this.metricStore.push({label:item,value:item,insertText:item})
});
for(let key of metricMap.keys()){
let option={
label:key,
value:key,
};
if(metricMap.get(key) && metricMap.get(key).length>1){
option.children=metricMap.get(key);
}
this.metricOptions.push(option);
}
}
})
},
onSubmit(){
this.$refs['form'].validate((valid) => {
if (valid) {

127
nezha-fronted/src/components/common/project/addNode.vue
View File

@@ -34,9 +34,9 @@
</el-form-item>
<el-form-item label="Icon" prop="iconId" class="icon">
<el-select v-model="form.iconId" placeholder="" popper-class="asset-dropdown" size="small" :loading="imgageLoading">
<el-select :loading="imgageLoading" class="icon-select" placeholder="" popper-class="asset-dropdown" size="small" v-model="form.iconId">
<div slot="prefix" class="sel-image">
<img v-if="form.iconId" :src="selImage.image" style="height: 24px;margin-top: 2px"/>
<img :src="selImage.image" style="height: 24px; width: auto; max-width: 48px; margin-top: 2px" v-if="form.iconId"/>
<span v-if="form.iconId" class="sel-image-name">{{selImage.imageName}}</span>
</div>
<el-option
@@ -44,10 +44,10 @@
:key="item.id"
:label="item.label"
:value="item.id">
<span style="float: left;width: 50%">
<img :src="item.image" style="height: 28px;margin-top: 2px"/>
<span style="float: left; width: 55px;">
<img :src="item.image" style="height: 28px; width: auto; max-width: 48px; margin-top: 2px"/>
</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.imageName }}</span>
<span style="color: #8492a6; font-size: 13px">{{ item.imageName }}</span>
</el-option>
</el-select>
<el-upload
@@ -65,9 +65,9 @@
<span>{{$t('alert.config.expr')}}</span>
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<el-row class="element-item expr form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px"><i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></span>
<el-form-item :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
<el-row :key="'ele' + index" class="element-item expr form-row-item" v-for="index of promqlKeys.length">
<span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px; margin-left: 8px;"><i @click="removeExpression(index-1)" class="nz-icon nz-icon-minus"></i></span>
<el-form-item :prop="'name.' + (index-1)" :rules="{required: true,message: '名称不能为空', trigger: 'blur'}">
<el-row>
<template>
<el-col class="expr-title" style="">
@@ -223,9 +223,15 @@
],
},
iconArray:[],
metricList: [], // metric列表
metricCascaderList:[],//metric级联列表
metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
metricOptions: [],
}
},
mounted(){
this.getSuggestMetric();
this.queryMetrics();
// this.addExpression();
this.addNodeInit();
if( this.nodeData.expressions){
@@ -235,6 +241,43 @@
}
},
methods:{
queryMetrics() {
this.metricOptions = [];
this.$get('prom/api/v1/label/__name__/values').then(response=>{
if(response.status == 'success'){
let metrics=response.data.sort();
let metricMap=new Map();
metrics.forEach((item)=>{
let key='';
if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
key=item.split('_')[0];
}else if(/^_\w*/.test(item)){
key=' ';
}else{
key=item;
}
if(metricMap.get(key)){
let values=metricMap.get(key);
values.push({label:item,value:item});
}else{
let values=[{label:item,value:item}];
metricMap.set(key,values);
}
//this.metricStore.push({label:item,value:item,insertText:item})
});
for(let key of metricMap.keys()){
let option={
label:key,
value:key,
};
if(metricMap.get(key) && metricMap.get(key).length>1){
option.children=metricMap.get(key);
}
this.metricOptions.push(option);
}
}
})
},
addNodeInit(selImageId){
this.$get('/project/topo/icon').then(res=>{
this.imgageLoading=true;
@@ -299,6 +342,63 @@
},
expressionChange: function () {
},
// 获取metric列表
getSuggestMetric() {
//this.$get('/prom/api/v1/label/__name__/values').then(response => {
this.$get('/module?pageSize=-1').then(response => {
if (response.code === 200) {
this.metricList = response.data.list;
const cascaderMap = new Map();
this.metricList.forEach((item,index) => {
let projectName = item.project.name;
let moduleName = item.name;
const childOption = {
value: moduleName,
label: moduleName,
children:[],
};
if(cascaderMap.has(projectName)){
cascaderMap.get(projectName).push(childOption);
}else {
let childArr = [];
childArr.push(childOption);
cascaderMap.set(projectName,childArr);
}
//缓存全局数据
const moduleItem = {
name:moduleName,
metricMap:new Map()
};
if(this.metricAllData.has(projectName)){
let moduleGroup = this.metricAllData.get(projectName);
this.metricAllData.get(projectName).push(moduleItem);
}else {
let moduleList = [];
moduleList.push(moduleItem);
this.metricAllData.set(projectName,moduleList);
}
});
let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){
const option = {
value: index+"_par",
label: index,
children:value,
};
metricCascaderArr.push(option);
});
this.metricCascaderList = metricCascaderArr;
}else {
this.metricList = [];
this.metricCascaderList = [];
}
})
},
getMetricOptions() {
return this.metricOptions;
},
addExpression() {
this.expressions.push('');
@@ -398,8 +498,13 @@
}
</script>
<style>
.icon-select>.el-input {
border-radius: 4px;
}
</style>
<style scoped>
.mc{
position: fixed;
width: 100vw;
@@ -624,9 +729,9 @@
}
/*metric样式--begin*/
.element-item {
padding: 20px 0;
padding: 20px;
border-bottom: 1px dashed #dfe7f2;
width: 100%;
width: 700px;
}
/*metric样式--end*/
.label-center{

2
nezha-fronted/src/components/common/project/topology.vue
View File

@@ -1216,7 +1216,7 @@
}
.edit-topology{
color: #1a1a1a;
font-size: 18px;
font-size: 14px;
/*font-weight: bold;*/
height: 28px;
position: absolute;

2
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -749,6 +749,6 @@
width: 14px;
}
.walk-close {
margin-left: -6px;
font-size: 12px;
}
</style>

4
nezha-fronted/src/components/page/config/mibBrowser.vue
View File

@@ -726,6 +726,7 @@
font-size: 14px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
.mib-browser-detail {
height: 31%;
@@ -758,8 +759,9 @@
position: absolute;
left: calc(25% + 2px);
width: calc(75% - 20px);
min-height: 100%;
height: 100%;
padding-right: 12px;
overflow: auto;
}
/*第一列宽25%*/
.mib-browser-detail-row>div:first-of-type {

12
nezha-fronted/src/components/page/config/system.vue
View File

@@ -39,7 +39,7 @@
</el-select>
</el-form-item>
<el-form-item>
<button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="resetForm('basicForm','basic')" style="top:2px">{{$t('overall.reset')}}</button>
<button @click="resetForm('basicForm','basic')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button>
<button @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_basic_save'">{{$t('overall.submit')}}</button>
</el-form-item>
</el-form>
@@ -85,8 +85,8 @@
</el-row>
</el-form-item>
<el-form-item>
<button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="resetForm('emailForm','email')" style="top:2px">{{$t('overall.reset')}}</button>
<button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" :class="{'nz-btn-disabled':email.email_enable == 'off'}" :disabled="email.email_enable == 'off'" @click="testSetInfo('email','emailForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</button>
<button @click="resetForm('emailForm','email')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button>
<button :class="{'nz-btn-disabled':email.email_enable == 'off'}" :disabled="email.email_enable == 'off'" @click="testSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('config.system.email.testConnection')}}</button>
<button @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_email_save'">{{$t('overall.submit')}}</button>
</el-form-item>
</el-form>
@@ -129,8 +129,8 @@
<el-input v-model="ldap.ldap_mapping"></el-input>
</el-form-item>
<el-form-item>
<button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="resetForm('ldapForm','ldap')" style="top:2px">{{$t('overall.reset')}}</button>
<button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="testSetInfo('ldap','ldapForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</button>
<button @click="resetForm('ldapForm','ldap')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button>
<button @click="testSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('config.system.email.testConnection')}}</button>
<button @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_ldap_save'">{{$t('overall.submit')}}</button>
</el-form-item>
</el-form>
@@ -325,7 +325,7 @@
</div>
</el-form-item>
<el-form-item>
<button @click="resetSys()" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" style="top:2px" type="button" v-has="'system_reset_reset'">{{$t('overall.reset')}}</button>
<button @click="resetSys()" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_reset_reset'">{{$t('overall.reset')}}</button>
</el-form-item>
</el-form>
</div>