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

temp: alert-rule临时提交，周末完成

Browse Source
This commit is contained in:
chenjinsong
2020-06-05 19:31:14 +08:00
parent 12581425ee
commit 5beb5b60e2
6 changed files with 52 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -50,11 +50,12 @@
ghostClass:'chart-ghost',
chosenClass:'choose-class',
scroll:true,
filter: '.drag-disabled',
scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
animation:150,
handle:'.chartTitle',
handle:'.chartTitle'
}" >
<div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title">
<div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title" :class="{'drag-disabled': !draggable}">
<line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
:ref="'editChart'+item.id"
@on-refresh-data="refreshChart"
@@ -150,7 +151,8 @@
name: 'chartList',
props: {
isModel: {type: Boolean, default: false},
additionalInfo:{}
additionalInfo:{},
draggable: {type: Boolean, default: true}
},
components: {
chartAlertList,
@@ -319,19 +321,14 @@
let chartTitle = item.querySelector('.chartTitle');
chartTitle.style.background = '';
},
move (event, orgin) {
//console.log('move', event, orgin);
move(event, orgin) {
let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green fallback-class choose-class:purple
//console.log('move---class', dragClass);
//dragClass.style.opacity = 1;
//dragClass.style.pointerEvents = 'auto';//设置此属性，end事件里newIndex为 列表长度
let chartTitle = dragClass.querySelector('.chartTitle');
//console.log('move-title',chartTitle);
chartTitle.style.background = '#d8dce1';
},
choose(event ){
choose(event){
console.log('choose', event);
let chartTitle = event.item.querySelector('.chartTitle');
},
@@ -529,6 +526,7 @@
},
// 获取panel详情数据,获取panel下所有chart列表
getData(params) {
console.info(params)
//param 目前没有用
const param = {
panelId: params.panelId,

3
nezha-fronted/src/components/charts/chart.scss
View File

@@ -164,6 +164,9 @@
border: 1px solid #b7d0f7;
box-shadow: 1px 1px 1px #d3e1f8;
}
.drag-disabled .el-dropdown-link {
cursor: default !important;
}
.resize-box {
.pagination {
padding-top: 0;

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

@@ -39,7 +39,7 @@
</template>
<!-- model-panel/asset-detail/project-overview的panel-->
<panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
<panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
@changeTab="changeTab" :targetTab.sync="targetTab"></panel-tab>
</div>

2
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -6,7 +6,7 @@
<template v-if="from == 'asset'">{{obj.host}}</template>
<template v-if="from == 'alertRule'">{{obj.alertName}}</template>
</div><div
class="sub-list-tab" @click="changeTab(from == 'asset' ? 'panel' : 'detail')">{{$t("overall.detail")}}</div><div
class="sub-list-tab" @click="changeTab(from == 'asset' || from == 'alertRule' ? 'panel' : 'detail')">{{$t("overall.detail")}}</div><div
class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == 'asset'"
class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
</div>

67
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -6,22 +6,26 @@
<div class="sub-list-tab-title">
<template v-if="from == 'model'">{{obj.name}}</template>
<template v-else-if="from == 'asset'">{{obj.host}}</template>
<template v-else-if="from == 'alertRule'">{{obj.alertName}}</template>
</div><div class="sub-list-tab sub-list-tab-active" v-if="from == 'model'">{{$t("dashboard.panel.title")}}</div><template v-if="from == 'asset'"><div
class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div><div
class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
</template><template v-if="from == 'alertRule'"><div
class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div>
</template>
</div>
<div class="top-tool-right">
<div class="top-tool-search margin-r-20">
<div class="top-tool-search margin-r-20" v-if="from != 'alertRule'">
<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="focusInput" style="float: right"></i>
</el-input>
</div>
<div class="panel-calendar margin-r-20" v-if="from != 'model'">
<div class="panel-calendar margin-r-20" v-if="from == 'asset'">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange" style="height: 26px; margin-top: -1px;"></time-picker>
</div>
<div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20" style="height: 24px;" v-if="from != 'model'">
<div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20" style="height: 24px;" v-if="from == 'asset'">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
@@ -39,7 +43,7 @@
</button>
</el-popover>
</div>
<button @click="toAddChart" :title="$t('overall.createChart')"
<button @click="toAddChart" :title="$t('overall.createChart')" v-if="from != 'alertRule'"
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<i class="nz-icon-create-square nz-icon"></i>
</button>
@@ -95,7 +99,7 @@
<div class="table-list" id="tableList">
<el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
<div class="box-content">
<chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
<chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" :draggable="draggable"
ref="chartList" :is-model="from == 'model'" :additional-info="obj"></chart-list>
</div>
</el-scrollbar>
@@ -116,7 +120,8 @@
name: "panel",
props: {
from: String,
obj: Object
obj: Object,
draggable: {type: Boolean, default: true}
},
data() {
return {
@@ -316,31 +321,35 @@
/*时间条件查询--end*/
//公用操作
getTableData(linkId) {
this.$get('panel', {type: this.from, link: linkId}).then(response => {
if (response.code === 200) {
this.panelData = response.data.list;
if (this.panelData.length > 0) {
this.panelId = this.filter.panelId = this.panelData[0].id;
this.getData(this.filter);
}
}else {
if(response.msg){
console.error(response.msg);
this.$message.error(response.msg);
}else if(response.error){
console.error(response.error);
this.$message.error(response.error);
if (this.from == "alertRule") {
} else {
this.$get('panel', {type: this.from, link: linkId}).then(response => {
if (response.code === 200) {
this.panelData = response.data.list;
if (this.panelData.length > 0) {
this.panelId = this.filter.panelId = this.panelData[0].id;
this.getData(this.filter);
}
}else {
console.error(response);
this.$message.error(response);
if(response.msg){
console.error(response.msg);
this.$message.error(response.msg);
}else if(response.error){
console.error(response.error);
this.$message.error(response.error);
}else {
console.error(response);
this.$message.error(response);
}
}
}
}).catch((error) => {
if (error) {
console.error(error);
this.$message.error(error.toString());
}
});
}).catch((error) => {
if (error) {
console.error(error);
this.$message.error(error.toString());
}
});
}
},
//定期刷新
selectInterval(val) {

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

@@ -374,7 +374,7 @@
},
detail: function (u) {
this.alertRuleForMessage = Object.assign({}, u);
this.targetTab = "detail";
this.targetTab = "panel";
this.showSubList = true;
},
messageStyle(e) {