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

NEZ-351 perf: 滑框重构完成(alertmsg预览还有小bug)

Browse Source
This commit is contained in:
chenjinsong
2020-07-30 18:37:04 +08:00
parent b2472d9f12
commit bcdc152d5d
19 changed files with 845 additions and 1179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -641,6 +641,7 @@ li{
.main-list {
height: 100%;
position: relative;
z-index: 0;
}
.main-list.main-list-with-sub {
height: 50%;

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

@@ -117,7 +117,7 @@
ps._ps_ && ps._ps_.update();
});
}
vm.$refs.panelTab.$refs.dashboardScrollbar.update();
vm.$refs.panelTab && vm.$refs.panelTab.$refs.dashboardScrollbar.update();
clearInterval(intervalFunc);
}
}, 500);

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

@@ -83,25 +83,12 @@
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
</span>
<!--<div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
@click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>
<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" :class="{'link': from == 'alertRule'}"
@click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
<span v-else>-</span>
</div>-->
<template v-else-if="item.prop == 'labels'">
<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
:cursor-point="false"
: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"
size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>-->
</template>
<div v-else-if="item.prop == 'state'">
<span class="">
@@ -137,9 +124,6 @@
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
<module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
<asset-box :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl" ref="assetEditUnit"></asset-box>
<element-set
v-if="showElementSet"
v-clickoutside="elementsetHide"
@@ -357,9 +341,6 @@
}
],
tableData: [],
viewProjectData: {id: '', name: '', remark: ''},
viewModuleData: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []},
viewAssetState: false,
}
},
computed: {
@@ -682,30 +663,6 @@
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getAlertList();
},
viewAlertType(type, typeObj) {
this.closeViews();
switch (type) {
case 1:
this.viewProjectData = JSON.parse(JSON.stringify(typeObj));
this.$refs.projectBox.show(true);
break;
case 2:
let tempObj = JSON.parse(typeObj.param)
this.$set(typeObj, 'paramObj', []);
for (let k in tempObj) {
typeObj.paramObj.push({key: k, value: tempObj[k]});
}
this.viewModuleData = JSON.parse(JSON.stringify(typeObj));
this.$refs.moduleBox.show(true);
break;
case 3:
this.viewAssetState = true;
this.$refs.assetEditUnit.getAssetData(typeObj);
this.$refs.assetEditUnit.tabView = true;
break;
}
},
labelsClassName(row) {
if (row.column.label == this.$t("alert.list.labels")) {
return "alert-message-list-labels";
@@ -720,12 +677,7 @@
}
})
},
closeViews: function () {
this.$refs.projectBox.show(false, false);
this.$refs.moduleBox.show(false, false);
this.viewAssetState = false;
},
search: function (searchObj) {
search(searchObj) {
this.searchLabel = {};
let orderBy='';
if(this.searchLabel.orderBy){
@@ -747,17 +699,6 @@
}
this.getAlertList();
},
closeSubList() {
this.$emit("closeSubList");
this.tableData = [];
},
//asset弹框控制
tabControl(data) {
if (data === 'close') {
this.viewAssetState = false
this.$refs['assetEditUnit'].tabView = false
}
},
//是否需要排序
sortableShow(prop){
switch(prop){

52
nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
View File

@@ -10,7 +10,7 @@
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
<button type="button" @click="toAddCabinet" :title="$t('overall.createCabinet')"
<button type="button" @click="add" :title="$t('overall.createCabinet')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
@@ -36,8 +36,8 @@
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.edit')" @click="editCabinet(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
<span :title="$t('overall.delete')" @click="delCabinet(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<template v-else-if="item.prop == 'assetStat'">
<el-popover
@@ -72,7 +72,9 @@
</template>
</el-table-column>
</el-table>
<cabinet-box :cur-cabinet="currentCabinet" :cur-idc="currentDc" ref="cabinetEditBox" @after="getCabinetList"></cabinet-box>
<transition name="right-box">
<cabinet-box v-if="rightBox.show" :cabinet="cabinet" :current-dc="currentDc" ref="cabinetEditBox" @close="closeRightBox"></cabinet-box>
</transition>
<button class="to-top" v-show="showTopBtn" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</span>
</template>
@@ -89,7 +91,8 @@
},
data() {
return {
currentCabinet: {
cabinet: {},
blankCabinet: {
id:'',
idcId:'',
name:'',
@@ -97,6 +100,7 @@
seq:'',
uSize:1
},
rightBox: {show: false},
showTopBtn: false, //top按钮是否显示
loading: false,
currentDc: {},
@@ -173,16 +177,24 @@
changeTab(tab) {
this.$emit('changeTab', tab);
},
toAddCabinet:function(){
this.$refs.cabinetEditBox.show(true,true);
this.$refs.cabinetEditBox.reset();
add() {
this.cabinet = this.newCabinet();
this.rightBox.show = true;
},
editCabinet(cabinet) {
this.currentCabinet = JSON.parse(JSON.stringify(cabinet));
console.info(this.$refs.cabinetEditBox)
this.$refs.cabinetEditBox.show(true, true);
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.getTableData();
}
},
getCabinetList() {
newCabinet() {
return JSON.parse(JSON.stringify(this.blankCabinet));
},
edit(cabinet) {
this.cabinet = JSON.parse(JSON.stringify(cabinet));
this.rightBox.show = true;
},
getTableData() {
this.tableData = [];
this.loading = true;
this.$set(this.searchLabel, "pageNo", 1);
@@ -194,18 +206,14 @@
}
});
},
search: function (searchObj) {
search(searchObj) {
this.searchLabel = {idcId: this.currentDc.id, pageNo: 1, pageSize: -1};
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getCabinetList();
},
closeSubList() {
this.$emit("closeSubList");
this.tableData = [];
this.getTableData();
},
assetStatClassName(param) {
if (param.column.label == this.$t("config.model.assets") || param.column.label == this.$t("alert.alert")) {
@@ -213,7 +221,7 @@
}
return "";
},
delCabinet:function(cabinet){
del:function(cabinet){
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
@@ -222,7 +230,7 @@
this.$delete('/cabinet?ids='+cabinet.id).then(response=>{
if(response.code == 200){
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getCabinetList();
this.getTableData();
}else{
this.$message.error(response.msg);
}
@@ -238,7 +246,7 @@
if (n) {
this.currentDc = JSON.parse(JSON.stringify(n));
this.searchLabel = {idcId: this.currentDc.id};
this.getCabinetList();
this.getTableData();
}
}
}

7
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -96,6 +96,7 @@
:title="$t('project.endpoint.dialogTitle')"
:visible.sync="graphShow"
width="90%"
:modal-append-to-body="false"
id="viewGraphDialog"
@close="dialogClose">
<div slot="title">
@@ -108,7 +109,7 @@
<chart ref="endpointChart" :unit="chartUnit"></chart>
</el-dialog>
<transition name="right-box">
<chart-box v-if="rightBox.show" @close="rightBox.show = false" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{}"></chart-box>
<chart-box v-if="rightBox.show" @close="rightBox.show = false" :chart="chart" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{}"></chart-box>
</transition>
</span>
</template>
@@ -137,6 +138,7 @@
data() {
let temp = this;
return {
chart: {},
tableShow: true,
tableHover: false,
dropdownShow: false,
@@ -168,7 +170,6 @@
saveChart() { //新增chart
this.rightBox.show = true;
this.$nextTick(() => {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
let chart = {
id:'',
title: '',
@@ -189,7 +190,7 @@
chart.elements.push({chartId: "", expression: this.selectedEndpoints[i].element, type: 'expert'});
}
}
this.$refs.addChartModal.editData(chart);
this.chart = chart;
});
},
dropdownHandler(show) {

12
nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
View File

@@ -242,13 +242,7 @@
this.$refs.addEndpointBox.show(true);
this.$refs.addEndpointBox.clearEndpoints();
},
search: function (searchObj) {
/*this.searchLabel = {idcId: this.currentDc.id, pageNo: 1, pageSize: -1};
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}*/
search(searchObj) {
let orderBy = '';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
@@ -265,10 +259,6 @@
}
this.getTableData();
},
closeSubList() {
this.tableData = [];
this.$emit("closeSubList");
},
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,

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

@@ -27,7 +27,7 @@
</el-input>
</div>
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" v-if="from=='asset'"></pick-time>
<button @click="toAddChart" :title="$t('overall.createChart')" v-if="from != 'alertRule' && from != 'endpoint'"
<button @click="addChart" :title="$t('overall.createChart')" v-if="from != 'alertRule' && from != 'endpoint'"
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<i class="nz-icon-create-square nz-icon"></i>
</button>
@@ -49,7 +49,7 @@
</div>
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
<button @click="toAddChart" :title="$t('overall.createChart')"
<button @click="addChart" :title="$t('overall.createChart')"
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<i class="nz-icon-create-square nz-icon"></i>
</button>
@@ -60,14 +60,14 @@
<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" :draggable="draggable" :detail="detail"
<chart-list @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" :draggable="draggable" :detail="detail"
ref="chartList" :is-model="from == 'model'" :additional-info="obj"></chart-list>
</div>
</el-scrollbar>
</div>
<button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
<transition name="right-box">
<chart-box @close="closeRightBox" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
<chart-box @close="closeRightBox" :chart="chart" v-if="rightBox.show" ref="addChartModal" :show-panel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
</transition>
</div>
</template>
@@ -92,7 +92,6 @@
visible: false,
rightBox: { //面板弹出框相关
show: false,
title: this.$t('dashboard.panel.createPanelTitle')
},
tableHover: false,
searchTime: [
@@ -121,17 +120,21 @@
id: '',
name: ''
},
chart: {
chart: {},
blankChart: {
id:'',
title: '',
type:'line',
span:12,
height: 400,
elements: {
id: '',
expression: '',
type: ''
}
height:'400',
unit:2,
param:{
url:'',
threshold:'',
},
elements:[],
panel: '',
sync: 0
},
pageObj: {
pageNo: 1,
@@ -161,7 +164,6 @@
type: this.from,
id: ''
},
panelId: 0,
//removeModal: false, // 删除弹出
//deleteObj: {}, // 删除对象
//---图表相关参数--end
@@ -182,15 +184,16 @@
const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
this.searchTime = [startTime, endTime];
},
panelReloadForDel: function () {
panelReloadForDel() {
this.getTableData(this.obj.id);
},
/*图表相关操作--start*/
toAddChart: function () {
addChart() {
this.chart = this.newChart();
this.rightBox.show = true;
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
//this.$refs.addChartModal.show(true);
this.$refs.addChartModal.createData(this.panelId); //初始化创建图表需要的初始数据
},
newChart() {
return JSON.parse(JSON.stringify(this.blankChart));
},
// 切换tab
changeTab(tab) {
@@ -223,21 +226,21 @@
}, 100);
},
// 编辑图表信息,打开编辑弹窗
editData(data) {
editChart(data) {
if (!data.param) {
data.param = {url: '', threshold: '',};
}
this.chart = JSON.parse(JSON.stringify(data));
this.rightBox.show = true;
this.$nextTick(() => {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
this.$refs.addChartModal.editData(data, this.panelId);
});
},
// 移除图表:弹出确认框询问
removeData(data,from) {
delChart(data,from) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("panel/" + this.panelId + "/charts?ids=" + data.id).then(response => {
this.$delete("panel/" + this.showPanel.id + "/charts?ids=" + data.id).then(response => {
if (response.code === 200) {
this.$message({
duration: 2000,
@@ -288,7 +291,7 @@
// this.searchTime = [...val];
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.filter.panelId = this.panelId;
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
},
/*时间条件查询--end*/
@@ -301,7 +304,7 @@
if (response.code === 200) {
this.panelData = response.data.list;
if (this.panelData.length > 0) {
this.panelId = this.filter.panelId = this.panelData[0].id;
this.showPanel.id = this.filter.panelId = this.panelData[0].id;
this.getData(this.filter);
}
}else {

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

@@ -64,7 +64,7 @@
<el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
<template v-else>
<el-menu-item :index="'3-' + index" v-for="(item, index) in assetData" :key="index">
<div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
<div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item)" :class="{'menu-item-active': activeIndex == 'asset' && activeItemIndex == item.id}">
<span class="too-long-split" style="width: 130px;">{{item.name}}</span>
</div>
</el-menu-item>
@@ -80,7 +80,7 @@
<el-menu-item v-if="projectData.length == 0" index="2-0"><div @click="createBox({type: 1})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createProject")}}</div></el-menu-item>
<template v-else>
<el-menu-item :index="'2-' + index" v-for="(item, index) in projectData" :key="index">
<div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" >
<div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active': activeIndex == 'project' && activeItemIndex == item.id}">
<span class="too-long-split" style="width: 135px;">{{item.name}}</span>
<div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i class="nz-icon nz-icon-edit"></i></div>
</div>
@@ -150,12 +150,21 @@
</el-submenu>
</el-menu>
<project-box v-if="rightBox.project.show" :project="editProject" ref="projectBox"></project-box>
<module-box v-if="rightBox.module.show" :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
<add-endpoint-box v-if="rightBox.endpoint.show" :currentProject="currentProject" :currentModule="currentModule" @reload=""
ref="addEndpointBox"></add-endpoint-box>
<asset-box v-if="rightBox.asset.show" :edit-unit-show='addUnitShow' @refreshData="refreshAsset" @sendStateData="closeAsset" ref="assetAddUnit"></asset-box>
<alert-config-box v-if="rightBox.alertRule.show" :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
<transition name="right-box">
<project-box v-if="rightBox.project.show" :project="editProject" ref="projectBox" @close="closeProjectRightBox"></project-box>
</transition>
<transition name="right-box">
<module-box v-if="rightBox.module.show" :currentProject="currentProject" :module="editModule" @close="closeModuleRightBox" ref="moduleBox"></module-box>
</transition>
<transition name="right-box">
<add-endpoint-box v-if="rightBox.endpoint.show" :currentProject="currentProject" :currentModule="currentModule" @close="closeEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
</transition>
<transition name="right-box">
<asset-box v-if="rightBox.asset.show" :asset="editAsset" @close="closeAssetRightBox" ref="assetAddUnit"></asset-box>
</transition>
<transition name="right-box">
<alert-config-box v-if="rightBox.alertRule.show" :alert-rule="editAlertRule" @close="closeAlertRuleRightBox" ref="alertConfigBox"></alert-config-box>
</transition>
<change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
</div>
</template>
@@ -170,6 +179,18 @@
},
data() {
return {
username: sessionStorage.getItem("nz-username"),
language: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en',
//顶部菜单相关
activeIndex: '',
activeItemIndex: '',
activeItemIndexes: [],
hoverItemIndex: '',
assetData: [], //顶部菜单asset的下拉内容
//add侧滑相关
rightBox: {
project: {show: false},
module: {show: false},
@@ -177,13 +198,6 @@
asset: {show: false},
alertRule: {show: false},
},
username: sessionStorage.getItem("nz-username"),
language: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en',
assetData: [],
activeIndex:'',
activeItemIndex:'',
activeItemIndexes: [],
hoverItemIndex: '',
projectData: [], //顶部菜单project列表中的数据
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
@@ -201,12 +215,28 @@
moduleId: '',
assetId: ''
},
alertRule: {
id: null,
editAsset: {
id: '',
sn: '',
host: '',
state: '',
purchaseDate: '',
idcId: '',
cabinetId: '',
modelId: '',
model: {type: {code: ""}},
assetType: '',
impi:{
host:'',
port:'',
},
tags: [],
accounts: [],
},
editAlertRule: {
id: "",
alertName: '',
type: '',
linkObject: {id: '', name: ''},
linkId: '',
expr: '',
last: '',
severity: '',
@@ -241,17 +271,6 @@
type: 5
},
],
addIdcData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
IDCOptionData: [],
addUnitShow: false,
assetBoxShow: false,
userDatas:[],
showChangePwd:false,
}
},
@@ -272,7 +291,11 @@
});
this.activeIndex = data;
},
getLinkData(){
this.$get('link').then(response=>{
this.$store.commit('setLinkData', response.data);
});
},
createBox(item) {
if (item.type == 1) {
this.rightBox.project.show = true;
@@ -305,82 +328,24 @@
context_name: ''
};
} else if (item.type == 3) {
this.$refs.addEndpointBox.show(true);
this.$refs.addEndpointBox.clearEndpoints();
} else if (item.type == 5) {
this.$refs.alertConfigBox.show(true, true);
this.rightBox.endpoint.show = true;
} else if (item.type == 4) {
this.assetBoxShow = true;
this.$nextTick(() => {
this.addUnitShow = true;
this.$refs.assetAddUnit.resetAsset();
});
this.rightBox.asset.show = true;
} else if (item.type == 5) {
this.rightBox.alertRule.show = true;
}
},
jumpToAsset(id) {
let index = this.indOf(this.activeItemIndexes, id);
this.activeItemIndexes=[];//2020-02-25 修改为单选
this.activeItemIndexes.push(id);
this.$store.state.assetData = {selectedData: this.activeItemIndexes, step: this.$store.state.assetData.step+1, type: 1};
jumpToAsset(asset) {
this.activeItemIndex = asset.id;
this.$store.commit('currentAssetChange', asset);
this.jumpTo('asset');
},
jumpToProject(p) {
this.currentProject = p;
this.$store.commit('setProject', p);
this.$store.commit('currentProjectChange', p);
this.activeItemIndex = p.id;
this.jumpTo('project');
},
getIDCOptionData(data) {
this.$get('idc?id=' + data).then(response => {
if (response.code === 200) {
this.addIdcData = response.data.list[0];
this.clickFlush(this.addIdcData)
}
})
},
editData(data, Id) {
let idcData = {
id: '',
name: '',
location: '',
principal: '',
tel: ''
}
if (data === 'idc') {
idcData.id = Id
idcData.name = this.addIdcData.name
idcData.location = this.addIdcData.location
idcData.principal = this.addIdcData.principal
idcData.tel = this.addIdcData.tel
}
this.$put(data, idcData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
duration: 2000
})
this.$store.state.flushDataSign = true
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
})
}
})
},
clickFlush(itemData) {
for (let i = 0; i < this.assetData.length; i++) {
const element = this.assetData[i];
if (element.id === itemData.id) {
setTimeout(() => {
element[element.name] = true;
}, 100)
} else {
element[element.name] = false
}
}
},
getAssetData() {
this.$get('idc', {pageSize:-1}).then(response => {
if (response.code == 200) {
@@ -398,11 +363,6 @@
window.location.reload();
}
},
closeAllPop:function(){
this.$refs.idcConfigBox.forEach((item)=>{
item.show(false)
})
},
getProjectList() {
this.$get('project', {pageSize:-1}).then(response => {
if (response.code == 200) {
@@ -418,38 +378,49 @@
if (!flag && this.projectData.length > 0) {
this.currentProject = this.projectData[0];
this.activeItemIndex = this.currentProject.id;
this.$store.commit('setProject', this.currentProject);
this.$store.commit('currentProjectChange', this.currentProject);
}
}
})
},
closeProjectRightBox(refresh) {
this.rightBox.project.show = false;
if (refresh) {
this.$store.commit("projectListChange");
}
},
closeModuleRightBox(refresh) {
this.rightBox.module.show = false;
if (refresh) {
this.$store.commit("moduleListChange");
}
},
closeEndpointRightBox(refresh) {
this.rightBox.endpoint.show = false;
if (refresh) {
this.$store.commit("endpointListChange");
}
},
closeAssetRightBox(refresh) {
this.rightBox.asset.show = false;
if (refresh) {
this.$store.commit("assetListChange");
}
},
closeAlertRuleRightBox(refresh) {
this.rightBox.alertRule.show = false;
if (refresh) {
this.$store.commit("alertConfigListChange");
}
},
toEditProject(p) {
this.editProject = Object.assign({}, p);
this.rightBox.project.show = true;
},
indOf(a, b) {
let c = [];
for (let i = 0; i < a.length; i++) {
c.push(a[i]);
}
return c.indexOf(b);
},
panelListReload(){
if(this.$route.path==='/panel'){
this.$store.commit('panelListChange',true);//新增panel之后,且当前页面为panel页面，则更新panel列表
}
},
logout() {
this.$get('logout');
this.jumpTo('login');
},
getUserData() {
this.$get('sys/user/list').then(response => {
if (response.code === 200) {
this.userDatas = response.data.list
}
})
},
refreshLang() {
this.language = localStorage.getItem("nz-language");
this.$i18n.locale = this.language;
@@ -457,30 +428,18 @@
window.location.reload();
});
},
showPwdDialog:function(){
showPwdDialog() {
this.showChangePwd = true;
},
dialogClosed:function(){
dialogClosed() {
this.showChangePwd = false;
},
cancel: function() {
cancel() {
this.activeIndex = this.$route.path.slice(1, this.$route.path.length);
console.info(this.activeIndex)
//this.$router.go(-1);
},
getLinkData(){
//console.log('aaa');
this.$get('link').then(response=>{
//console.log(response);
// this.linkData=response.data;
this.$store.commit('setLinkData',response.data);
//console.log(this.$store)
});
},
},
mounted() {
this.$i18n.locale = this.language;
this.getUserData();
this.getAssetData();
this.getProjectList();
this.getLinkData();
@@ -499,47 +458,37 @@
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.cancel, false);
};
}
},
computed: {
projectListReloadWatch() {
projectListChange() {
return this.$store.state.projectListChange;
},
getIdcData() {
return this.$store.state.assetDcList;
dcListChange() {
return this.$store.state.dcListChange;
},
getAssetDcData() {
return this.$store.state.assetData;
},
currentProjectWatch(){
currentProjectChange(){
return this.$store.state.currentProject;
},
linkData(){
return this.$store.getters.getlinkData
return this.$store.getters.getLinkData;
}
},
watch: {
getAssetDcData: {
handler(newVal) {
if (newVal.type == 0) {
this.activeItemIndexes = newVal.selectedData;
}
},
deep: true,
immediate: true
},
getIdcData: {
handler(newVal, oldVal) {
this.getAssetData()
},
deep: true,
},
projectListReloadWatch(n, o) {
projectListChange(n) {
this.getProjectList();
},
currentProjectWatch(n,o){
this.currentProject=n;
dcListChange(n) {
console.info(n)
this.getAssetData();
},
currentProjectChange(n, o) {
if (n.id != this.currentProject.id) {
this.currentProject = this.projectData.find(p => {
return p.id == n.id;
});
this.activeItemIndex = n.id;
}
},
},
destroyed() {

16
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-alert-config" v-clickoutside="clickOutside" v-if="rightBox.show">
<div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="editAlertRule&&editAlertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -121,9 +121,6 @@
},
data() {
return {
rightBox:{
show:false
},
promqlCount: 1,
promqlKeys: [0],
expressions: [''],
@@ -217,16 +214,11 @@
}
},
methods: {
show:function(){
this.rightBox.show=true;
},
clickOutside() {
this.esc(false);
this.rightBox.show=false;
},
esc(refresh) {
this.$emit("close", refresh);
this.rightBox.show=false;
},
save() {
this.editAlertRule.expr = this.expressions[0];
@@ -287,10 +279,10 @@
watch: {
alertRule: {
deep: true,
immediate: true,
handler(n, o) {
console.info(n)
this.editAlertRule = JSON.parse(JSON.stringify(n));
if (this.editAlertRule&&this.editAlertRule.id) {
if (this.editAlertRule.id) {
this.expressions = [this.editAlertRule.expr];
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {

11
nezha-fronted/src/components/common/rightBox/assetBox.vue
View File

@@ -259,14 +259,23 @@
deep: true,
immediate: true,
handler(n) {
//console.info(n);
this.editAsset = JSON.parse(JSON.stringify(n));
if (!this.editAsset.accounts) {
this.$set(this.editAsset, "accounts", []);
} else {
this.editAsset.accounts.length > 0 && (this.accountType = this.editAsset.accounts[0].protocol);
}
console.info(n)
this.$set(this.editAsset, "modelId", n.model.id);
let initLocationData={
idc: n.idc,
cabinet: n.cabinet,
u: [n.cabinetStart, n.cabinetEnd]
};
this.$nextTick(() => {
this.$refs.locationCascader.initComponet(initLocationData);
this.getVendorAndModelOptionData(n.model.type.code);
});
}
},
'editAsset.accounts': {

145
nezha-fronted/src/components/common/rightBox/cabinetBox.vue
View File

@@ -1,41 +1,32 @@
<template>
<transition name="right-box">
<div class="right-box right-box-cabinet" v-if="rightBox.show" v-clickoutside="esc">
<div class="right-box right-box-cabinet" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="cab-del" type="button" v-if="curCabinet.id != '' && rightBox.isEdit" @click="delCabinet" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<button id="cab-del" type="button" v-if="!editCabinet.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button v-if="!rightBox.isEdit" id="cab-save" type="button" @click="" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<div class="right-box-title">{{editCabinet.id ? $t("asset.editCabinet") + " ID: " + editCabinet.id : $t("overall.createCabinet")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" label-width="120px" label-position="right" :model="cabinet" ref="cabinetForm" :rules="rules">
<el-form-item :label="$t('asset.name')" prop="name">
<el-input size='mini' v-model="cabinet.name" v-if="rightBox.isEdit"/>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.name}}</div>
<el-form class="right-box-form right-box-form-left" label-width="120px" label-position="right" :model="editCabinet" ref="cabinetForm" :rules="rules">
<el-form-item :label="$t('overall.name')" prop="name">
<el-input size='mini' v-model="editCabinet.name"/>
</el-form-item>
<el-form-item :label="$t('asset.DC')" prop="idcId">
<el-input size='mini' v-model="curIdc.name" v-if="rightBox.isEdit" disabled/>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{idc?idc.name:''}}</div>
<el-form-item :label="$t('config.dc.dc')" prop="idcId">
<el-input size='mini' v-model="currentDc.name" disabled/>
</el-form-item>
<el-form-item :label="$t('asset.uSize')" prop="uSize">
<el-input v-model.number="cabinet.uSize" :max="47" ></el-input>
<!-- <el-slider v-model.number="cabinet.uSize" :max="47" v-if="rightBox.isEdit"></el-slider>-->
<el-input v-model.number="editCabinet.uSize" :max="47" ></el-input>
</el-form-item>
<el-form-item :label="$t('config.dc.remark')">
<el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="rightBox.isEdit"/>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.remark}}</div>
<el-input size='mini' v-model="editCabinet.remark" type="textarea" :rows="2"/>
</el-form-item>
</el-form>
</el-scrollbar>
@@ -45,33 +36,23 @@
<button @click="esc" id="cab-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="saveOrEdit" id="cab-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<button @click="save" id="cab-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "cabinetBox",
props:{
curCabinet:{type:Object},
curIdc:{type:Object}
cabinet: {type:Object},
currentDc: {type:Object}
},
data(){
return {
rightBox:{show:false,title:'',isEdit:true},
cabinet:{
id:'',
idcId:'',
name:'',
remark:'',
seq:'',
uSize:1
},
editCabinet:{},
rules:{
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -83,78 +64,33 @@
},
}
},
created() {
this.getIdcDatas();
},
methods:{
reset:function(){
this.cabinet={
id:null,
idcId:this.curIdc.id,
name:'',
remark:'',
seq:'',
uSize:1
};
clickOutside() {
this.esc(false);
},
show(show, isEdit) {
this.rightBox.show = show;
this.rightBox.isEdit = isEdit;
esc(refresh) {
this.$emit("close", refresh);
},
getIdcDatas:function(){
let temp=this;
if(temp.postIdcDatas&&temp.postIdcDatas.length>0){
temp.idcDatas=temp.postIdcDatas;
for (let i in temp.idcDatas){
let item=temp.idcDatas[i];
if(item.id==temp.cabinet.idcId){
temp.idc=item;
break;
}
}
return;
}
temp.$get('idc').then(response => {
if (response.code === 200) {
temp.idcDatas = response.data.list;
for (let i in temp.idcDatas){
let item=temp.idcDatas[i];
if(item.id==temp.cabinet.idcId){
temp.idc=item;
break;
}
}
}
})
},
esc() {
this.rightBox.show = false;
},
saveOrEdit:function(){
let temp=this;
temp.$refs.cabinetForm.validate((valid => {
save() {
this.$refs.cabinetForm.validate((valid => {
if(valid){
temp.cabinet.idcId=temp.curIdc.id;
if (temp.cabinet.id) {
this.$put('cabinet', temp.cabinet).then(res => {
const h = temp.$createElement;
this.editCabinet.idcId = this.currentDc.id;
if (this.editCabinet.id) {
this.$put('cabinet', this.editCabinet).then(res => {
if (res.code === 200) {
temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after",temp.cabinet.idcId);
temp.esc();
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
temp.$message.error(res.msg);
this.$message.error(res.msg);
}
})
} else {
temp.$post('cabinet', temp.cabinet).then(res => {
const h = temp.$createElement;
this.$post('cabinet', this.editCabinet).then(res => {
if (res.code === 200) {
temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after",temp.cabinet.idcId);
temp.esc();
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
temp.$message.error(res.msg);
this.$message.error(res.msg);
}
})
}
@@ -163,18 +99,16 @@
}
}))
},
delCabinet:function(){
let temp=this;
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete('/cabinet?ids='+temp.cabinet.id).then(response=>{
this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response=>{
if(response.code == 200){
this.esc();
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit('after',this.cabinet.idcId)
this.esc(true);
}else{
this.$message.error(response.msg);
}
@@ -183,22 +117,15 @@
}
},
watch:{
curCabinet:{
deep:true,
immediate:true,
handler:function(n,o){
if (n) {
this.cabinet=JSON.parse(JSON.stringify(n));
}
}
},
cabinet:{
deep:true,
immediate:true,
handler:function(n,o){
this.rightBox.title = n && n.id ? this.$t('asset.title') + " ID：" + n.id : this.$t('asset.cabinet');
if (n) {
this.editCabinet = JSON.parse(JSON.stringify(n));
}
}
},
}
}
</script>

65
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -1,31 +1,24 @@
<template>
<transition name="right-box">
<div class="right-box right-box-project" v-if="rightBox.show" v-clickoutside="clickos">
<div class="right-box right-box-project" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="project-del" type="button" v-if="project.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<button id="project-del" type="button" v-if="!project.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button v-if="!rightBox.isEdit && project.buildIn != 1" id="project-edit" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<div class="right-box-title">{{editProject.id ? $t("project.project.editProject") + " ID：" + editProject.id : $t("overall.createProject")}}</div>
<!-- end--标题-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="project" label-position="right" label-width="120px" :rules="rules" ref="projectForm">
<el-form class="right-box-form right-box-form-left" :model="editProject" label-position="right" label-width="120px" :rules="rules" ref="projectForm">
<el-form-item :label='$t("project.project.projectName")' prop="name">
<el-input v-if="rightBox.isEdit" size="mini" maxlength="64" show-word-limit v-model="project.name"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{project.name}}</div>
<el-input size="mini" maxlength="64" show-word-limit v-model="editProject.name"></el-input>
</el-form-item>
<el-form-item :label='$t("project.project.description")'>
<el-input v-if="rightBox.isEdit" size="mini" type="textarea" maxlength="1024" show-word-limit v-model="project.remark"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{project.remark}}</div>
<el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="editProject.remark"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
@@ -35,12 +28,11 @@
<button @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="project-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<button @click="save" id="project-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
</template>
<script>
import {noSpecialChar} from '../../common/js/validate';
@@ -57,6 +49,7 @@
isCreate: false,
isEdit:false
},
editProject: {},
rules: {
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'},
@@ -66,42 +59,36 @@
}
},
methods: {
show(show,isEdit) {
this.rightBox.show = show;
this.rightBox.isEdit=isEdit;
},
clickos() {
this.esc();
clickOutside() {
this.esc(false);
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;
esc(refresh) {
this.$emit("close", refresh);
},
/*保存*/
save() {
this.$refs['projectForm'].validate((valid) => {
if (valid) {
if (this.project.id) {
this.$put('project', this.project).then(response => {
if (this.editProject.id) {
this.$put('project', this.editProject).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.rightBox.show = false;
this.$store.commit('projectListChange');
this.$store.commit('setProject', this.project);
this.$emit('reload');
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('project', this.project).then(response => {
this.$post('project', this.editProject).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$store.commit('projectListChange');
this.rightBox.show = false;
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -113,14 +100,6 @@
}
});
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.project.editProject") + " ID：" + this.project.id;
} else {
this.save();
}
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
@@ -128,11 +107,11 @@
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("project?ids=" + this.project.id).then(response => {
this.$delete("project?ids=" + this.editProject.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false;
this.$store.commit('projectListChange');
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -144,11 +123,7 @@
project: {
immediate: true,
handler(n, o) {
if (n && n.id) {
this.rightBox.title =this.rightBox.isEdit? this.$t("project.project.editProject") + " ID：" + n.id : this.$t("project.project.project") + " ID：" + n.id;
} else {
this.rightBox.title = this.$t("project.project.createProject");
}
this.editProject = JSON.parse(JSON.stringify(n));
}
}
}

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

@@ -53,9 +53,9 @@
:label="item.label"
show-overflow-tooltip
min-width="110px"
:sort-orders="['ascending', 'descending']"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sort-orders="['ascending', 'descending']"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
@@ -103,7 +103,7 @@
</div>
</left-menu>
<transition name="right-box">
<alert-config-box :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
<alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
</transition>
<element-set
v-if="tools.showElementSet"
@@ -124,6 +124,10 @@
name: "alert-config",
data() {
return {
//侧滑
rightBox: {
show: false,
},
/*二级页面相关*/
bottomBox: {
ruleDetail: {},
@@ -329,9 +333,10 @@
},
edit(u) {
this.alertRule = JSON.parse(JSON.stringify(u));
this.$refs.alertConfigBox.show();
this.rightBox.show = true;
},
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.getTableData();
}
@@ -362,7 +367,7 @@
},
add() {
this.alertRule = this.newAlertRule();
this.$refs.alertConfigBox.show();
this.rightBox.show = true;
},
newAlertRule() {
return JSON.parse(JSON.stringify(this.blankAlertRule));
@@ -556,7 +561,15 @@
this.getTableData();
},
},
computed: {
alertConfigListChange() {
return this.$store.state.alertConfigListChange;
},
},
watch: {
alertConfigListChange(n) {
this.getTableData();
},
'bottomBox.showSubList': function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);

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

@@ -443,34 +443,19 @@
}
},
computed: {
getData() {
return this.$store.state.assetData
assetListChange() {
return this.$store.state.assetListChange;
},
currentAssetChange() {
return this.$store.state.currentAsset;
},
getFlushData() {
return this.$store.state.flushDataSign
}
},
watch: {
getData: {
handler(newVal) {
if (newVal.type == 1) {
this.activeType = 'dataCenter';
this.checkList = newVal.selectedData;
this.assetClick = false;
}
assetListChange(n) {
this.getTableData();
},
immediate: true,
deep: true,
},
getFlushData: {
handler(newVal, oldVal) {
if (newVal === true) {
this.getDcData();
this.getTableData()
/*this.getLeftMenuList();
this.getAssetData()*/
}
}
currentAssetChange(n) {
this.dcCheckList = [n.id];
},
dcCheckList(n, o) {
setTimeout(()=>{
@@ -526,6 +511,17 @@
}
}
},
indOf(a, b) {
let c = [];
for (let i = 0; i < a.length; i++) {
c.push(a[i]);
}
if (c.indexOf(b) > -1) {
return true;
} else {
return false;
}
},
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {

10
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -133,7 +133,7 @@
</div>
</div>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.dc" :is-full-screen="bottomBox.isFullScreen" :from="'dc'" :target-bab.sync="bottomBox.targetTab" :detail="bottomBox.dcDetail"
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.dc" :is-full-screen="bottomBox.isFullScreen" :from="'dc'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.dcDetail"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</transition>
</div>
@@ -351,7 +351,9 @@
this.$bottomBoxWindow.listResize(vm, e);
},
convertToDetail(obj) {
let detail = [];
let detail = JSON.parse(JSON.stringify(obj));
return detail;
/*let detail = [];
detail.push({label: this.$t("overall.name"), value: obj.name});
detail.push({label: this.$t("config.dc.area"), value: obj.area.name});
detail.push({label: this.$t("asset.location"), value: obj.location});
@@ -367,7 +369,7 @@
}
}
detail.push({label: this.$t("asset.principal"), value: principal});
return detail;
return detail;*/
},
add() {
this.dc = this.newDc();
@@ -380,6 +382,7 @@
this.rightBox.dc.show = false;
if (refresh) {
this.getTableData();
this.$store.commit("dcListChange");
}
},
closeTrafficBox(refresh) {
@@ -398,6 +401,7 @@
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
this.$store.commit("dcListChange");
} else {
this.$message.error(response.msg);
}

319
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -53,13 +53,14 @@
}
</style>
<template key="chartBox">
<div v-clickoutside="clickOutside">
<div v-clickoutside="clickOutside" class="right-box right-box-add-chart z-top right-box-chart">
<transition name="right-box">
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
</transition>
<div class="right-box right-box-add-chart z-top right-box-chart">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="chart-box-delete" type="button" v-if="chart.id" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<button id="chart-box-delete" type="button" v-if="editChart.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -67,45 +68,28 @@
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form right-box-form-left" :model="chart" label-width="120px" label-position="right" :rules="rules" ref="chartForm">
<el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="!showPanel.type">
<el-form class="right-box-form right-box-form-left" :model="editChart" label-width="120px" label-position="right" :rules="rules" ref="chartForm">
<!--<el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="!showPanel.type">
<el-autocomplete
:fetch-suggestions="panelSuggestion"
v-model.trim="panelName2"
placeholder=""
size="small"
value-key="name"
v-if="!chart.id"
v-if="!editChart.id"
popper-class="chart-box-autocomplete no-style-class"
>
</el-autocomplete>
<el-input size="small" v-if="chart.id" readonly="readonly" :value="panelName2"></el-input>
<!--<el-select popper-class="chart-box-dropdown"
v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
<el-option v-for="item in panelData" :key="item.id" :label="item.name"
:value="item.id" :id="'chart-box-panel-'+item.id">
<span class="config-dropdown-label-txt">{{item.name}}</span>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deletePanel(item)"
:id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span>
<span class="config-dropdown-btn" @click.stop="editPanel(item)"
:id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
</div>
</el-option>
</el-select>
<el-input size="small" v-if="editChart.id" readonly="readonly" :value="panelName2"></el-input>
<div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
<i class="el-icon-plus" id="chart-box-panel-plus"></i>
</div>-->
</el-form-item>
</el-form-item>-->
<el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
<el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input>
<el-input size="small" maxlength="64" show-word-limit v-model="editChart.title"></el-input>
</el-form-item>
<div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
@@ -113,7 +97,7 @@
<!-- type unit start-->
<el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="type" class="half-form-item">
<el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-small" v-model="chart.type" placeholder="" size="mini">
<el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-small" v-model="editChart.type" placeholder="" size="mini">
<el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -125,7 +109,7 @@
:options="unitOptions"
:props="{ expandTrigger: 'hover',emitPath:false }"
:show-all-levels="false"
v-model="chart.unit"
v-model="editChart.unit"
@change="unitSelected"
>
</el-cascader>
@@ -142,7 +126,7 @@
<el-form-item :label="$t('dashboard.panel.chartForm.high')" prop="hight" class="half-form-item" style="width: 415px;">
<el-autocomplete
v-model="chart.height"
v-model="editChart.height"
:fetch-suggestions="querySearch"
placeholder=""
size="mini"
@@ -161,11 +145,11 @@
</el-form-item>
<el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }">
<el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="chart.param.url"></el-input>
<el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="editChart.param.url"></el-input>
</el-form-item>
<el-form-item v-if="chart.type == 'line' || chart.type == 'bar' || chart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold" class="half-form-item">
<el-input size="mini" type="input" v-model="chart.param.threshold"></el-input>
<el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold" class="half-form-item">
<el-input size="mini" type="input" v-model="editChart.param.threshold"></el-input>
</el-form-item>
<div v-if="!isUrl&&!isAlert" class="right-box-sub-title">
@@ -180,16 +164,6 @@
</el-row>
<el-row v-if="!isUrl &&!isAlert" class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<!--<chart-metric ref="chartTag"
:pointer="index"
:metric-list="metricList"
:metricCascaderList="metricCascaderList"
:metricAllData="metricAllData"
:count-total="elements.length"
@on-delete-target="deleteTarget"
@sub-save-ok="subOk"
@on-add-target-success="getTarget"
></chart-metric>-->
<promql-input
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
@@ -202,7 +176,7 @@
@removeExpression="removeExpression"
></promql-input>
<el-row>
<template v-if="chart.type != 'singleStat'">
<template v-if="editChart.type != 'singleStat'">
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
@@ -242,7 +216,6 @@
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
<!--preview -->
<chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
</div>
@@ -262,17 +235,19 @@
resetZIndex(e);
}
}
}
};
export default {
name: "chartBox",
props: {
panelData: Array,
showPanel: Object
showPanel: Object,
chart: Object
},
mixins: [rz],
data() {
return {
rightBox: {title: ""},
editChart: {},
statisticsList:[
{
id:"min",
@@ -307,6 +282,7 @@
name:this.$t("dashboard.panel.chartForm.statisticsVal.different")
},
],
promqlCount: 1,
promqlKeys: [],
elementIds: [],
@@ -315,21 +291,6 @@
statistics: "",
editInfo: {},
chart: {
id:'',
title: '',
type:'line',
span:12,
height:'400',
unit:2,
param:{
url:'',
threshold:'',
},
elements:[],
panel: '',
sync: 0
},
isUrl:false,
isSingleStat:false,
isAlert:false,
@@ -413,7 +374,7 @@
},
methods: {
clickOutside() {
this.esc();
this.esc(false);
},
toAddPanel() {
this.$refs.panelBox2.show(true);
@@ -455,11 +416,8 @@
this.panel = Object.assign({}, panel);
this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.editPanelTitle"));
},
setTitle(title) {
this.rightBox.title = title;
},
setUnit:function(unit){
this.$set(this.chart,'unit',Number.parseInt(unit))
setUnit(unit) {
this.$set(this.editChart,'unit',Number.parseInt(unit))
},
expressionChange: function () {
@@ -471,8 +429,8 @@
this.elementIds.push("");
this.promqlCount++;
},
removeExpression: function (index) {
if (this.promqlCount > 1) {
removeExpression(index) {
if (this.promqlCount > 0) {
this.expressions.splice(index, 1);
this.legends.splice(index, 1);
this.promqlKeys.splice(index, 1);
@@ -491,20 +449,20 @@
save() {
this.$refs['chartForm'].validate((valid) => {
if (valid) {
if (this.chart.id) {//修改
this.$put('panel/'+this.chart.id+'/charts').then(response => {
if (this.editChart.id) {//修改
this.$put('panel/'+this.editChart.id+'/charts').then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
} else {//新增
this.$post('panel/charts', this.chart).then(response => {
this.$post('panel/charts', this.editChart).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -516,24 +474,20 @@
}
});
},
del: function(u) {
let cloneChart=JSON.parse(JSON.stringify(u))
del(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("panel/"+this.panelId+"/charts?ids="+cloneChart.id).then(response => {
this.$delete("panel/" + this.panelId + "/charts?ids=" + u.id).then(response => {
if (response.code === 200) {
if(this.$refs.chartForm){
this.$refs.chartForm.resetFields();//清空表单
this.panelName2 = '';
}
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
//this.getTableData();//删除相关图表后，刷新面板数据---调用panel的方法刷新
this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
this.$emit('on-delete-success');
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -543,8 +497,8 @@
//----------------------------------
/*关闭弹框*/
esc() {
this.$emit("close");
esc(refresh) {
this.$emit("close", refresh);
},
/*metric部分相关方法--begin*/
@@ -664,7 +618,7 @@
let interval = setInterval(() => {
if (panelId) {
this.panelId = panelId;
this.$post('panel/' + this.panelId + '/charts', params ? params : this.chart).then(response => {
this.$post('panel/' + this.panelId + '/charts', params ? params : this.editChart).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -691,7 +645,7 @@
},
// 更新图表
updateCharts(params) {
this.$put('panel/' + this.panelId + '/charts', params ? params : this.chart).then(response2 => {
this.$put('panel/' + this.panelId + '/charts', params ? params : this.editChart).then(response2 => {
if (response2.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -715,23 +669,23 @@
const params = {
// productId: this.productId,
//panelId: this.panelId,
title: this.chart.title,//this.chart
span: this.chart.span,
height: this.chart.height,
type: this.chart.type,
unit:this.chart.unit,
title: this.editChart.title,//this.editChart
span: this.editChart.span,
height: this.editChart.height,
type: this.editChart.type,
unit:this.editChart.unit,
param:{
},
sync: this.chart.sync
sync: this.editChart.sync
};
if(this.chart.type === 'singleStat'){
if(this.editChart.type === 'singleStat'){
params.param.statistics=this.statistics;
} else {
delete params.param.statistics;
}
if(this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'){
params.param.threshold=this.chart.param.threshold;
if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
params.param.threshold=this.editChart.param.threshold;
} else {
delete params.param.threshold;
}
@@ -761,12 +715,12 @@
if (valid) {
if(optType==='preview') {
if (this.isedit) {
params.id = this.chart.id;
params.id = this.editChart.id;
}
this.$refs.chartsPreview.show(params);
}else{
if (this.isedit) {
params.id = this.chart.id;
params.id = this.editChart.id;
this.updateCharts(params);
} else {
this.addCharts(params);
@@ -779,23 +733,23 @@
getAlertParam:function(param,opType){
this.$refs.chartForm.validate((valid) => {
const params = {
title: this.chart.title,//this.chart
span: this.chart.span,
height: this.chart.height,
type: this.chart.type,
unit:this.chart.unit,
title: this.editChart.title,//this.editChart
span: this.editChart.span,
height: this.editChart.height,
type: this.editChart.type,
unit:this.editChart.unit,
param:param,
sync: this.chart.sync
sync: this.editChart.sync
};
if (valid) {
if(opType==='preview') {
if (this.isedit) {
params.id = this.chart.id;
params.id = this.editChart.id;
}
this.$refs.chartsPreview.show(params);
}else{
if (this.isedit) {
params.id = this.chart.id;
params.id = this.editChart.id;
this.updateCharts(params);
} else {
this.addCharts(params);
@@ -806,8 +760,8 @@
},
confirmAdd() {
this.elementTarget = []; // 初始化清空参数
if(this.chart.type!=='url'){
/*if(this.chart.type == 'alertList'){
if(this.editChart.type!=='url'){
/*if(this.editChart.type == 'alertList'){
this.$refs.alertParamBox.saveParam();
}else{
this.$refs.chartTag.forEach((item, index) => {//循环指标列表
@@ -815,18 +769,18 @@
item.saveTarget(index);
});
}*/
if(this.chart.type == 'singleStat'){
this.$set(this.chart.param, "statistics", this.statistics);
if(this.editChart.type == 'singleStat'){
this.$set(this.editChart.param, "statistics", this.statistics);
} else {
delete this.chart.param.statistics;
delete this.editChart.param.statistics;
}
if (this.expressions[0]) {
this.chart.elements = [];
this.editChart.elements = [];
this.expressions.forEach((expr, i) => {
this.chart.elements.push({id: this.elementIds[i], expression: expr, type: "expert", legend: this.legends[i]});
this.editChart.elements.push({id: this.elementIds[i], expression: expr, type: "expert", legend: this.legends[i]});
});
}
if (this.chart.id) {
if (this.editChart.id) {
this.updateCharts();
} else {
this.addCharts();
@@ -834,21 +788,21 @@
}else {
this.$refs.chartForm.validate((valid) => {
const params = {
title: this.chart.title,//this.chart
span: this.chart.span,
height: this.chart.height,
type: this.chart.type,
unit:this.chart.unit,
title: this.editChart.title,//this.editChart
span: this.editChart.span,
height: this.editChart.height,
type: this.editChart.type,
unit:this.editChart.unit,
param:{
url:this.chart.param.url,
url:this.editChart.param.url,
},
sync: this.chart.sync
sync: this.editChart.sync
};
if (valid) {
params.elements = [];
if (this.isedit) {
params.id = this.chart.id;
params.id = this.editChart.id;
this.updateCharts(params);
} else {
this.addCharts(params);
@@ -942,7 +896,7 @@
}
this.isedit = false;
this.initInfo(); // 初始化图表信息
//this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了
//this.editChartModal = true;//????控制弹出框显示和隐藏的，不需要了
this.initOpen(); // 获取metric, productId数据
},
setIsUrl(){
@@ -967,7 +921,6 @@
},
// 编辑chart时使用, set_tdata
editData(data, panelId) {
//alert('data='+JSON.stringify(data)+"=="+panelId);
if (!panelId) {
this.panelId = 0;
this.panelName2 = "";
@@ -979,30 +932,29 @@
this.panelName2 = temp[0].name;
}
this.isedit = true;
//this.chartModal = true;
this.editInfo = data;
// 图表信息获取
this.chart.id = data.id;
this.chart.title = data.title;
this.chart.span = data.span;
this.chart.height = data.height+'';
this.chart.type = data.type;
this.chart.unit=data.unit;
this.chart.elements = data.elements;
if(this.chart.type==='url'){
this.chart.param.url = data.param.url;
this.editChart.id = data.id;
this.editChart.title = data.title;
this.editChart.span = data.span;
this.editChart.height = data.height+'';
this.editChart.type = data.type;
this.editChart.unit=data.unit;
this.editChart.elements = data.elements;
if(this.editChart.type==='url'){
this.editChart.param.url = data.param.url;
this.setIsUrl();
//this.elements = [1];
}else if(this.chart.type==='alertLine'){
this.chart.param=data.param;
}else if(this.editChart.type==='alertLine'){
this.editChart.param = data.param;
this.setIsAlertList();
//this.elements=[1];
}else{
if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'||this.chart.type==='singleStat')&&data.param){
this.chart.param.threshold=data.param.threshold;
this.chart.param.statistics = this.statistics = data.param.statistics;
if((this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='singleStat')&&data.param){
this.editChart.param.threshold=data.param.threshold;
this.editChart.param.statistics = this.statistics = data.param.statistics;
}else{
this.chart.param.threshold='';
this.editChart.param.threshold='';
}
this.setIsOtherChart();
//this.getSuggestMetric();//获得指标列表
@@ -1013,7 +965,7 @@
this.elements.push(index);
});
this.$nextTick(() => {
if(this.chart.type==='alertList'){
if(this.editChart.type==='alertList'){
this.setIsAlertList();
this.$nextTick(()=>{
this.$refs.alertParamBox.setData(data);
@@ -1031,13 +983,14 @@
// 初始化信息
initInfo() {
this.chart.title = '';
this.chart.type = 'line';
this.chart.span = 12;
this.chart.height = 400+'';
this.chart.unit=2;
this.chart.param.url='';
this.chart.param.threshold='';
this.editChart.title = '';
this.editChart.type = 'line';
this.editChart.span = 12;
this.editChart.height = 400+'';
this.editChart.unit=2;
!this.editChart.param && (this.$set(this.editChart, "param", []));
this.editChart.param.url='';
this.editChart.param.threshold='';
this.elements = [1];
this.elementTarget = [];
bus.chartAddInfo.metricTarget = [];
@@ -1066,14 +1019,14 @@
};
},
handleSelect:function(item){
this.chart.height=item;
this.editChart.height=item;
},
unitSelected:function(value){
//this.chart.unit=value[value.length-1];
//this.editChart.unit=value[value.length-1];
},
chartTypeChange(){
let chartType = this.chart.type;
this.chart.param.url='';
let chartType = this.editChart.type;
this.editChart.param.url='';
if(chartType==='url'){
this.setIsUrl();
/*if(this.$refs.chartTag){
@@ -1089,7 +1042,7 @@
}else {
this.setIsOtherChart();
if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
this.chart.param={threshold:''}
this.editChart.param={threshold:''}
}
/*if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {
@@ -1125,8 +1078,8 @@
//验证图表数据是否合法？？，合法了再显示预览窗口
this.elementTarget = []; // 初始化清空参数
this.alertParams={};
if(this.chart.type!=='url'){
if(this.chart.type == 'alertList'){
if(this.editChart.type!=='url'){
if(this.editChart.type == 'alertList'){
this.$refs.alertParamBox.saveParam('preview');
}else{
/*this.$refs.chartTag.forEach((item, index) => {//循环指标列表
@@ -1137,23 +1090,23 @@
const params = {
// productId: this.productId,
//panelId: this.panelId,
title: this.chart.title,//this.chart
span: this.chart.span,
height: this.chart.height,
type: this.chart.type,
unit:this.chart.unit,
title: this.editChart.title,//this.editChart
span: this.editChart.span,
height: this.editChart.height,
type: this.editChart.type,
unit:this.editChart.unit,
param:{
},
sync: this.chart.sync
sync: this.editChart.sync
};
if(this.chart.type === 'singleStat'){
if(this.editChart.type === 'singleStat'){
params.param.statistics=this.statistics;
} else {
delete params.param.statistics;
}
if(this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'){
params.param.threshold=this.chart.param.threshold;
if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
params.param.threshold=this.editChart.param.threshold;
} else {
delete params.param.threshold;
}
@@ -1196,24 +1149,24 @@
}else {
this.$refs.chartForm.validate((valid) => {
const params = {
title: this.chart.title,//this.chart
span: this.chart.span,
height: this.chart.height,
type: this.chart.type,
unit:this.chart.unit,
title: this.editChart.title,//this.editChart
span: this.editChart.span,
height: this.editChart.height,
type: this.editChart.type,
unit:this.editChart.unit,
param:{
url:this.chart.param.url,
url:this.editChart.param.url,
}
};
if (valid) {
if (this.isedit) {
params.id = this.chart.id;
params.id = this.editChart.id;
}
this.$refs.chartsPreview.show(params);
/*
if (this.isedit) {
params.id = this.chart.id;
params.id = this.editChart.id;
this.updateCharts(params);
} else {
this.addCharts(params);
@@ -1226,10 +1179,10 @@
},
//preview--end
initElements() {
if (!this.chart.elements || this.chart.elements.length == 0) {
this.chart.elements = [{expression: "", legend: "", type: "expert", id: ""}];
if (!this.editChart.elements || this.editChart.elements.length == 0) {
this.editChart.elements = [{expression: "", legend: "", type: "expert", id: ""}];
}
this.chart.elements.forEach(element => {
this.editChart.elements.forEach(element => {
this.promqlKeys.push(getUUID());
this.expressions.push(element.expression);
this.legends.push(element.legend);
@@ -1248,7 +1201,19 @@
this.getSuggestMetric();
},
watch: {
panelData: {
chart: {
deep: true,
immediate: true,
handler(n) {
this.editChart = JSON.parse(JSON.stringify(n));
if (n.id) {
this.editData(this.editChart, this.showPanel.id);
} else {
this.createData(this.showPanel.id);
}
}
},
/*panelData: {
deep: true,
immediate: true,
handler(n, o) {
@@ -1267,7 +1232,7 @@
}
}
}
}
}*/
},
beforeDestroy() {
if(this.$refs.chartTag){

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

@@ -45,7 +45,7 @@
<el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
<el-col :span="1"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="1"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
<el-col :span="1"><span class="panel-dropdown-btn" @click.stop="edit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
</el-row>
</el-dropdown-item>
</draggable>
@@ -59,32 +59,8 @@
</el-input>
</div>
<!--<div class="panel-calendar margin-r-20">
<div class="block">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
</div>
</div>-->
<!--<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
<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>
</button><el-popover
v-model="visible" placement="bottom-start" width="200" trigger="click">
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
@click="selectInterval(i.value)">
{{i.name}}
</li>
</ul>
<button type="button" style="border-radius: 0 4px 4px 0"
class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
<i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
</button>
</el-popover>
</div>-->
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
<button @click="toAddChart" :title="$t('overall.createChart')"
<button @click="addChart" :title="$t('overall.createChart')"
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<i class="nz-icon-create-square nz-icon"></i>
</button>
@@ -94,7 +70,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="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart"
ref="chartList"></chart-list>
</div>
</el-scrollbar>
@@ -103,8 +79,12 @@
</div>
</left-menu>
<panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
<chart-box @close="rightBox.show = false" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
<transition name="right-box">
<chart-box @close="closeChartBox" :chart="chart" v-if="rightBox.chart.show" ref="addChartModal" :show-panel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
</transition>
<transition name="right-box">
<panel-box v-if="closePanelBox" :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
</transition>
</div>
</template>
@@ -122,8 +102,8 @@
showTopBtn: false, //top按钮
visible: false,
rightBox: { //面板弹出框相关
show: false,
title: this.$t('dashboard.panel.createPanelTitle')
chart: {show: false},
panel: {show: false},
},
tableHover: false,
searchTime: [
@@ -156,17 +136,21 @@
id: '',
name: ''
},
chart: {
chart: {},
blankChart: {
id:'',
title: '',
type:'line',
span:12,
height: 400,
elements: {
id: '',
expression: '',
type: ''
}
height:'400',
unit:2,
param:{
url:'',
threshold:'',
},
elements:[],
panel: '',
sync: 0
},
pageObj: {
pageNo: 1,
@@ -237,7 +221,7 @@
this.getData(this.filter);
},
del: function (u) {
del(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
@@ -254,19 +238,18 @@
this.showPanel.id = '';
}
this.getTableData();
this.rightBox.show = false;
} else {
this.$message.error(response.msg);
}
})
});
},
toEdit: function (u) {
edit(u) {
this.panel = Object.assign({}, u);
this.$refs.panelBox.setTitle(this.$t("dashboard.panel.editPanelTitle"));
this.$refs.panelBox.show(true);
},
toAdd: function () {
toAdd() {
this.$refs.panelBox.show(true);
this.panel = {
id: '',
@@ -289,12 +272,12 @@
this.getTableData();
},
/*图表相关操作--start*/
toAddChart: function () {
this.rightBox.show = true;
this.$nextTick(() => {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
});
addChart() {
this.chart = this.newChart();
this.rightBox.chart.show = true;
},
newChart() {
return JSON.parse(JSON.stringify(this.blankChart));
},
scrollbarHeightHandler() {
setTimeout(() => {
@@ -317,15 +300,27 @@
}, 100);
},
// 编辑图表信息,打开编辑弹窗
editData(data) {
this.rightBox.show = true;
this.$nextTick(() => {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
this.$refs.addChartModal.editData(data, this.showPanel.id);
});
editChart(data) {
if (!data.param) {
data.param = {url: '', threshold: '',};
}
this.chart = JSON.parse(JSON.stringify(data));
this.rightBox.chart.show = true;
},
closeChartBox(refresh) {
this.rightBox.chart.show = false;
if (refresh) {
}
},
closePanelBox(refresh) {
this.rightBox.panel.show = false;
if (refresh) {
}
},
// 移除图表:弹出确认框询问
removeData(data,from) {
delChart(data,from) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
@@ -358,16 +353,6 @@
},
// 图表创建成功，回调panel页面，进行图表的刷新
createSuccess(msg, data, params) {
/*
if (data && data.code === 200) {
if (msg === 'create') {
//this.$message.success('添加成功');
} else {
//this.$message.success('编辑成功');
}
}
*/
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
},
@@ -389,9 +374,6 @@
/*时间条件查询--start*/
// 选择日期变化
dateChange(val) {
// if(val){
// this.searchTime = [...val];
// }
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.filter.panelId = this.showPanel.id;
@@ -505,28 +487,7 @@
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;
// this.getData(this.filter);
// },
search:function(){
//this.filter.panelId=this.showPanel.id;
//this.getData(this.filter);
if(this.$refs.chartList){
this.$refs.chartList.searchCharts(this.filter.searchName);
}
@@ -548,13 +509,13 @@
//}
},300);
},
focusInput:function(){
focusInput() {
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
classVal=classVal.replace('query-input-inactive','query-input-active');
document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
this.$refs.queryPanel.focus();
},
blurInput:function(){
blurInput() {
if(!this.filter.searchName || this.filter.searchName == ''){
setTimeout(function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
@@ -563,7 +524,7 @@
},100)
}
},
clearInput:function(){
clearInput() {
this.$refs.queryPanel.focus();
},
start (event) {

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

@@ -369,7 +369,7 @@
},
getEndpointTableData() {
if(this.currentModule && this.currentModule.id) {
this.pageType='endpoint'
this.pageType = 'endpoint';
this.endpointSearchLabel.moduleId = this.currentModule.id;
this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
@@ -404,59 +404,10 @@
this.getEndpointTableData();
},
// 获取左侧module列表数据
getModuleList() {
//若currentProject不存在（如页面刷新了），默认取project列表的第一个
if (this.currentProject && this.currentProject.id) {
this.$get('module', {projectId: this.currentProject.id, pageSize: -1, pageNo: 1}).then(response => {
if (response.code === 200) {
this.moduleList = response.data.list;
for (let i = 0; i < this.moduleList.length; i++) {
try {
let tempObj = JSON.parse(this.moduleList[i].param);
this.$set(this.moduleList[i], 'paramObj', []);
for (let k in tempObj) {
this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
}
} catch (err) {
//console.error(response.data.list[i], err);
}
}
if (this.moduleList.length > 0) {
this.currentModule = this.moduleList[0];
} else {
this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
}
}
});
} else {
if (this.projectList && this.projectList.length > 0) {
this.$store.commit('setProject', this.projectList[0]);
} else {
this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
if (response.code == 200) {
this.projectList = response.data.list;
if (this.projectList.length > 0) {
this.getModuleList();
} else {
return;
}
}
});
}
}
},
getProjectList(reload) {
getProjectList() {
this.$get('project', {pageSize:-1}).then(response=>{
if(response.code == 200){
this.projectList = response.data.list;
if (reload) {
if (this.projectList.length > 0) {
this.currentProject = this.projectList[0];
} else {
this.currentProject = {};
}
}
}
})
},
@@ -473,14 +424,14 @@
this.currentProject = project;
}
} else {
this.currentProjectTitle = this.currentProject.name + "-" + this.currentProject.id;
this.currentProjectTitle = project.id + "";
}
this.currentModule = {};
},
closeModuleRightBox(refresh) {
this.rightBox.module.show = false;
if (refresh) {
this.getAllModuleList();
this.getModuleList();
}
},
closeAddEndpointRightBox(refresh) {
@@ -495,7 +446,7 @@
this.getEndpointTableData();
}
},
getAllModuleList() {
getModuleList() {
this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
if (response.code === 200) {
this.moduleList = response.data.list;
@@ -656,13 +607,6 @@
path: obj.path,
param: obj.param
};
/*detail.push({label: this.$t('project.project.project'), value: obj.project.name});
detail.push({label: this.$t("project.module.module"), value: obj.module.name});
detail.push({label: this.$t("asset.asset"), value: obj.asset.host});
detail.push({label: this.$t("project.endpoint.host"), value: obj.host});
detail.push({label: this.$t("project.endpoint.port"), value: obj.port});
detail.push({label: this.$t("project.endpoint.path"), value: obj.path});
detail.push({label: this.$t("project.endpoint.param"), value: obj.param});*/
return detail;
},
formatUpdateTime:function(date){
@@ -672,7 +616,7 @@
return hours+':'+minutes;
},
getStateErrorMsg:function(row){
getStateErrorMsg(row) {
let errCodes = [230009, 230010, 230011];
if(row){
if(row.state == 0){
@@ -697,6 +641,7 @@
detail.cabinet = obj.cabinet ? obj.cabinet.name : "";
detail.uSize = obj.cabinet ? obj.cabinet.uSize : "";
detail.remark = obj.idc ? obj.idc.remark : "";
!obj.accounts && (obj.accounts = []);
if (obj.accounts.length > 0) {
let account = obj.accounts[0];
detail.protocol = account.protocol;
@@ -710,41 +655,6 @@
detail.loginType = loginType;
detail.port = account.port;
}
/*detail.push({label: this.$t("asset.sn"), value: obj.sn});
detail.push({label: this.$t("asset.host"), value: obj.host});
detail.push({label: this.$t("asset.state"), value: obj.state == 1 ? this.$t('asset.inStock'): this.$t('asset.notInStock')});
detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum});
detail.push({label: this.$t("asset.tableTitle.alerts"), value: obj.alertNum});
detail.push({label: this.$t("asset.assetType"), value: obj.model.type.value});
detail.push({label: this.$t("asset.vendorModel"), value: obj.model.vendor.value + " " + obj.model.name});
detail.push({label: this.$t("asset.assetType"), value: obj.model.type.value});
detail.push({label: this.$t("asset.purchaseDate"), value: obj.purchaseDate});
detail.push({label: this.$t("asset.dcName"), value: obj.idc ? obj.idc.name : ""});
detail.push({label: this.$t("asset.location"), value: obj.idc ? obj.idc.location : ""});
detail.push({label: this.$t("asset.principal"), value: obj.idc ? this.getPrincipalName(obj.idc.principal) : ""});
detail.push({label: this.$t("asset.location"), value: obj.idc ? obj.idc.location : ""});
detail.push({label: this.$t("asset.tel"), value: obj.idc ? obj.idc.tel : ""});
detail.push({label: this.$t("asset.cabinet"), value: obj.cabinet ? obj.cabinet.name : ""});
detail.push({label: this.$t("asset.editAssetTab.uSize"), value: obj.cabinet ? obj.cabinet.uSize : ""});
detail.push({label: this.$t("asset.editAssetTab.remark"), value: obj.idc ? obj.idc.remark : ""});
if (obj.accounts.length > 0) {
let account = obj.accounts[0];
if (account.protocol == 'SSH') {
detail.push({label: this.$t("asset.protocol"), value: 'SSH'});
detail.push({label: this.$t("asset.account"), value: account.user});
let loginType = "";
if (account.authType == 1) {
loginType = this.$t('asset.password');
} else if (account.authType == 2) {
loginType = this.$t('asset.ssh');
}
detail.push({label: this.$t("asset.loginType"), value: loginType});
} else if (account.protocol == 'TELNET') {
detail.push({label: this.$t("asset.protocol"), value: 'TELNET'});
detail.push({label: this.$t("asset.account"), value: account.user});
}
detail.push({label: this.$t("asset.port"), value: account.port});
}*/
return detail;
},
getPrincipalName(data) {
@@ -797,8 +707,7 @@
},
created() {
this.currentProject = this.$store.state.currentProject;
// this.getModuleList();
this.getAllModuleList();
this.getModuleList();
this.getUserData();
this.getProjectList();
},
@@ -832,9 +741,9 @@
}
});
//resize时刷新左侧列表滚动条
let _this = this;
let vm = this;
window.onresize = function() {
_this.$refs.leftScrollbar.update();
vm.$refs.leftScrollbar.update();
}
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
@@ -846,15 +755,18 @@
},
computed: {
currentProjectChange() {
return this.$store.state.currentProject;
},
projectListChange() {
return this.$store.state.projectListChange;
},
moduleListReloadWatch() {
moduleListChange() {
return this.$store.state.moduleListChange;
},
endpointListChange() {
return this.$store.state.endpointListChange;
},
currentProjectChange() {
return this.$store.state.currentProject;
},
itemTip() {
return function(id, content, ready) {
let className = "item-tip-show";
@@ -874,19 +786,28 @@
},
},
watch: {
projectListChange(n) {
this.getProjectList();
},
moduleListChange(n) {
this.getModuleList();
},
endpointListChange(n) {
this.getEndpointTableData();
},
currentProjectChange: {
immediate:true,
handler(n, o) {
this.currentProject = Object.assign({}, n);
this.detailProject();
if (n.id != this.currentProject.id) {
this.currentProject = this.projectList.find(p => {
return p.id == n.id;
});
this.detailProject(null, this.currentProject);
}
},
projectListChange:function(n,o){
this.getProjectList(true);
},
currentProject(n, o) {
// this.getModuleList();
// this.$store.commit('setProject',n)
this.$store.commit("currentProjectChange", Object.assign({}, n));
},
currentModule(n, o) {
this.endpointPageObj.pageNo = 1;
@@ -896,10 +817,7 @@
this.endpointTableData = [];
}
},
moduleListReloadWatch(n, o) {
// this.getModuleList(this.currentProject.id);
this.getAllModuleList();
},
"bottomBox.showSubList": function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);

59
nezha-fronted/src/store/index.js
View File

@@ -9,19 +9,23 @@ const store = new Vuex.Store({
step: 0,
type: -1 //0: asset 1: header
},
assetDcList: 0, //监听此值，改变则刷新dc列表
assetForAlertList: 0, //asset页跳转alertList时传递的assetId
currentProject: {
id: '',
name: '',
remark: ''
},
assetItemId:'' , //复选框ID
assetAllId:[] , //复选框allID
dcList: 0, //监听此值，改变则刷新dc列表
/* 监听对象变化，用于顶部菜单与底部内容的同步 */
currentProject: {id: "", name: "", remark: ""},
currentAsset: {id: ""},
projectListChange: 0,
moduleListChange: 0,
flushDataSign: false,
panelListReload:false,
endpointListChange: 0,
assetListChange: 0,
dcListChange: 0,
alertConfigListChange: 0,
eventfixed: {
shezhi: 0,
screen: 0
@@ -44,29 +48,38 @@ const store = new Vuex.Store({
linkData:[],//导航数据
},
getters: {
getlinkData(state){
getLinkData(state){
return state.linkData
}
},
mutations: {
setProject(state, project) {
state.currentProject = Object.assign({}, project);
},
projectRightBoxShow(state, show) {
state.projectBoxShow = show;
},
/* 监听对象变化，用于顶部菜单与底部内容的同步 */
projectListChange(state) {
state.projectListChange = state.projectListChange + 1;
state.projectListChange++;
},
moduleListChange(state) {
state.moduleListChange = state.moduleListChange + 1;
state.moduleListChange++;
},
panelListChange(state,status){
state.panelListReload = status;
endpointListChange(state) {
state.endpointListChange++;
},
assetDcListChange(state) {
state.assetDcList++;
assetListChange(state) {
state.assetListChange++;
},
alertConfigListChange(state) {
state.alertConfigListChange++;
},
dcListChange(state) {
state.dcListChange++;
},
currentProjectChange(state, project) {
state.currentProject = project;
},
currentAssetChange(state, asset) {
state.currentAsset = asset;
},
setHeaderTable(state, data) { //设置table头部
state.tablelable = data;
},
@@ -118,10 +131,10 @@ const store = new Vuex.Store({
state.consoleShow=false;
},
setLeftMenuStat:function(state,data){
state.leftMenuStat=data
state.leftMenuStat = data;
},
setLinkData:function(state,data){
state.linkData=data
state.linkData = data;
},
},
actions: {