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

pref:endpoint panel 搜索框调整 & alert setting 页面优化

Browse Source 
1.endpoint pannel 搜索框调整
2.alerts settings 列表option 中操作位置调整+只显示图标
This commit is contained in:
wangwenrui
2020-02-14 18:07:21 +08:00
parent f74e388dab
commit 7980bf05bd
8 changed files with 133 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1084,3 +1084,16 @@ li{
color: $box-title-color;
font-weight: bold;
}
/*列表中状态字段 的小圆点*/
.active-icon{
margin-top:20px;
width:10px;
height:10px;
border-radius:50%;
}
.red {
background-color:#ff6347;
}
.green {
background-color:lightGreen;
}

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

@@ -165,7 +165,7 @@ const en = {
title:'New asset',//'新增资产'
sn:'SN',//SN
host:'Host',//'Host'
state:'Status',//'状态'
state:'State',//'状态'
selectTip:'Please select',//'请选择'
inStock: 'In stock',//'在库'
notInStock: 'Not in stock',//'出库'

13
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -67,14 +67,11 @@
</template>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i
class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="toEdit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i
class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i
class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
&nbsp;
<span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>

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

@@ -728,17 +728,5 @@
}
</style>
<style lang="scss">
.active-icon{
margin-top:20px;
width:10px;
height:10px;
border-radius:50%;
}
.red {
background-color:#ff6347;
}
.green {
background-color:lightGreen;
}
</style>

14
nezha-fronted/src/components/page/config/account.vue
View File

@@ -62,15 +62,11 @@
</template>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i
class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i
class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i
class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
&nbsp;
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<span v-else-if="item.prop == 'lang'">
{{scope.row[item.prop] == 'en' ? 'English' : ''}}

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

@@ -64,18 +64,20 @@
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
</span>
<span v-else-if="item.prop == 'status'">
{{scope.row[item.prop] == '1' ? $t('overall.available') : ''}}
{{scope.row[item.prop] == '0' ? $t('overall.unavailable') : ''}}
<el-popover placement="right" width="50" trigger="hover" :content="(scope.row[item.prop] == '1'?$t('overall.available'):$t('overall.unavailable'))+'['+(scope.row.checkTime&&scope.row.checkTime!=''?(new Date(scope.row.checkTime).getHours()+':'+new Date(scope.row.checkTime).getMinutes()):'null')+']'">
<div slot="reference" style="width: 20px">
<div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0'}"></div>
</div>
</el-popover>
<!-- {{scope.row[item.prop] == '1' ? $t('overall.available') : ''}}-->
<!-- {{scope.row[item.prop] == '0' ? $t('overall.unavailable') : ''}}-->
</span>
<div v-else-if="item.prop == 'option'" class="content-right-options">
<span @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i
class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="toEdit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i
class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i
class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
&nbsp;
<span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
@@ -260,7 +262,7 @@
}, {
label: this.$t('config.promServer.checkTime'),
prop: 'checkTime',
show: true
show: false
}, {
label: this.$t('config.account.option'),
prop: 'option',

84
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -23,6 +23,12 @@
</el-dropdown>
</div>
<div class="top-tool-right">
<div class="top-tool-search relative-position" >
<el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput" @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable >
<i slot="suffix" class="el-input__icon el-icon-search" @click="(queryFocus ?search():focusInput())"></i>
</el-input>
</div>
<div class="panel-calendar margin-r-20">
<div class="block">
<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
@@ -52,10 +58,10 @@
</button>
</el-popover>
</div>
<div class="top-tool-search">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>
</div>
<!-- 2020-02-14 使用普通搜索框-->
<!-- <div class="top-tool-search">-->
<!-- <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>-->
<!-- </div>-->
<button @click="toAddChart"
class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-82">
@@ -246,6 +252,7 @@
//removeModal: false, // 删除弹出
//deleteObj: {}, // 删除对象
//---图表相关参数--end
queryFocus:false, //搜索框是否获得焦点
}
},
components: {
@@ -492,22 +499,26 @@
this.pageObj.pageSize = val;
this.getTableData();
},
search: function (searchObj) {
this.searchLabel = {};
let containTitle = false;
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
if (item === 'name') {
this.filter.searchName = searchObj[item]; //此处就一个条件
containTitle = true;
}
}
}
if (!containTitle) {
this.filter.searchName = '';
}
this.filter.panelId = this.showPanel.id;
// search: function (searchObj) {
// this.searchLabel = {};
// let containTitle = false;
// for (let item in searchObj) {
// if (searchObj[item]) {
// this.$set(this.searchLabel, item, searchObj[item]);
// if (item === 'name') {
// this.filter.searchName = searchObj[item]; //此处就一个条件
// containTitle = true;
// }
// }
// }
// if (!containTitle) {
// this.filter.searchName = '';
// }
// this.filter.panelId = this.showPanel.id;
// this.getData(this.filter);
// },
search:function(){
this.filter.panelId=this.showPanel.id;
this.getData(this.filter);
},
// 滚动事件触发下拉加载
@@ -520,6 +531,26 @@
this.$refs.chartList.pageDataList(true, this.showPanel.id);
}
},
focusInput:function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
classVal=classVal.replace('query-input-inactive','');
document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
this.$refs.queryPanel.focus();
this.queryFocus=true;
},
blurInput:function(){
if(!this.filter.searchName || this.filter.searchName == ''){
setTimeout(function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
classVal='query-input-inactive '+classVal;
document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
this.queryFocus=true;
},100)
}
},
clearInput:function(){
this.$refs.queryPanel.focus();
}
},
created() {
this.getTableData();
@@ -744,5 +775,18 @@
padding-right: 0;
vertical-align: top;
}
/* 列表搜索框 样式重写*/
.relative-position{
position: relative;
}
.query-input-inactive{
left:213px;
width: 18%;
margin-top: 1px;
}
.query-input-inactive .el-input__inner{
height: 25px;
line-height: 25px;
}
</style>

39
nezha-fronted/src/components/page/project/project.vue
View File

@@ -158,9 +158,11 @@
</div>
<!--时间选择器-->
<div class="top-tool-right">
<div class="top-tool-search" >
<div class="top-tool-search relative-position" >
<!-- <metric-search :metrics="metricList" :labels="labelList" v-if="tableShow == 3" @expression-change="tableFilter"></metric-search>-->
<el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput" @blur="blurInput" v-model="queryExpression" suffix-icon="el-icon-search" size="mini" clearable :placeholder="$t('project.endpoint.promExpr')" ></el-input>
<el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput" @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable :placeholder="$t('project.endpoint.promExpr')" >
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput"></i>
</el-input>
</div>
<div class="margin-r-20 margin-t-m1">
<button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i class="el-icon-d-arrow-left"></i></button>
@@ -1185,27 +1187,29 @@
}
},
queryInputInitStyle:function(){
document.getElementById('elementQuery').parentElement.style.width='40px';
document.getElementById('elementQuery').parentElement.style.float='right';
},
focusInput:function(){
document.getElementById('elementQuery').parentElement.style='';
let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
classVal=classVal.replace('query-input-inactive','');
document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
this.$refs.elementQuery.focus();
},
blurInput:function(){
if(!this.queryExpression || this.queryExpression == ''){
setTimeout(this.queryInputInitStyle(),100)
setTimeout(function(){
let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
classVal='query-input-inactive '+classVal;
document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
},100)
}
},
clearInput:function(){
this.blurInput();
this.$refs.elementQuery.foucs();
}
},
created() {
this.currentProject = this.$store.state.currentProject;
this.getModuleList();
this.getMetricsTableData();
this.getSuggestMetric()
},
mounted() {
this.getPanelData();
@@ -1504,4 +1508,19 @@
line-height: 37px;
}
/* end--覆盖分页组件样式*/
/* 列表搜索框 样式重写*/
.relative-position{
position: relative;
}
.query-input-inactive{
left:213px;
width: 18%;
}
.query-input-inactive .el-input__inner{
height: 26px;
line-height: 26px;
}
</style>