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

Merge remote-tracking branch 'origin/codeCheck' into codeCheck

Browse Source
This commit is contained in:
wanghaoyu
2019-12-18 16:56:04 +08:00
parent a339243884 bab11922cf
commit 9fd09cac6a
13 changed files with 2295 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/assets/css/main.css
View File

@@ -119,7 +119,7 @@ html {
float: right; float: right;
} }
.top-tools .top-tool-search { .top-tools .top-tool-search {
width: 220px; width: 320px;
} }
.top-tools .el-button-group { .top-tools .el-button-group {
float: left; float: left;
@@ -361,7 +361,7 @@ html {
/* end--endpoint->子弹框asset搜索框前缀和后缀*/ /* end--endpoint->子弹框asset搜索框前缀和后缀*/
/* begin--自定义可编辑的el-select下拉框样式*/ /* begin--自定义可编辑的el-select下拉框样式*/
.config-dropdown { .config-dropdown {
width: 550px; width: 520px;
} }
.config-dropdown-btn { .config-dropdown-btn {
display: inline-block; display: inline-block;

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

@@ -1,12 +1,28 @@
<template> <template>
<div class="header"> <div class="header">
<div class="submenu"> <div class="submenu">
<el-menu <el-menu
class="el-menu-demo" class="el-menu-demo"
mode="horizontal" mode="horizontal"
background-color="#ffffff" background-color="#ffffff"
unique-opened unique-opened
> >
<el-submenu index="0">
<template slot="title">
<div class="menu-create">
&nbsp;&nbsp;<i class="el-icon-plus"></i>
<div>{{$t('overall.create')}}</div>
</div>
</template>
<template v-for="(item, index) in createMenu">
<el-menu-item :index="'0-' + index.toString()">
<div @click="createBox(item)">
<span>{{item.label}}</span>
</div>
</el-menu-item>
</template>
</el-submenu>
<el-menu-item index="1" @click="jumpTo('dashboard')"> <el-menu-item index="1" @click="jumpTo('dashboard')">
<div> <div>
{{$t('overall.dashboard')}} {{$t('overall.dashboard')}}
@@ -17,7 +33,7 @@
<div @click="jumpToProject('project', projectData[0])">{{$t('overall.project')}}</div> <div @click="jumpToProject('project', projectData[0])">{{$t('overall.project')}}</div>
</template> </template>
<template v-for="(item, index) in projectData"> <template v-for="(item, index) in projectData">
<el-menu-item :index="index.toString()"> <el-menu-item :index="'2-' + index.toString()">
<div @click="jumpToProject('project', item)"> <div @click="jumpToProject('project', item)">
<span>{{item.name}}</span> <span>{{item.name}}</span>
<div @click.stop="toEditProject(item)" class="menu-edit"><i class="el-icon-edit-outline"></i></div> <div @click.stop="toEditProject(item)" class="menu-edit"><i class="el-icon-edit-outline"></i></div>
@@ -30,7 +46,7 @@
<div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div> <div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
</template> </template>
<template v-for="(item, index) in assetData"> <template v-for="(item, index) in assetData">
<el-menu-item :index="index.toString()"> <el-menu-item :index="'3-' + index.toString()">
<div @click="jumpToAsset('asset',item.id)">{{item.name}}</div> <div @click="jumpToAsset('asset',item.id)">{{item.name}}</div>
</el-menu-item> </el-menu-item>
</template> </template>
@@ -39,10 +55,10 @@
<template slot="title"> <template slot="title">
<div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div> <div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
</template> </template>
<el-menu-item index="1"> <el-menu-item index="4-0">
<div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div> <div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
</el-menu-item> </el-menu-item>
<el-menu-item index="2"> <el-menu-item index="4-1">
<div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div> <div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
@@ -50,10 +66,10 @@
<template slot="title"> <template slot="title">
<div @click="jumpTo('account')">{{$t('overall.config')}}</div> <div @click="jumpTo('account')">{{$t('overall.config')}}</div>
</template> </template>
<el-menu-item index="1"> <el-menu-item index="5-0">
<div @click="jumpTo('account')">{{$t('config.account.account')}}</div> <div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
</el-menu-item> </el-menu-item>
<el-menu-item index="2"> <el-menu-item index="5-1">
<div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div> <div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
@@ -101,7 +117,34 @@ export default {
return { return {
language: localStorage.getItem("language"), language: localStorage.getItem("language"),
assetData: [], assetData: [],
projectData: [] projectData: [],
createMenu: [
{
label: this.$t('project.project.createProject'),
url: 'project',
type: 1
},
{
label: this.$t('project.module.createModule'),
url: 'project',
type: 2
},
{
label: this.$t('project.endpoint.createEndpoint'),
url: 'project',
type: 3
},
{
label: this.$t('asset.createAsset'),
url: 'asset',
type: 4
},
{
label: this.$t('alert.config.createAlertConfig'),
url: 'alertConfig',
type: 5
}
]
} }
}, },
methods: { methods: {
@@ -113,6 +156,31 @@ export default {
} }
}); });
}, },
createBox(item) {
this.jumpTo(item.url);
setTimeout(() =>{
if (item.type == 1) {
if (this.projectData.length > 0) {
this.$store.commit('setProject', this.projectData[0]);
}
this.$store.commit('toCreateProject', true);
this.$store.commit('projectRightBoxShow', true);
} else if (item.type == 2) {
if (this.projectData.length > 0) {
this.$store.commit('setProject', this.projectData[0]);
}
this.$store.commit('toCreateModule', true);
} else if (item.type == 3) {
if (this.projectData.length > 0) {
this.$store.commit('setProject', this.projectData[0]);
}
this.$store.commit('toCreateEndpoint', true);
} else if (item.type == 5) {
this.$store.commit('projectRightBoxShow', false);
this.$store.commit('toCreateAlertConfig', true);
}
}, 120);
},
jumpToAsset(data, id) { jumpToAsset(data, id) {
this.$store.state.assetData.moduleData = data; this.$store.state.assetData.moduleData = data;
this.$store.state.assetData.selectedData = id; this.$store.state.assetData.selectedData = id;
@@ -141,9 +209,12 @@ export default {
}) })
}, },
toEditProject(p) { toEditProject(p) {
this.jumpTo('project');
setTimeout(() =>{
this.$store.commit('setProject', p); this.$store.commit('setProject', p);
this.$store.commit('projectRightBoxShow', true); this.$store.commit('projectRightBoxShow', true);
this.jumpTo('project'); }, 50);
} }
}, },
mounted() { mounted() {
@@ -151,7 +222,7 @@ export default {
this.getProjectData(); this.getProjectData();
}, },
computed: { computed: {
projectListReload() { projectListReloadWatch() {
return this.$store.state.projectListReload; return this.$store.state.projectListReload;
} }
}, },
@@ -159,7 +230,7 @@ export default {
projectListReloadWatch(n, o) { projectListReloadWatch(n, o) {
if (n) { if (n) {
this.getProjectData(); this.getProjectData();
this.$store.commit('projectListReload', false); this.$store.commit('projectListReloadChange', false);
} }
} }
} }
@@ -266,6 +337,20 @@ export default {
.header-name-jiantou { .header-name-jiantou {
position: static !important; position: static !important;
} }
.el-menu-demo>li:first-of-type {
position: fixed;
left: 40%;
top: 0;
}
.menu-create {
line-height: 15px;
text-align: center;
padding-top: 15px;
}
.menu-create .el-icon-plus {
font-size: 12px;
line-height: 12px;
}
.menu-edit { .menu-edit {
line-height: 36px; line-height: 36px;
float: right; float: right;

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

@@ -15,9 +15,20 @@ const en = {
search: 'Search', search: 'Search',
add: "Add", add: "Add",
option: "Option", option: "Option",
clearAll: "Clear All" clearAll: "Clear All",
name: 'Name',
},
search: {
searchTip: 'Press Enter or click to search'
},
tip: {
confirmDelete: "Confirm Delete?",
yes: "Yes",
no: "No",
deleteSuccess: "Successfully Deleted"
}, },
asset:{ asset:{
createAsset: "Create Asset",
tableTitle: { tableTitle: {
id: 'ID', id: 'ID',
assetType: '资产类型', assetType: '资产类型',
@@ -65,7 +76,8 @@ const en = {
//侧滑框 //侧滑框
promId: "Prometheus Server ID", promId: "Prometheus Server ID",
createProm: "Create Prometheus Server", createProm: "Create Prometheus Server",
editProm: "Edit Prometheus Server" editProm: "Edit Prometheus Server",
type: "Type"
}, },
}, },
alert: { alert: {
@@ -86,9 +98,9 @@ const en = {
charts: "Charts", charts: "Charts",
//表内容 //表内容
projectalert: "Project Alert", projectAlert: "Project Alert",
modulealert: "Module Alert", moduleAlert: "Module Alert",
devicealert: "Device Alert", deviceAlert: "Device Alert",
pending: "Pending", pending: "Pending",
expired: "Expired" expired: "Expired"
}, },
@@ -96,11 +108,20 @@ const en = {
name: "Name", name: "Name",
receiver: "Receiver", receiver: "Receiver",
expr: "Expr", expr: "Expr",
for: "For", for: "For (s)",
link: 'Link',
option: "Option", option: "Option",
alertConfig: "Alert Config", alertConfig: "Alert Config",
createalertConfig: "Create Alert Config", createAlertConfig: "Create Alert Config",
editalertConfig: "Edit Alert Config", editAlertConfig: "Edit Alert Config",
medium: "Medium",
high: "High",
low: "Low",
typeOption: {
project: 'Project',
module: 'Module',
asset: 'Asset'
}
} }
}, },
project: { project: {
@@ -108,13 +129,15 @@ const en = {
project: "Project", project: "Project",
projectName: "Project Name", projectName: "Project Name",
editProject: "Edit Project", editProject: "Edit Project",
description: "Description" description: "Description",
createProject: "Create Project"
}, },
module: { module: {
module: "Module", module: "Module",
moduleName: "Module Name", moduleName: "Module Name",
editModule: "Edit Module", editModule: "Edit Module",
description: "Description", description: "Description",
createModule: "Create Module",
tip: { tip: {
defaultEndpointSet: "Default Endpoint Set", defaultEndpointSet: "Default Endpoint Set",
relation: "Endpoints associated with Module will reference Port/Path/Param/Params by default" relation: "Endpoints associated with Module will reference Port/Path/Param/Params by default"
@@ -132,7 +155,12 @@ const en = {
asset: "Asset", asset: "Asset",
lastUpdate: "Last Update", lastUpdate: "Last Update",
}, },
metrics: "Metrics" metrics: {
metrics: "Metrics",
name: 'name',
type: 'Type',
description: 'Desc'
}
}, },
...enLocale ...enLocale
} }

1301
nezha-fronted/src/components/common/searchInput.vue Normal file
View File

File diff suppressed because it is too large Load Diff

44
nezha-fronted/src/components/common/searchSelectInfo.vue Normal file
View File

@@ -0,0 +1,44 @@
<script>
import i18n from './i18n';
const searchSelectInfo = { // value: 传给后台的值；label：显示给用户看的值
severity: [ //告警级别
{
value: 'medium',
label: i18n.t("alert.config.medium")
},
{
value: 'high',
label: i18n.t("alert.config.high")
},
{
value: 'low',
label: i18n.t("alert.config.low")
}
],
promType: [ //promServer类型
{
value: 1,
label: 'Global'
},
{
value: 2,
label: 'Per-Datacenter'
}
],
alertType: [ //告警类型
{
value: 1,
label: i18n.t('alert.config.typeOption.project')
},
{
value: 2,
label: i18n.t('alert.config.typeOption.module')
},
{
value: 3,
label: i18n.t('alert.config.typeOption.asset')
}
]
};
export default searchSelectInfo;
</script>

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

@@ -2,6 +2,23 @@
.account { .account {
height: 100%; height: 100%;
} }
.right-box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
.right-box::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.right-box::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.right-box {
overflow: auto;
}
.account-list-option { .account-list-option {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@@ -35,12 +52,7 @@
<span><i class="el-icon-plus"></i></span> <span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span> <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button> </el-button>
<el-input <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="mini"
></el-input>
</div> </div>
<el-table <el-table
:data="tableData" :data="tableData"
@@ -59,8 +71,17 @@
<div v-if="item.prop == 'option'" class="account-list-options"> <div v-if="item.prop == 'option'" class="account-list-options">
<span @click="del(scope.row)" class="account-list-option"><i class="el-icon-delete"></i></span> <span @click="del(scope.row)" class="account-list-option"><i class="el-icon-delete"></i></span>
<span @click="detail(scope.row)" class="account-list-option"><i class="el-icon-view"></i></span> <span @click="detail(scope.row)" class="account-list-option"><i class="el-icon-view"></i></span>
<span @click="edit(scope.row)" class="account-list-option"><i class="el-icon-edit-outline"></i></span> <span @click="toEdit(scope.row)" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
</div> </div>
<span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
<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>
<span v-else-if="item.prop == 'type'">
<template v-for="type in typeData" v-if="type.key == scope.row[item.prop]">{{type.value}}</template>
</span>
<span v-else-if="item.prop == 'linkObject'">{{scope.row[item.prop].name}}</span>
<span v-else>{{scope.row[item.prop]}}</span> <span v-else>{{scope.row[item.prop]}}</span>
</template> </template>
</el-table-column> </el-table-column>
@@ -85,7 +106,7 @@
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span> <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
<span v-else>{{$t('overall.edit')}}</span> <span v-else>{{$t('overall.edit')}}</span>
</div> </div>
<div class="right-box-top-btn" v-if="rightBox.isEdit && alertRule.id != ''"> <div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && alertRule.id != ''">
<div class="right-box-btn-icon"> <div class="right-box-btn-icon">
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
@@ -100,6 +121,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box-form"> <div class="right-box-form">
<!--name-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.config.name')}}</div> <div class="right-box-form-label">{{$t('alert.config.name')}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
@@ -115,6 +137,52 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
</div> </div>
</div> </div>
<!--type-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.list.type')}}</div>
<div class="right-box-form-content">
<el-select popper-class="config-dropdown" v-model="alertRule.type" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in typeData"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
<div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == alertRule.type" class="right-box-form-content-txt">{{item.value}}</div>
</div>
</div>
<!--linkedId-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.config.link')}}</div>
<div class="right-box-form-content">
<el-input
v-if="rightBox.isEdit"
type="text"
v-model="alertRule.linkId"
size="mini"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject.name}}</div>
<!--<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in severityData"
:key="item.key"
:label="item.value"
:value="item.key">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input
type="text"
v-model="item.name"
size="mini"
></el-input>
</span>
</el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>-->
</div>
</div>
<!--expr-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.config.expr')}}</div> <div class="right-box-form-label">{{$t('alert.config.expr')}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
@@ -128,6 +196,7 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
</div> </div>
</div> </div>
<!--for-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.config.for')}}</div> <div class="right-box-form-label">{{$t('alert.config.for')}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
@@ -137,23 +206,36 @@
placeholder="" placeholder=""
v-model="alertRule.last" v-model="alertRule.last"
size="small" size="small"
></el-input> >
<template slot="append">second</template>
</el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
</div> </div>
</div> </div>
<!--severity-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.severity')}}</div> <div class="right-box-form-label">{{$t('alert.severity')}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in severityData"
:key="item.key"
:label="item.value"
:value="item.key">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input <el-input
type="text" type="text"
v-if="rightBox.isEdit" v-model="item.name"
placeholder="" size="mini"
v-model="alertRule.severity"
size="small"
></el-input> ></el-input>
</span>
</el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
</div> </div>
</div> </div>
<!--summary-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.summary')}}</div> <div class="right-box-form-label">{{$t('alert.summary')}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
@@ -167,6 +249,7 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div>
</div> </div>
</div> </div>
<!--description-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.description')}}</div> <div class="right-box-form-label">{{$t('alert.description')}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
@@ -180,6 +263,7 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div>
</div> </div>
</div> </div>
<!--receiver-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div> <div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
@@ -191,7 +275,7 @@
:label="item.name" :label="item.name"
:value="item"> :value="item">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span> <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun"> <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input <el-input
type="text" type="text"
v-model="item.name" v-model="item.name"
@@ -217,7 +301,7 @@
<!-- begin--底部按钮--> <!-- begin--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}</div> <div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div> </div>
<!-- end--底部按钮--> <!-- end--底部按钮-->
@@ -228,9 +312,40 @@
</template> </template>
<script> <script>
export default { export default {
name: "account", name: "alert-config",
data() { data() {
return { return {
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 1,
name: 'ID',
type: 'input',
label: 'id',
disabled: false
},{
id: 2,
name: this.$t('alert.alertName'),
type: 'input',
label: 'alertName',
disabled: false
},{
id: 3,
name: this.$t('alert.list.type'),
type: 'select',
label: 'alertType',
disabled: false
},{
id: 4,
name: this.$t('alert.severity'),
type: 'selectString',
label: 'severity',
disabled: false
}],
},
searchLabel: { //搜索参数
},
rightBox: { //弹出框相关 rightBox: { //弹出框相关
show: false, show: false,
isEdit: false, //false查看，true编辑 isEdit: false, //false查看，true编辑
@@ -240,6 +355,7 @@ export default {
id: '', id: '',
alertName: '', alertName: '',
type: '', type: '',
linkObject: {id: '', name: ''},
linkId: '', linkId: '',
expr: '', expr: '',
last: '', last: '',
@@ -253,6 +369,34 @@ export default {
pageSize: 20, pageSize: 20,
total:0 total:0
}, },
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
typeData: [
{
key: 1,
value: this.$t('alert.config.typeOption.project')
},
{
key: 2,
value: this.$t('alert.config.typeOption.module')
},
{
key: 3,
value: this.$t('alert.config.typeOption.asset')
}
],
tableTitle: [ tableTitle: [
{ {
label: 'ID', label: 'ID',
@@ -267,6 +411,14 @@ export default {
label: this.$t("alert.config.expr"), label: this.$t("alert.config.expr"),
prop: 'expr', prop: 'expr',
show: true, show: true,
}, {
label: this.$t("alert.list.type"),
prop: 'type',
show: true,
}, {
label: this.$t("alert.config.link"),
prop: 'linkObject',
show: true,
}, { }, {
label: this.$t("alert.config.for"), label: this.$t("alert.config.for"),
prop: 'last', prop: 'last',
@@ -318,18 +470,32 @@ export default {
} }
}, },
methods: { methods: {
edit: function(u) { toEdit: function(u) {
this.alertRule = Object.assign({}, u); this.alertRule = Object.assign({}, u);
this.rightBox.isEdit = true; this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alert.config.editalertConfig") + " ID：" + u.id; this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + u.id;
this.rightBox.show = true; this.rightBox.show = true;
}, },
del: function(u) { del: function(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("alert/rule?ids=" + u.id).then(response => {
if (response.code === 200) {
this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
} else {
this.$message.error(response.msg);
}
})
});
}, },
toAdd: function() { toAdd: function() {
this.cleanAlertRule(); this.cleanAlertRule();
this.rightBox.isEdit = true; this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alert.config.createalertConfig"); this.rightBox.title = this.$t("alert.config.createAlertConfig");
this.rightBox.show = true; this.rightBox.show = true;
}, },
detail: function(u) { detail: function(u) {
@@ -338,10 +504,29 @@ export default {
this.rightBox.title = this.$t("alert.config.alertConfig") + " ID：" + u.id; this.rightBox.title = this.$t("alert.config.alertConfig") + " ID：" + u.id;
this.rightBox.show = true; this.rightBox.show = true;
}, },
save: function() {
if (this.alertRule.id) {
this.$put('alert/rule', this.alertRule).then(response => {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
}
});
} else {
this.$post('alert/rule', this.alertRule).then(response => {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
}
});
}
},
saveOrToEdit: function() { saveOrToEdit: function() {
if (!this.rightBox.isEdit) { if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true; this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alert.config.editalertConfig") + " ID：" + this.alertRule.id; this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;
} else {
this.save();
} }
}, },
toEditReceiver: function(item) { toEditReceiver: function(item) {
@@ -382,7 +567,9 @@ export default {
} }
}, },
getTableData: function() { getTableData: function() {
this.$get('alert/rule', this.pageObj).then(response => { this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('alert/rule', this.searchLabel).then(response => {
if (response.code == 200) { if (response.code == 200) {
this.tableData = response.data.list; this.tableData = response.data.list;
this.pageObj.total = response.data.total; this.pageObj.total = response.data.total;
@@ -391,9 +578,6 @@ export default {
}, },
esc: function() { esc: function() {
this.rightBox.show = false; this.rightBox.show = false;
},
stopFun: function() {
}, },
updateReceiverName: function(item) { updateReceiverName: function(item) {
//TODO 请求接口改名 //TODO 请求接口改名
@@ -409,6 +593,7 @@ export default {
alertName: '', alertName: '',
type: '', type: '',
linkId: '', linkId: '',
linkObject: {id: '', name: ''},
expr: '', expr: '',
last: '', last: '',
severity: '', severity: '',
@@ -418,8 +603,8 @@ export default {
} }
}, },
jumpTo(data,id) { jumpTo(data,id) {
this.$store.state.assetData.moduleData = data this.$store.state.assetData.moduleData = data;
this.$store.state.assetData.selectedData = id this.$store.state.assetData.selectedData = id;
this.$router.push({ this.$router.push({
path: "/" + data, path: "/" + data,
query: { query: {
@@ -429,16 +614,36 @@ export default {
}, },
pageNo(val) { pageNo(val) {
this.pageObj.pageNo = val; this.pageObj.pageNo = val;
this.getTableData() this.getTableData();
}, },
pageSize(val) { pageSize(val) {
this.pageObj.pageSize = val; this.pageObj.pageSize = val;
this.getTableData() this.getTableData();
},
search: function(searchObj) {
this.searchLabel = {};
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getTableData();
} }
}, },
mounted() { mounted() {
this.getTableData(); this.getTableData();
this.initReceiverData(); this.initReceiverData();
},
computed: {
sProject() {
return this.$store.state.createAlertConfig;
}
},
watch: {
sProject(n, o) {
this.$store.commit('toCreateAlertConfig', false);
this.toAdd();
}
} }
} }
</script> </script>

86
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -169,16 +169,7 @@
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini"> <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
<el-input
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="mini"
></el-input>
</div> </div>
<el-table <el-table
:data="tableData" :data="tableData"
@@ -194,13 +185,18 @@
> >
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<div v-if="item.prop == 'type'" class="account-list-options"> <div v-if="item.prop == 'type'" class="account-list-options">
<span v-if="scope.row[item.prop] == 1" class="account-list-option">Project alert</span> <span v-if="scope.row[item.prop] == 1" class="account-list-option">Project</span>
<span v-if="scope.row[item.prop] == 2" class="account-list-option">Module alert</span> <span v-if="scope.row[item.prop] == 2" class="account-list-option">Module</span>
<span v-if="scope.row[item.prop] == 3" class="account-list-option">Device alert</span> <span v-if="scope.row[item.prop] == 3" class="account-list-option">Device</span>
</div> </div>
<span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
<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'"> <div v-else-if="item.prop == 'linkObject'">
<span v-if="scope.row['type'] == 1 || scope.row['type'] == 2" class="account-list-option">{{scope.row[item.prop].name}}</span> <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="account-list-option">{{scope.row[item.prop].name}}</span>
<span v-if="scope.row['type'] == 3" class="account-list-option">{{scope.row[item.prop].host}}</span> <span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="account-list-option">{{scope.row[item.prop].host}}</span>
</div> </div>
<div v-else-if="item.prop == 'state'"> <div v-else-if="item.prop == 'state'">
<span class="account-list-option"> <span class="account-list-option">
@@ -267,12 +263,53 @@ export default {
show: true, show: true,
} }
], ],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 2,
name: this.$t('alert.alertName'),
type: 'input',
label: 'alertName',
disabled: false
},{
id: 3,
name: this.$t('alert.list.type'),
type: 'select',
label: 'alertType',
disabled: false
},{
id: 4,
name: this.$t('alert.severity'),
type: 'selectString',
label: 'severity',
disabled: false
}],
},
searchLabel: { //搜索参数
},
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
tableData: [] tableData: []
} }
}, },
methods: { methods: {
getAlertList: function() { getAlertList: function() {
this.$get('alert/message', this.pageObj).then(response => { this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('alert/message', this.searchLabel).then(response => {
if (response.code == 200) { if (response.code == 200) {
this.tableData = response.data.list this.tableData = response.data.list
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
@@ -289,6 +326,23 @@ export default {
} }
}); });
}, },
pageNo(val) {
this.pageObj.pageNo = val;
this.getAlertList();
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getAlertList();
},
search: function(searchObj) {
this.searchLabel = {};
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getAlertList();
}
}, },
mounted() { mounted() {
this.getAlertList(); this.getAlertList();

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

@@ -176,7 +176,7 @@
:label="item.name" :label="item.name"
:value="item"> :value="item">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span> <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun"> <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input <el-input
type="text" type="text"
v-model="item.name" v-model="item.name"
@@ -229,7 +229,7 @@
<!-- begin--底部按钮--> <!-- begin--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{user.userId == '' ? $t('overall.create') : $t('overall.save')}}</div> <div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{user.userId == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div> </div>
<!-- end--底部按钮--> <!-- end--底部按钮-->
@@ -364,17 +364,24 @@ export default {
this.rightBox.title = this.$t("config.account.createAccount"); this.rightBox.title = this.$t("config.account.createAccount");
this.rightBox.show = true; this.rightBox.show = true;
}, },
save: function() {
this.$post('sys/user/update', this.user).then(response => {
if (response.code === 200) {
this.rightBox.isEdit = false;
}
});
},
saveOrToEdit: function() { saveOrToEdit: function() {
if (!this.rightBox.isEdit) { if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true; this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + this.user.userId; this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + this.user.userId;
} else { } else {
this.save();
} }
}, },
jumpTo(data,id) { jumpTo(data,id) {
this.$store.state.assetData.moduleData = data this.$store.state.assetData.moduleData = data;
this.$store.state.assetData.selectedData = id this.$store.state.assetData.selectedData = id;
this.$router.push({ this.$router.push({
path: "/" + data, path: "/" + data,
query: { query: {
@@ -421,9 +428,6 @@ export default {
}, },
esc: function() { esc: function() {
this.rightBox.show = false; this.rightBox.show = false;
},
stopFun: function() {
}, },
updateReceiverName: function(item) { updateReceiverName: function(item) {
//TODO 请求接口改名 //TODO 请求接口改名

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

@@ -39,12 +39,7 @@
<span><i class="el-icon-plus"></i></span> <span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span> <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button> </el-button>
<el-input <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="mini"
></el-input>
</div> </div>
<el-table <el-table
:data="tableData" :data="tableData"
@@ -60,6 +55,10 @@
> >
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<span v-if="item.prop == 'idc'">{{scope.row[item.prop].name}}</span> <span v-if="item.prop == 'idc'">{{scope.row[item.prop].name}}</span>
<span v-else-if="item.prop == 'type'">
{{scope.row[item.prop] == '1' ? 'Global' : ''}}
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
</span>
<span v-else>{{scope.row[item.prop]}}</span> <span v-else>{{scope.row[item.prop]}}</span>
</template> </template>
</el-table-column> </el-table-column>
@@ -93,7 +92,7 @@
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span> <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
<span v-else>{{$t('overall.edit')}}</span> <span v-else>{{$t('overall.edit')}}</span>
</div> </div>
<div class="right-box-top-btn" v-if="rightBox.isEdit && promServer.id != ''"> <div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && promServer.id != ''">
<div class="right-box-btn-icon"> <div class="right-box-btn-icon">
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
@@ -109,7 +108,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box-form"> <div class="right-box-form">
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">IDC</div> <div class="right-box-form-label">DC</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small"> <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option <el-option
@@ -119,7 +118,7 @@
:label="item.name" :label="item.name"
:value="item"> :value="item">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span> <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun"> <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input <el-input
type="text" type="text"
v-model="item.name" v-model="item.name"
@@ -153,6 +152,33 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div>
</div> </div>
</div> </div>
<div class="right-box-form-row">
<div class="right-box-form-label">Port</div>
<div class="right-box-form-content">
<el-input
type="text"
v-if="rightBox.isEdit"
placeholder=""
v-model="promServer.port"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.port}}</div>
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('config.promServer.type')}}</div>
<div class="right-box-form-content">
<el-select popper-class="config-dropdown" v-model="promServer.type" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in typeData"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
<div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == promServer.type" class="right-box-form-content-txt">{{item.value}}</div>
</div>
</div>
</div> </div>
<!-- end--表单--> <!-- end--表单-->
@@ -194,60 +220,71 @@ export default {
show: true, show: true,
width: 80 width: 80
}, { }, {
label: 'IDC', label: 'DC',
prop: 'idc', prop: 'idc',
show: true, show: true,
}, { }, {
label: 'Host', label: 'Host',
prop: 'host', prop: 'host',
show: true, show: true,
}, {
label: 'Port',
prop: 'port',
show: true,
}, {
label: this.$t("config.promServer.type"),
prop: 'type',
show: true,
} }
], ],
tableData: [], tableData: [],
/*tableData: [ idcData: [],
typeData: [
{ {
id: '1', key: 1,
host: '192.168.40.241', value: 'Global'
idc: {id: '3', name: 'aerareqarew', location: 'zhaertaewr'} }, {
key: 2,
value: 'Per-Datacenter'
}
],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 1,
name: 'ID',
type: 'input',
label: 'id',
disabled: false
},{
id: 5,
name: 'DC',
type: 'dc',
label: 'dc',
disabled: false
},{
id: 6,
name: this.$t('config.promServer.type'),
type: 'select',
label: 'promType',
disabled: false
},{
id: 8,
name: this.$t('project.endpoint.host'),
type: 'input',
label: 'host',
disabled: false
},{
id: 9,
name: this.$t('project.endpoint.port'),
type: 'input',
label: 'port',
disabled: false
}],
}, },
{ searchLabel: { //搜索参数
id: '2',
host: '192.168.40.242',
idc: {id: '5', name: 'idc151654', location: 'bj'}
}, },
{
id: '3',
host: '192.168.40.243',
idc: {id: '6', name: 'idc151655', location: 'sh'}
},
{
id: '4',
host: '192.168.40.244',
idc: {id: '6', name: 'idc151655', location: 'sh'}
},
{
id: '5',
host: '192.168.40.245',
idc: {id: '7', name: 'idc151656', location: 'gd'}
},
{
id: '6',
host: '192.168.40.246',
idc: {id: '9', name: 'idc151657', location: 'fj'}
},
],*/
idcData: []
/*idcData: [
{id: '1', name: 'idc151656', location: 'gd'},
{id: '2', name: 'idc151656', location: 'gd'},
{id: '3', name: 'aerareqarew', location: 'zhaertaewr'},
{id: '4', name: 'idc151656', location: 'gd'},
{id: '5', name: 'idc151654', location: 'bj'},
{id: '6', name: 'idc151655', location: 'sh'},
{id: '7', name: 'idc151656', location: 'gd'},
{id: '8', name: 'idc151656', location: 'gd'},
{id: '9', name: 'idc151657', location: 'fj'},
]*/
} }
}, },
methods: { methods: {
@@ -258,14 +295,20 @@ export default {
this.rightBox.show = true; this.rightBox.show = true;
}, },
del: function(u) { del: function(u) {
}, this.$confirm(this.$t("tip.confirmDelete"), {
getTableData: function() { confirmButtonText: this.$t("tip.yes"),
this.$get('promServer', this.pageObj).then(response => { cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("promServer?ids=" + u.id).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.tableData = response.data.list; this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
this.pageObj.total = response.data.total this.getTableData();
} else {
this.$message.error(response.msg);
} }
}) })
});
}, },
detail: function(u) { detail: function(u) {
this.promServer = Object.assign({}, u); this.promServer = Object.assign({}, u);
@@ -285,6 +328,7 @@ export default {
if (response.code === 200) { if (response.code === 200) {
this.getTableData(); this.getTableData();
this.rightBox.isEdit = false; this.rightBox.isEdit = false;
this.esc();
} }
}); });
} else { } else {
@@ -292,6 +336,7 @@ export default {
if (response.code === 200) { if (response.code === 200) {
this.getTableData(); this.getTableData();
this.rightBox.isEdit = false; this.rightBox.isEdit = false;
this.esc();
} }
}); });
} }
@@ -316,8 +361,8 @@ export default {
item.errorMessage = ''; item.errorMessage = '';
item.oldName = item.name; item.oldName = item.name;
item.isEdit = false; item.isEdit = false;
this.getIdcData();
} else { } else {
console.info(response.msg)
this.$set(item, 'errorMessage', response.msg); this.$set(item, 'errorMessage', response.msg);
} }
}) })
@@ -341,24 +386,21 @@ export default {
this.blurEditIdc(); this.blurEditIdc();
//TODO 请求后台，删除 //TODO 请求后台，删除
}, },
getIdcData: async function() { getIdcData: function() {
console.info(1) this.$get('idc', this.pageObj).then(response => {
await this.$get('idc', this.pageObj).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.idcData = response.data.list; this.idcData = response.data.list;
this.getTableData();
}
})
for (var i = 0; i < this.idcData.length; i++) { for (var i = 0; i < this.idcData.length; i++) {
this.$set(this.idcData[i], 'oldName', this.idcData[i].name); this.$set(this.idcData[i], 'oldName', this.idcData[i].name);
this.$set(this.idcData[i], 'isEdit', false); this.$set(this.idcData[i], 'isEdit', false);
} }
this.getTableData();
}
})
}, },
esc: function() { esc: function() {
this.rightBox.show = false; this.rightBox.show = false;
},
stopFun: function() {
}, },
jumpTo(data,id) { jumpTo(data,id) {
this.$store.state.assetData.moduleData = data this.$store.state.assetData.moduleData = data
@@ -371,13 +413,14 @@ export default {
}); });
}, },
getTableData: function() { getTableData: function() {
this.$get('promServer', this.pageObj).then(response => { this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('promServer', this.searchLabel).then(response => {
if (response.code === 200) { if (response.code === 200) {
for (var i = 0; i < response.data.list.length; i++) { for (var i = 0; i < response.data.list.length; i++) {
console.info(this.idcData)
for (var j = 0; j < this.idcData.length; j++) { for (var j = 0; j < this.idcData.length; j++) {
if (response.data.list[i].idcId == this.idcData[j].id) { if (response.data.list[i].idcId == this.idcData[j].id) {
response.data.list[i].idc = this.idcData[j]; response.data.list[i].idc = Object.assign({}, this.idcData[j]);
break; break;
} }
} }
@@ -402,6 +445,15 @@ export default {
pageSize(val) { pageSize(val) {
this.pageObj.pageSize = val; this.pageObj.pageSize = val;
this.getTableData(); this.getTableData();
},
search: function(searchObj) {
this.searchLabel = {};
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getTableData();
} }
}, },
mounted: function() { mounted: function() {

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

@@ -246,17 +246,57 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content-right">
<!--metrics-->
<div class="content-right" v-if="tableShow == 2">
<div class="top-tools">
<el-button-group>
<el-button @click="tableShow = 1" class="top-tool-btn top-tool" size="mini">
<span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
</el-button>
<el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
</el-button>
</el-button-group>
<el-input
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="mini"
></el-input>
</div>
<el-table
:data="metricsTableData"
border
height="calc(100% - 65px)"
style="width: 100%;">
<el-table-column
v-for="(item, index) in metricsTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
:label="item.label"
>
<template slot-scope="scope" :column="item">
<span>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="metricsPageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
<!--endpoint-->
<div class="content-right" v-if="tableShow == 1">
<div class="top-tools"> <div class="top-tools">
<el-button-group> <el-button-group>
<el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini"> <el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
<span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span> <span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
</el-button> </el-button>
<el-button @click="" class="top-tool-btn top-tool" size="mini"> <el-button @click="tableShow = 2" class="top-tool-btn top-tool" size="mini">
<span class="top-tool-btn-txt">{{$t('project.metrics')}}</span> <span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
</el-button> </el-button>
</el-button-group> </el-button-group>
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini"> <el-button @click.stop="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
<span><i class="el-icon-plus"></i></span> <span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span> <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button> </el-button>
@@ -273,7 +313,7 @@
height="calc(100% - 65px)" height="calc(100% - 65px)"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
v-for="(item, index) in tableTitle" v-for="(item, index) in endpointTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
@@ -287,8 +327,8 @@
<el-table-column :label="$t('overall.option')" width="100"> <el-table-column :label="$t('overall.option')" width="100">
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<div class="content-right-options"> <div class="content-right-options">
<span @click="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span> <span @click.stop="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
<span @click="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span> <span @click.stop="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@@ -298,7 +338,7 @@
<!-- begin--右弹框--> <!-- begin--右弹框-->
<transition name="right-box"> <transition name="right-box">
<div class="right-box right-box-endpoint" v-if="rightBox.show"> <div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc(1)"> <div class="right-box-top-btn right-box-top-btn-full" @click="esc(1)">
@@ -314,7 +354,7 @@
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span> <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
<span v-else>{{$t('overall.edit')}}</span> <span v-else>{{$t('overall.edit')}}</span>
</div> </div>
<div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''"> <div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''" @click="del()">
<div class="right-box-btn-icon"> <div class="right-box-btn-icon">
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
@@ -343,7 +383,7 @@
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.module")}}</div> <div class="right-box-form-label">{{$t("project.module.module")}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-select @change="((val) => {changeSelectedModule(val.id)})" value-key="id" popper-class="config-dropdown" v-model="selectedModule" placeholder="" v-if="rightBox.isEdit" size="small"> <el-select @change="((val) => {changeSelectedModule(val)})" value-key="id" popper-class="config-dropdown" v-model="selectedModule" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option v-for="item in toSelectModuleData" :key="item.id" :label="item.name" :value="item"></el-option> <el-option v-for="item in toSelectModuleData" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select> </el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
@@ -396,16 +436,16 @@
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label"> <div class="right-box-form-label">
{{$t("project.endpoint.param")}} {{$t("project.endpoint.param")}}
<el-button class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button> <el-button v-if="rightBox.isEdit" class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
<el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button> <el-button v-if="rightBox.isEdit" class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
</div> </div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<div class="param-box param-box-endpoint"> <div class="param-box param-box-endpoint">
<div class="param-box-row" v-for="(item, index) in paramObj"> <div class="param-box-row" v-for="(item, index) in paramObj">
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input> <el-input :disabled="!rightBox.isEdit" placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
<span class="param-box-row-eq">=</span> <span class="param-box-row-eq">=</span>
<el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input> <el-input :disabled="!rightBox.isEdit" placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span> <span v-if="rightBox.isEdit" class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
</div> </div>
</div> </div>
</div> </div>
@@ -423,7 +463,7 @@
<!-- begin--子弹框--> <!-- begin--子弹框-->
<transition name="right-sub-box"> <transition name="right-sub-box">
<div class="right-sub-box" v-if="rightSubBox.show"> <div class="right-sub-box" @click.stop v-if="rightSubBox.show">
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box-title">{{rightSubBox.title}}</div> <div class="right-box-title">{{rightSubBox.title}}</div>
<!-- end--标题--> <!-- end--标题-->
@@ -484,7 +524,7 @@
<!-- begin--project弹框--> <!-- begin--project弹框-->
<transition name="right-box"> <transition name="right-box">
<div class="right-box right-box-endpoint" v-if="projectRightBox.show"> <div class="right-box right-box-endpoint" v-if="projectRightBox.show" @click.stop>
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc(2)"> <div class="right-box-top-btn right-box-top-btn-full" @click="esc(2)">
@@ -499,7 +539,7 @@
</div> </div>
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</div> </div>
<div class="right-box-top-btn" v-if="project.id != ''"> <div class="right-box-top-btn" v-if="project.id != ''" @click="projectDel">
<div class="right-box-btn-icon"> <div class="right-box-btn-icon">
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
@@ -518,27 +558,16 @@
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.project.projectName")}}</div> <div class="right-box-form-label">{{$t("project.project.projectName")}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-input <el-input v-if="!projectRightBox.isCreate" placeholder="" maxlength="64" show-word-limit v-model="project.name" size="small"></el-input>
placeholder="" <el-input v-if="projectRightBox.isCreate" placeholder="" maxlength="64" show-word-limit v-model="newProject.name" size="small"></el-input>
maxlength="64"
show-word-limit
v-model="project.name"
size="small"
></el-input>
</div> </div>
</div> </div>
<!--description--> <!--description-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.project.description")}}</div> <div class="right-box-form-label">{{$t("project.project.description")}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-input <el-input v-if="!projectRightBox.isCreate" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="project.remark" size="small"></el-input>
type="textarea" <el-input v-if="projectRightBox.isCreate" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="newProject.remark" size="small"></el-input>
placeholder=""
maxlength="1024"
show-word-limit
v-model="project.remark"
size="small"
></el-input>
</div> </div>
</div> </div>
</div> </div>
@@ -554,7 +583,8 @@
<!-- begin--module弹框--> <!-- begin--module弹框-->
<transition name="right-box"> <transition name="right-box">
<div class="right-box right-box-endpoint" v-if="moduleRightBox.show"> <div class="right-box right-box-endpoint" v-if="moduleRightBox.show" @click.stop>
<el-scrollbar style="height: 100%">
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc(3)"> <div class="right-box-top-btn right-box-top-btn-full" @click="esc(3)">
@@ -569,7 +599,7 @@
</div> </div>
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</div> </div>
<div class="right-box-top-btn" v-if="currentModule.id != ''"> <div class="right-box-top-btn" v-if="currentModule.id != '' && !moduleRightBox.isCreate" @click="moduleDel">
<div class="right-box-btn-icon"> <div class="right-box-btn-icon">
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
@@ -588,36 +618,28 @@
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.project.project")}}</div> <div class="right-box-form-label">{{$t("project.project.project")}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-select value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small"> <el-select v-if="!moduleRightBox.isCreate" value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small">
<el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item"></el-option> <el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select> </el-select>
<el-select v-if="moduleRightBox.isCreate" popper-class="config-dropdown" v-model="newModule.projectId" placeholder="" size="small">
<el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</div> </div>
</div> </div>
<!--name--> <!--name-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.moduleName")}}</div> <div class="right-box-form-label">{{$t("project.module.moduleName")}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-input <el-input v-if="!moduleRightBox.isCreate" placeholder="" maxlength="64" show-word-limit v-model="currentModule.name" size="small"></el-input>
placeholder="" <el-input v-if="moduleRightBox.isCreate" placeholder="" maxlength="64" show-word-limit v-model="newModule.name" size="small"></el-input>
maxlength="64"
show-word-limit
v-model="currentModule.name"
size="small"
></el-input>
</div> </div>
</div> </div>
<!--description--> <!--description-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.description")}}</div> <div class="right-box-form-label">{{$t("project.module.description")}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-input <el-input v-if="!moduleRightBox.isCreate" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="currentModule.remark" size="small"></el-input>
type="textarea" <el-input v-if="moduleRightBox.isCreate" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="newModule.remark" size="small"></el-input>
placeholder=""
maxlength="1024"
show-word-limit
v-model="currentModule.remark"
size="small"
></el-input>
</div> </div>
</div> </div>
<!--tip--> <!--tip-->
@@ -634,22 +656,16 @@
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.endpoint.port")}}</div> <div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-input <el-input v-if="!moduleRightBox.isCreate" placeholder="" v-model="currentModule.port" size="small"></el-input>
placeholder="" <el-input v-if="moduleRightBox.isCreate" placeholder="" v-model="newModule.port" size="small"></el-input>
v-model="currentModule.port"
size="small"
></el-input>
</div> </div>
</div> </div>
<!--path--> <!--path-->
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.endpoint.path")}}</div> <div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-input <el-input v-if="!moduleRightBox.isCreate" placeholder="" v-model="currentModule.path" size="small"></el-input>
placeholder="" <el-input v-if="moduleRightBox.isCreate" placeholder="" v-model="newModule.path" size="small"></el-input>
v-model="currentModule.path"
size="small"
></el-input>
</div> </div>
</div> </div>
<!--param--> <!--param-->
@@ -674,9 +690,10 @@
<!-- begin--底部按钮--> <!-- begin--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<div @click="esc(3)" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="moduleSave" class="right-box-bottom-btn right-box-bottom-btn-50">{{currentModule.id == '' ? $t('overall.create') : $t('overall.save')}}</div> <div @click="esc(3)" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="moduleSave" class="right-box-bottom-btn right-box-bottom-btn-50">{{currentModule.id == '' && moduleRightBox.isCreate ? $t('overall.create') : $t('overall.save')}}</div>
</div> </div>
<!-- end--底部按钮--> <!-- end--底部按钮-->
</el-scrollbar>
</div> </div>
</transition> </transition>
<!-- end--module弹框--> <!-- end--module弹框-->
@@ -688,11 +705,15 @@ export default {
name: "project", name: "project",
data() { data() {
return { return {
tableShow: 1, // 1.endpoint; 2.metrics
projectRightBox: { projectRightBox: {
show: false, show: false,
title: '' title: '',
isCreate: false
}, },
project: {id: '', name: '', remark: ''}, project: {id: '', name: '', remark: ''},
newProject: {id: '', name: '', remark: ''},
newModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []},
rightBox: { //弹出框相关 rightBox: { //弹出框相关
show: false, show: false,
isEdit: false, //false查看，true编辑 isEdit: false, //false查看，true编辑
@@ -719,6 +740,11 @@ export default {
pageSize: 11, pageSize: 11,
total: 0 total: 0
}, },
metricsPageObj: {
pageNo: 1,
pageSize: 20,
total: 0
},
endpoint: { endpoint: {
id: '', id: '',
host: '', host: '',
@@ -727,26 +753,31 @@ export default {
path: '', path: '',
asset: {id: '', name: '', host: ''}, asset: {id: '', name: '', host: ''},
project: {id: '', name: ''}, project: {id: '', name: ''},
module: {id: '', name: '', param: '', paramObj: {}} module: {id: '', name: '', param: '', paramObj: {}, projectId: ''},
moduleId: '',
assetId: ''
}, },
moduleRightBox: { moduleRightBox: {
show: false, show: false,
title: '' title: '',
isCreate: false
}, },
currentModule: { //左侧列表当前选中的module currentModule: { //左侧列表当前选中的module
id: '', id: '',
name: '' name: '',
projectId: ''
}, },
selectedModule: { //侧滑框中选中的module selectedModule: { //endpoint侧滑框中选中的module
id: '', id: '',
name: '' name: '',
projectId: ''
}, },
selectedAsset: { //侧滑框中选中的asset selectedAsset: { //endpoint侧滑框中选中的asset
id: '', id: '',
host: '', host: '',
sn: '' sn: ''
}, },
tableTitle: [ endpointTableTitle: [
{ {
label: this.$t("project.endpoint.endpointId"), label: this.$t("project.endpoint.endpointId"),
prop: 'id', prop: 'id',
@@ -784,7 +815,31 @@ export default {
moduleData: [], //左侧列表的module信息 moduleData: [], //左侧列表的module信息
toSelectModuleData: [], //侧滑框中可选的module toSelectModuleData: [], //侧滑框中可选的module
paramObj: [], //侧滑框中的param信息 paramObj: [], //侧滑框中的param信息
assetData: [] //侧滑框中可选的asset assetData: [], //侧滑框中可选的asset
metricsTableData: [
{
name: 'Topic.msg',
type: 'Counter',
desc: '10000'
}
],
metricsTableTitle: [
{
label: this.$t("project.metrics.name"),
prop: 'name',
show: true,
},
{
label: this.$t("project.metrics.type"),
prop: 'type',
show: true,
},
{
label: this.$t("project.metrics.description"),
prop: 'desc',
show: true,
},
]
} }
}, },
methods: { methods: {
@@ -816,10 +871,21 @@ export default {
}); });
}, },
// 获取module、endpoint弹框中project下拉框数据 // 获取module、endpoint弹框中project下拉框数据
getProjectData: function() { getProjectData: function(name) {
this.$get('project').then(response => { this.$get('project').then(response => {
if (response.code === 200) { if (response.code === 200) {
this.projectData = response.data.list; this.projectData = response.data.list;
if (name) {
for (let i = 0; i < this.projectData.length; i++) {
if (this.projectData[i].name == name) {
this.project = this.projectData[i];
this.$store.commit('setProject', this.project);
break;
}
}
} else {
this.project = this.projectData[0];
}
} }
}); });
}, },
@@ -840,6 +906,8 @@ export default {
// endpoint弹框中的asset子弹框里asset选择事件 // endpoint弹框中的asset子弹框里asset选择事件
selectAsset: function(obj) { selectAsset: function(obj) {
this.selectedAsset = obj; this.selectedAsset = obj;
this.endpoint.host = obj.host;
this.endpoint.assetId = obj.id;
}, },
// endpoint弹框中的asset子弹框搜索 // endpoint弹框中的asset子弹框搜索
searchAsset: function() { searchAsset: function() {
@@ -858,7 +926,7 @@ export default {
this.$get('module', {projectId: this.$store.state.projectData.id}).then(response => { this.$get('module', {projectId: this.$store.state.projectData.id}).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.moduleData = response.data.list; this.moduleData = response.data.list;
for (var i = 0; i < response.data.list.length; i++) { for (let i = 0; i < response.data.list.length; i++) {
try { try {
var tempObj = JSON.parse(response.data.list[i].param); var tempObj = JSON.parse(response.data.list[i].param);
} catch (err) { } catch (err) {
@@ -877,7 +945,6 @@ export default {
this.endPointTableData = []; this.endPointTableData = [];
this.pageObj.total = 0; this.pageObj.total = 0;
} }
} }
}); });
}, },
@@ -905,12 +972,12 @@ export default {
// 左侧module列表点击事件 // 左侧module列表点击事件
changeListModule: function(module) { changeListModule: function(module) {
this.currentModule = Object.assign({}, module); this.currentModule = Object.assign({}, module);
this.moduleRightBox.show = false; this.esc(3);
this.getEndPointTableData(); this.getEndPointTableData();
}, },
// endpoint弹框中module下拉框点击事件 // endpoint弹框中module下拉框点击事件
changeSelectedModule: function(moduleId) { changeSelectedModule: function(module) {
if (moduleId == this.endpoint.moduleId) { if (module.id == this.endpoint.moduleId) {
try { try {
this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj)); this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
} catch(err) { } catch(err) {
@@ -925,6 +992,8 @@ export default {
console.info(err); console.info(err);
} }
} }
this.endpoint.port = module.port;
this.endpoint.path = module.path;
}, },
// 打开endpoint编辑页 // 打开endpoint编辑页
toEdit: function(endpoint) { toEdit: function(endpoint) {
@@ -956,20 +1025,85 @@ export default {
this.moduleRightBox.title = this.$t('project.module.editModule') + " ID：" + module.id; this.moduleRightBox.title = this.$t('project.module.editModule') + " ID：" + module.id;
}, },
// 删除endpoint // 删除endpoint
del: function(u) { del: function() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("endpoint?ids=" + this.endpoint.id).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getEndPointTableData();
} else {
this.$message.error(response.msg);
}
})
});
},
// 删除module
moduleDel: function() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("module?ids=" + this.currentModule.id).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.esc(3);
this.getModuleData();
} else {
this.$message.error(response.msg);
}
})
});
},
projectDel: function() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("project?ids=" + this.project.id).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.$store.commit('projectRightBoxShow', false);
this.getProjectData();
setTimeout(() => {
this.getModuleData();
}, 50);
if (this.projectData.length > 0) {
this.$store.commit('setProject', this.projectData[0]);
}
this.$store.commit('projectListReloadChange', true);
} else {
this.$message.error(response.msg);
}
})
});
}, },
// 打开endpoint新增页 // 打开endpoint新增页
toAdd: function() { toAdd: function() {
this.cleanEndpoint(); this.cleanEndpoint();
this.paramObj = []; this.endpoint.project = Object.assign({}, this.project);
this.toSelectModuleData = []; this.paramObj = Object.assign([], this.currentModule.paramObj);
this.getToSelectModuleData(this.project.id);
this.selectedModule = Object.assign({}, this.currentModule);
this.endpoint.port = this.selectedModule.port;
this.endpoint.path = this.selectedModule.path;
this.rightBox.isEdit = true; this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.endpoint.createEndpoint"); this.rightBox.title = this.$t("project.endpoint.createEndpoint");
this.rightBox.show = true; this.rightBox.show = true;
},
toAddProject: function() {
}, },
// 打开endpoint详情页 // 打开endpoint详情页
detail: function(u) { detail: function(u) {
this.endpoint = Object.assign({}, u); this.endpoint = Object.assign({}, u);
this.paramObj = Object.assign([], u.paramObj);
this.rightBox.isEdit = false; this.rightBox.isEdit = false;
this.rightBox.title = this.$t("project.endpoint.endpoint") + " ID：" + u.id; this.rightBox.title = this.$t("project.endpoint.endpoint") + " ID：" + u.id;
this.rightBox.show = true; this.rightBox.show = true;
@@ -978,25 +1112,91 @@ export default {
saveOrToEdit: function() { saveOrToEdit: function() {
if (!this.rightBox.isEdit) { if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true; this.rightBox.isEdit = true;
this.getToSelectModuleData(this.endpoint.project.id);
this.selectedModule = Object.assign({}, this.currentModule);
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + this.endpoint.id; this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + this.endpoint.id;
} else {
this.save();
} }
}, },
// 保存project // 保存project
projectSave: function() { projectSave: function() {
if (!this.projectRightBox.isCreate) {
this.$put('project', this.project).then(response => { this.$put('project', this.project).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$store.commit('projectListReload', true); this.$store.commit('setProject', this.project);
this.projectRightBox.show = false; this.$store.commit('projectListReloadChange', true);
this.$store.commit('projectRightBoxShow', false);
} }
}); });
} else {
this.$post('project', this.newProject).then(response => {
if (response.code === 200) {
this.projectRightBox.isCreate = false;
this.getProjectData(this.newProject.name);
this.$store.commit('projectListReloadChange', true);
this.$store.commit('projectRightBoxShow', false);
this.getModuleData();
this.newProject = {id:'', name:'', remark:''};
}
});
}
}, },
// 保存module // 保存module
moduleSave: function() { moduleSave: function() {
if (!this.moduleRightBox.isCreate) {
this.currentModule.param = this.paramToJson();
this.currentModule.projectId = this.currentModule.project.id;
this.$put('module', this.currentModule).then(response => {
if (response.code === 200) {
this.esc(3);
this.getModuleData();
}
});
} else {
this.newModule.param = this.paramToJson();
this.$post('module', this.newModule).then(response => {
if (response.code === 200) {
this.esc(3);
this.getModuleData();
this.moduleRightBox.isCreate = false;
}
});
}
}, },
// 保存endpoint // 保存endpoint
save: function() { save: function() {
this.endpoint.param = this.paramToJson();
this.endpoint.moduleId = this.selectedModule.id;
if (this.endpoint.id) {
this.$put('endpoint', this.endpoint).then(response => {
if (response.code === 200) {
this.rightBox.isEdit = false;
this.esc(1);
this.getEndPointTableData();
}
});
} else {
this.$post('endpoint', this.endpoint).then(response => {
if (response.code === 200) {
this.rightBox.isEdit = false;
this.esc(1);
this.getEndPointTableData();
}
});
}
},
paramToJson: function() {
let tempParam = {};
for (let i = 0; i < this.paramObj.length; i++) {
eval('tempParam.' + this.paramObj[i].key + '="' + this.paramObj[i].value + '"');
}
let jsonString = JSON.stringify(tempParam);
if (jsonString == '{}') {
return "";
} else {
return jsonString;
}
}, },
// 清除module、endpoint弹框中的param // 清除module、endpoint弹框中的param
clearAllParam: function() { clearAllParam: function() {
@@ -1042,13 +1242,18 @@ export default {
this.pageObj.pageSize = val; this.pageObj.pageSize = val;
this.getEndPointTableData(); this.getEndPointTableData();
}, },
// endpoint弹框的子弹框顶部搜索条件选中事件 // endpoint弹框的asset子弹框顶部搜索条件选中事件
dropdownSelect: function(label) { dropdownSelect: function(label) {
this.assetSearch.label = label; this.assetSearch.label = label;
this.assetSearch.dropdownShow = false; this.assetSearch.dropdownShow = false;
} }
}, },
mounted: function() { created: function() {
window.addEventListener('click', () => {
this.esc(1);
this.$store.commit('projectRightBoxShow', false);
this.esc(3);
});
this.getModuleData(); this.getModuleData();
this.getProjectData(); this.getProjectData();
this.getAssetData(); this.getAssetData();
@@ -1059,17 +1264,53 @@ export default {
}, },
projectBoxShow() { projectBoxShow() {
return this.$store.state.projectBoxShow; return this.$store.state.projectBoxShow;
} },
toCreateProject() {
return this.$store.state.createProject;
},
toCreateModule() {
return this.$store.state.createModule;
},
toCreateEndpoint() {
return this.$store.state.createEndpoint;
},
}, },
watch: { watch: {
sProject(n, o) { sProject(n, o) {
this.project = Object.assign({}, n); this.project = Object.assign({}, n);
this.esc(3);
this.esc(1);
this.projectRightBox.title = this.$t("project.project.editProject") + " ID：" + n.id; this.projectRightBox.title = this.$t("project.project.editProject") + " ID：" + n.id;
this.getModuleData(); this.getModuleData();
}, },
projectBoxShow(n, o) { projectBoxShow(n, o) {
console.info(n)
this.projectRightBox.show = n; this.projectRightBox.show = n;
},
toCreateProject(n ,o) {
if (n) {
this.$store.commit('toCreateProject', false);
this.projectRightBox.isCreate = true;
this.projectRightBox.title = this.$t('project.project.createProject');
}
},
toCreateModule(n ,o) {
if (n) {
this.$store.commit('toCreateModule', false);
this.moduleRightBox.show = true;
this.moduleRightBox.isCreate = true;
this.moduleRightBox.title = this.$t('project.module.createModule');
this.newModule = {id: '', name: '', projectId: this.project.id, project: this.project, port: '', path: '', param: '', paramObj: []};
this.paramObj = [];
}
},
toCreateEndpoint(n, o) {
if (n) {
this.$store.commit('toCreateEndpoint', false);
this.cleanEndpoint();
this.rightBox.show = true;
this.rightBox.isEdit = true;
this.rightBox.title = this.$t('project.endpoint.createEndpoint');
}
} }
} }
} }

9
nezha-fronted/src/http.js
View File

@@ -3,8 +3,8 @@ import router from './router'
import qs from 'qs' //引入数据格式化 import qs from 'qs' //引入数据格式化
//axios.defaults.baseURL = 'http://localhost:8088/nz-admin'; //axios.defaults.baseURL = 'http://localhost:8088/nz-admin';
axios.defaults.baseURL = 'http://192.168.41.69:8080/nz-admin'; //axios.defaults.baseURL = 'http://192.168.41.69:8080/nz-admin';
// axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin'; axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin';
axios.interceptors.request.use(config => { axios.interceptors.request.use(config => {
// config.headers = { // config.headers = {
@@ -41,7 +41,7 @@ export function get(url, params) {
}).then(response => { }).then(response => {
resolve(response.data) resolve(response.data)
}).catch(err => { }).catch(err => {
resolve(err.response.data) //resolve(err.response.data)
}) })
}) })
} }
@@ -51,8 +51,7 @@ export function post(url, params) {
axios.post(url, params).then(response => { axios.post(url, params).then(response => {
resolve(response.data) resolve(response.data)
}).catch(err => { }).catch(err => {
console.info(err) resolve(err.response.data);
resolve('失败')
}) })
}) })
} }

13
nezha-fronted/src/main.js
View File

@@ -15,17 +15,20 @@ import axios from 'axios';
import {post, get, put, del} from './http.js' import {post, get, put, del} from './http.js'
import Pagination from "./components/common/pagination"; //引入全局分页组件 import Pagination from "./components/common/pagination"; //引入全局分页组件
Vue.component("Pagination", Pagination); import searchInput from "./components/common/searchInput"; //搜索框组件
Vue.prototype.$axios = axios Vue.component("Pagination", Pagination);
Vue.component("searchInput", searchInput);
Vue.prototype.$axios = axios;
Vue.prototype.$post = post; Vue.prototype.$post = post;
Vue.prototype.$get = get; Vue.prototype.$get = get;
Vue.prototype.$put = put; Vue.prototype.$put = put;
Vue.prototype.$delete = del; Vue.prototype.$delete = del;
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.use(ElementUI) Vue.use(ElementUI);
Vue.use(Vuex) Vue.use(Vuex);
const clickoutside = { const clickoutside = {

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

@@ -13,7 +13,11 @@ const store = new Vuex.Store({
name: '' name: ''
}, },
projectBoxShow: false, projectBoxShow: false,
projectListReload: false projectListReload: false,
createProject: false,
createModule: false,
createEndpoint: false,
createAlertConfig: false,
}, },
getters: { getters: {
}, },
@@ -25,9 +29,21 @@ const store = new Vuex.Store({
projectRightBoxShow(state, show) { projectRightBoxShow(state, show) {
state.projectBoxShow = show; state.projectBoxShow = show;
}, },
projectListReload(state, reload) { projectListReloadChange(state, reload) {
state.projectListReload = reload; state.projectListReload = reload;
} },
toCreateProject(state, status) {
state.createProject = status;
},
toCreateModule(state, status) {
state.createModule = status;
},
toCreateEndpoint(state, status) {
state.createEndpoint = status;
},
toCreateAlertConfig(state, status) {
state.createAlertConfig = status;
},
}, },
actions: { actions: {
} }