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

feat: 页面部分样式抽取、project部分功能、部分前后端交互

Browse Source 
1.config、alert页面样式抽取
2.project部分静态页面
3.config、alert部分前后端交互
This commit is contained in:
chenjinsong
2019-12-10 17:00:28 +08:00
parent 0f8707d9a5
commit 5529f63d52
12 changed files with 823 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,31 @@ html {
.content-box {
height: 100%;
}
/*通用*/
.margin-l-5 {
margin-left: 5px !important;
}
.margin-r-5 {
margin-right: 5px !important;
}
.margin-t-5 {
margin-top: 5px !important;
}
.margin-b-5 {
margin-bottom: 5px !important;
}
.margin-l-10 {
margin-left: 10px !important;
}
.margin-r-10 {
margin-right: 10px !important;
}
.margin-t-10 {
margin-top: 10px !important;
}
.margin-b-10 {
margin-bottom: 10px !important;
}
/*侧滑文字*/
.el-form-item .el-form-item__label{
font-size: 10px;
@@ -27,6 +52,126 @@ html {
width: 90%;
}
/* begin--左侧列表*/
.content-left {
float: left;
width: 322px;
height: 100%;
background-color: #eeeeee;
border-right: 1px solid #dadada;
padding: 0 12px 0 11px;
box-sizing: border-box;
font-size: 14px;
}
.sidebar-title {
padding: 20px 0 0 15px;
color: #5e5e5e;
}
.sidebar-info {
margin-top: 27px;
border: 1px solid #cacaca;
border-radius: 6px;
height: calc(90vh - 55px);
width: 100%;
}
.sidebar-info-top {
border-radius: 6px 6px 0 0;
}
.sidebar-info-item {
height: 39px;
line-height: 39px;
padding: 0 8px 0 32px;
border-bottom: 1px solid #cacaca;
cursor: pointer;
color: #5e5e5e;
}
.sidebar-info-item-active {
background-color: #5e5e5e;
color: white;
}
.sidebar-info-foot {
border-radius: 6px 6px 0 0;
}
/* end--左侧列表*/
/* begin--右侧内容*/
/* begin--顶部工具栏*/
.top-tools {
padding: 22px 0 13px 0;
}
.top-tools .el-button--mini {
padding-top: 6px;
padding-bottom: 6px;
}
.top-tools .top-tool {
float: left;
}
.top-tools .top-tool-right {
float: right;
}
.top-tools .top-tool-search {
width: 220px;
}
.top-tools .el-button-group {
float: left;
}
.top-tools .top-tool-btn {
border-radius: 5px;
width: 100px;
}
.top-tools .top-tool-btn:focus, .top-tools .top-tool-btn:hover {
color: #606266;
background-color: white;
}
.top-tools .top-tool-btn-active {
color: white;
background-color: #656565;
}
.top-tools .top-tool-btn-active:focus, .top-tools .top-tool-btn-active:hover {
color: white;
background-color: #656565;
}
.top-tools .top-tool-btn-txt {
font-size: 14px;
}
/* end--顶部工具栏*/
/* start--内容*/
.content-right>.el-table{
border-radius: 4px;
border: 1px solid #D7D7D7;
margin-top: 30px;
}
.content-right {
height: calc(100% - 131px);
margin-left: 322px;
padding: 0 15px 0 25px;
}
/* end--内容*/
/* start--分页*/
.pagination {
padding-top: 18px;
text-align: center;
}
/* end--分页*/
/* begin--右弹框滑入滑出动画*/
@keyframes slide-in-from-right {
from {right: -800px}
to {right: 0}
}
@keyframes slide-out-to-right {
from {right: 0}
to {right: -800px}
}
.right-box-enter-active {
animation: slide-in-from-right 0.4s;
}
.right-box-leave-active {
animation: slide-out-to-right 0.4s;
}
/* end--右弹框滑入滑出动画*/
/* end--右侧内容*/
/* start--自定义可编辑的el-select下拉框样式*/
.config-dropdown {
width: 550px;
}
@@ -53,3 +198,4 @@ html {
.config-dropdown-error-message {
color: #F98D9A;
}
/* end--自定义可编辑的el-select下拉框样式*/

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

@@ -29,13 +29,13 @@
</el-submenu>
<el-submenu index="4">
<template slot="title">
<div @click="jumpTo('alarmList')">{{$t('overall.alarm')}}</div>
<div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
</template>
<el-menu-item index="1">
<div @click="jumpTo('alarmList')">{{$t('alarm.alarmList')}}</div>
<div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
</el-menu-item>
<el-menu-item index="2">
<div @click="jumpTo('alarmConfig')">{{$t('alarm.alarmConfig')}}</div>
<div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
</el-menu-item>
</el-submenu>
<el-submenu index="5">

38
nezha-fronted/src/components/common/language/cn.js
View File

@@ -3,7 +3,7 @@ const cn = {
overall: {
dashboard: '仪表盘',
project: '工程',
alarm: "告警",
alert: "告警",
asset: '资产',
config: '设置',
create: '新增',
@@ -12,7 +12,9 @@ const cn = {
esc: '取消',
cancel: '取消',
save: '保存',
search: '搜索'
search: '搜索',
add: '新增',
option: "操作"
},
asset: {
tableTitle: {
@@ -22,7 +24,7 @@ const cn = {
ip: 'IP',
assetState: '资产状态',
module: 'Module',
alarm: 'Alarm',
alert: 'alert',
dataCenter: '数据中心',
cabinet: '机柜',
model: '型号',
@@ -36,7 +38,7 @@ const cn = {
projectName: '项目名称',
moduleName: 'Module Name',
endPoint: 'EndPoint',
alarm: 'Alarm',
alert: 'alert',
},
},
config: {
@@ -62,11 +64,12 @@ const cn = {
editProm: "修改Prometheus Server"
},
},
alarm: {
alarmList: "告警列表",
alarmConfig: "告警设置",
alert: {
alert: "告警",
alertList: "告警列表",
alertConfig: "告警设置",
list: {
alarmName: "告警名称",
alertName: "告警名称",
linkedId: "关联ID",
severity: "告警级别",
type: "类型",
@@ -78,13 +81,26 @@ const cn = {
charts: "图表",
//表内容
projectAlarm: "Project Alarm",
moduleAlarm: "Module Alarm",
deviceAlarm: "Device Alarm",
projectalert: "Project Alert",
modulealert: "Module Alert",
devicealert: "Device Alert",
pending: "Pending",
expired: "Expired"
}
},
project: {
endpoint: {
endpoint: "Endpoint",
endpointId: "Endpoint ID",
host: "Host",
port: "Port",
param: "Param",
path: "Path",
asset: "Asset",
lastUpdate: "Last Update",
},
metrics: "Metrics",
},
...zhLocale
}

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

@@ -3,7 +3,7 @@ const en = {
overall:{
dashboard:'dashboard',
project:'project',
alarm: "alarm",
alert: "alert",
asset:'asset',
config:'config',
create: 'Create',
@@ -12,7 +12,9 @@ const en = {
esc: 'Esc',
cancel: 'Cancel',
save: 'Save',
search: 'Search'
search: 'Search',
add: "Add",
option: "Option"
},
asset:{
tableTitle: {
@@ -22,7 +24,7 @@ const en = {
ip: 'IP',
assetState: '资产状态',
module: 'Module',
alarm: 'Alarm',
alert: 'alert',
dataCenter: '数据中心',
cabinet: '机柜',
model: '型号',
@@ -36,11 +38,13 @@ const en = {
projectName: '项目名称',
moduleName: 'Module Name',
endPoint: 'EndPoint',
alarm: 'Alarm',
alert: 'alert',
},
},
config: {
config: "Config",
account: {
accountList: "Account List",
//列表表头
account: "Account",
language: "Language",
@@ -56,16 +60,18 @@ const en = {
notCurrentlySupport: 'Not currently supported'
},
promServer: {
promServerList: "Prometheus Server",
//侧滑框
promId: "Prometheus Server ID",
createProm: "Create Prometheus Server",
editProm: "Edit Prometheus Server"
},
},
alarm: {
alarmList: "Alarm List",
alarmConfig: "Alarm Config",
alarmName: "Alarm Name",
alert: {
alert: "Alert",
alertList: "Alert List",
alertConfig: "Alert Config",
alertName: "Alert Name",
severity: "Severity",
description: "Desc",
summary: "Summary",
@@ -79,9 +85,9 @@ const en = {
charts: "Charts",
//表内容
projectAlarm: "Project Alarm",
moduleAlarm: "Module Alarm",
deviceAlarm: "Device Alarm",
projectalert: "Project Alert",
modulealert: "Module Alert",
devicealert: "Device Alert",
pending: "Pending",
expired: "Expired"
},
@@ -91,11 +97,26 @@ const en = {
expr: "Expr",
for: "For",
option: "Option",
alarmConfig: "Alarm Config",
createAlarmConfig: "Create Alarm Config",
editAlarmConfig: "Edit Alarm Config",
alertConfig: "Alert Config",
createalertConfig: "Create Alert Config",
editalertConfig: "Edit Alert Config",
}
},
project: {
endpoint: {
createEndpoint: "Create Endpoint",
editEndpoint: "Edit Endpoint",
endpoint: "Endpoint",
endpointId: "Endpoint ID",
host: "Host",
port: "Port",
param: "Param",
path: "Path",
asset: "Asset",
lastUpdate: "Last Update",
},
metrics: "Metrics"
},
...enLocale
}

6
nezha-fronted/src/components/common/pagination.vue
View File

@@ -55,10 +55,4 @@ export default {
</script>
<style>
.pagination {
display: inline-block;
margin-top: 10px;
margin-left: 50%;
transform: translate(-50%);
}
</style>

151
nezha-fronted/src/components/page/alarm/config.vue → nezha-fronted/src/components/page/alert/config.vue
View File

@@ -2,43 +2,6 @@
.account {
height: 100%;
}
.content-left {
float: left;
width: 370px;
height: 100%;
}
.sidebar-title {
padding-left: 30px;
padding-top: 20px;
}
.sidebar-info {
margin-top: 20px;
border: 1px solid #acacac;
border-radius: 8px;
height: calc(90vh - 55px);
width: calc(100% - 30px);
}
.sidebar-info-header {
background: #acacac;
text-align: center;
line-height: 50px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 60px;
width: 100%;
}
.sidebar-info-footer {
padding-top: 15px;
padding-left: 15px;
}
.account-list {
height: calc(100% - 131px);
margin-left: 370px;
padding: 0 15px 0 0;
}
.account-list-option {
cursor: pointer;
display: inline-block;
@@ -56,11 +19,6 @@
.account-list-option .el-icon-view:hover {
color: #409EFF;
}
.account-list-search {
float: right;
width: 220px;
margin: 15px 0;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
@@ -182,41 +140,29 @@
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/
/* begin--右弹框滑入滑出动画*/
@keyframes slide-in-from-right {
from {right: -800px}
to {right: 0}
}
@keyframes slide-out-to-right {
from {right: 0}
to {right: -800px}
}
.right-box-enter-active {
animation: slide-in-from-right 0.4s;
}
.right-box-leave-active {
animation: slide-out-to-right 0.4s;
}
/* end--右弹框滑入滑出动画*/
</style>
<template>
<div class="account">
<div class="content-left">
<div class="sidebar-title">
<div>Config</div>
<div class="sidebar-title">{{$t('alert.alert')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-footer" v-if="sidebarState"></div>
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
<div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
</div>
</div>
</div>
<div class="account-list">
<div class="content-right">
<div class="top-tools">
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool top-tool-right margin-l-10" size="mini">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
<el-input
class="account-list-search"
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="small"
size="mini"
></el-input>
</div>
<el-table
:data="tableData"
border
@@ -236,21 +182,6 @@
<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>
</div>
<!--<span v-else-if="item.prop == 'lang'">
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
{{scope.row[item.prop] == 'zh' ? '中文' : ''}}
{{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
</span>
<span v-else-if="item.prop == 'receiver'">
<template v-for="rec in scope.row[item.prop]">{{rec.name}}&nbsp;&nbsp;</template>
</span>
<span v-else-if="item.prop == 'status'">
<el-switch
v-model="scope.row[item.prop]"
active-value="1"
inactive-value="0">
</el-switch>
</span>-->
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
@@ -291,7 +222,7 @@
<!-- begin--表单-->
<div class="right-box-form">
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alarm.config.name')}}</div>
<div class="right-box-form-label">{{$t('alert.config.name')}}</div>
<div class="right-box-form-content">
<el-input
v-if="rightBox.isEdit"
@@ -306,7 +237,7 @@
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alarm.config.expr')}}</div>
<div class="right-box-form-label">{{$t('alert.config.expr')}}</div>
<div class="right-box-form-content">
<el-input
type="textarea"
@@ -319,7 +250,7 @@
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alarm.config.for')}}</div>
<div class="right-box-form-label">{{$t('alert.config.for')}}</div>
<div class="right-box-form-content">
<el-input
type="text"
@@ -332,7 +263,7 @@
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alarm.severity')}}</div>
<div class="right-box-form-label">{{$t('alert.severity')}}</div>
<div class="right-box-form-content">
<el-input
type="text"
@@ -345,7 +276,7 @@
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alarm.summary')}}</div>
<div class="right-box-form-label">{{$t('alert.summary')}}</div>
<div class="right-box-form-content">
<el-input
type="text"
@@ -358,7 +289,7 @@
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alarm.description')}}</div>
<div class="right-box-form-label">{{$t('alert.description')}}</div>
<div class="right-box-form-content">
<el-input
type="textarea"
@@ -450,31 +381,31 @@ export default {
show: true,
width: 80
}, {
label: this.$t("alarm.alarmName"),
label: this.$t("alert.alertName"),
prop: 'alertName',
show: true,
}, {
label: this.$t("alarm.config.expr"),
label: this.$t("alert.config.expr"),
prop: 'expr',
show: true,
}, {
label: this.$t("alarm.config.for"),
label: this.$t("alert.config.for"),
prop: 'last',
show: true,
}, {
label: this.$t('alarm.severity'),
label: this.$t('alert.severity'),
prop: 'severity',
show: true,
}, {
label: this.$t('alarm.description'),
label: this.$t('alert.description'),
prop: 'description',
show: true,
}, {
label: this.$t('alarm.config.receiver'),
label: this.$t('alert.config.receiver'),
prop: 'receiver',
show: true,
}, {
label: this.$t('alarm.config.option'),
label: this.$t('alert.config.option'),
prop: 'option',
show: true,
}
@@ -511,27 +442,27 @@ export default {
edit: function(u) {
this.alertRule = Object.assign({}, u);
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alarm.config.editAlarmConfig") + " ID：" + u.id;
this.rightBox.title = this.$t("alert.config.editalertConfig") + " ID：" + u.id;
this.rightBox.show = true;
},
del: function(u) {
},
toAdd: function() {
this.cleanAlertRule();
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alert.config.createalertConfig");
this.rightBox.show = true;
},
detail: function(u) {
this.alertRule = Object.assign({}, u);
this.rightBox.isEdit = false;
this.rightBox.title = this.$t("alarm.config.alarmConfig") + " ID：" + u.id;
this.rightBox.show = true;
},
add: function() {
this.cleanAlertRule();
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alarm.config.createAlarmConfig");
this.rightBox.title = this.$t("alert.config.alertConfig") + " ID：" + u.id;
this.rightBox.show = true;
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alarm.config.editAlarmConfig") + " ID：" + this.alertRule.id;
this.rightBox.title = this.$t("alert.config.editalertConfig") + " ID：" + this.alertRule.id;
}
},
toEditReceiver: function(item) {
@@ -574,8 +505,8 @@ export default {
getTableData: function() {
this.$get('alert/rule', this.pageObj).then(response => {
if (response.code == 200) {
this.tableData = response.data.list
this.pageObj.total = response.data.total
this.tableData = response.data.list;
this.pageObj.total = response.data.total;
}
})
},
@@ -607,6 +538,16 @@ export default {
receiver: '',
}
},
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData()

102
nezha-fronted/src/components/page/alarm/list.vue → nezha-fronted/src/components/page/alert/list.vue
View File

@@ -2,43 +2,6 @@
.account {
height: 100%;
}
.content-left {
float: left;
width: 370px;
height: 100%;
}
.sidebar-title {
padding-left: 30px;
padding-top: 20px;
}
.sidebar-info {
margin-top: 20px;
border: 1px solid #acacac;
border-radius: 8px;
height: calc(90vh - 55px);
width: calc(100% - 30px);
}
.sidebar-info-header {
background: #acacac;
text-align: center;
line-height: 50px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 60px;
width: 100%;
}
.sidebar-info-footer {
padding-top: 15px;
padding-left: 15px;
}
.account-list {
height: calc(100% - 131px);
margin-left: 370px;
padding: 0 15px 0 0;
}
.account-list-option {
cursor: pointer;
display: inline-block;
@@ -56,11 +19,6 @@
.account-list-option .el-icon-view:hover {
color: #409EFF;
}
.account-list-search {
float: right;
width: 220px;
margin: 15px 0;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
@@ -203,21 +161,25 @@
<template>
<div class="account">
<div class="content-left">
<div class="sidebar-title">
<div>Config</div>
<div class="sidebar-title">{{$t('alert.alert')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-footer" v-if="sidebarState">
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div>
<div class="sidebar-info-item" @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
</div>
</div>
</div>
</div>
<div class="account-list">
<div class="content-right">
<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">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
<el-input
class="account-list-search"
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="small"
size="mini"
></el-input>
</div>
<el-table
:data="tableData"
border
@@ -232,9 +194,9 @@
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'type'" class="account-list-options">
<span v-if="scope.row[item.prop] == 1" class="account-list-option">Project Alarm</span>
<span v-if="scope.row[item.prop] == 2" class="account-list-option">Module Alarm</span>
<span v-if="scope.row[item.prop] == 3" class="account-list-option">Device Alarm</span>
<span v-if="scope.row[item.prop] == 1" class="account-list-option">Project alert</span>
<span v-if="scope.row[item.prop] == 2" class="account-list-option">Module alert</span>
<span v-if="scope.row[item.prop] == 3" class="account-list-option">Device alert</span>
</div>
<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>
@@ -258,7 +220,7 @@
</template>
<script>
export default {
name: "alarmList",
name: "alertList",
data() {
return {
pageObj: {
@@ -268,39 +230,39 @@ export default {
},
tableTitle: [
{
label: this.$t("alarm.alarmName"),
label: this.$t("alert.alertName"),
prop: 'alertName',
show: true
}, {
label: this.$t("alarm.startAt"),
label: this.$t("alert.startAt"),
prop: 'startAt',
show: true,
}, {
label: this.$t("alarm.list.type"),
label: this.$t("alert.list.type"),
prop: 'type',
show: true,
}, {
label: this.$t("alarm.list.linkedId"),
label: this.$t("alert.list.linkedId"),
prop: 'linkObject',
show: true,
}, {
label: this.$t("alarm.severity"),
label: this.$t("alert.severity"),
prop: 'severity',
show: true,
}, {
label: this.$t('alarm.summary'),
label: this.$t('alert.summary'),
prop: 'summary',
show: true,
}, {
label: this.$t('alarm.description'),
label: this.$t('alert.description'),
prop: 'description',
show: true,
}, {
label: this.$t('alarm.list.state'),
label: this.$t('alert.list.state'),
prop: 'state',
show: true,
}, {
label: this.$t('alarm.endAt'),
label: this.$t('alert.endAt'),
prop: 'endAt',
show: true,
}
@@ -309,17 +271,27 @@ export default {
}
},
methods: {
getAlarmList: function() {
getAlertList: function() {
this.$get('alert/message', this.pageObj).then(response => {
if (response.code == 200) {
this.tableData = response.data.list
this.pageObj.total = response.data.total
}
})
},
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
},
mounted() {
this.getAlarmList();
this.getAlertList();
}
}
</script>

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

@@ -2,65 +2,29 @@
.account {
height: 100%;
}
.content-left {
float: left;
width: 370px;
height: 100%;
}
.sidebar-title {
padding-left: 30px;
padding-top: 20px;
}
.sidebar-info {
margin-top: 20px;
border: 1px solid #acacac;
border-radius: 8px;
height: calc(90vh - 55px);
width: calc(100% - 30px);
}
.sidebar-info-header {
background: #acacac;
text-align: center;
line-height: 50px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 60px;
width: 100%;
}
.sidebar-info-footer {
padding-top: 15px;
padding-left: 15px;
}
.account-list {
.content-right {
height: calc(100% - 131px);
margin-left: 370px;
padding: 0 15px 0 0;
margin-left: 322px;
padding: 0 15px 0 25px;
}
.account-list-option {
.content-right-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.account-list-option .el-icon-delete {
.content-right-option .el-icon-delete {
color: #F98D9A;
}
.account-list-option .el-icon-delete:hover {
.content-right-option .el-icon-delete:hover {
color: #D96D7A;
}
.account-list-option .el-icon-view {
.content-right-option .el-icon-view {
color: #60BEFF;
}
.account-list-option .el-icon-view:hover {
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
.account-list-search {
float: right;
width: 220px;
margin: 15px 0;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
@@ -203,21 +167,25 @@
<template>
<div class="account">
<div class="content-left">
<div class="sidebar-title">
<div>Config</div>
<div class="sidebar-title">Config</div>
<div class="sidebar-info">
<div class="sidebar-info-footer" v-if="sidebarState">
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">Account List</div>
<div class="sidebar-info-item" @click="jumpTo('promServer')">Prometheus Server</div>
</div>
</div>
</div>
</div>
<div class="account-list">
<div class="content-right">
<div class="top-tools">
<el-button @click="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 class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
<el-input
class="account-list-search"
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="small"
size="mini"
></el-input>
</div>
<el-table
:data="tableData"
border
@@ -231,10 +199,10 @@
:label="item.label"
>
<template slot-scope="scope" :column="item">
<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="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>
<div v-if="item.prop == 'option'" class="content-right-options">
<span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>
<span @click="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
<span @click="edit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
</div>
<span v-else-if="item.prop == 'lang'">
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
@@ -757,7 +725,7 @@ export default {
}
})
},
add: function() {
toAdd: function() {
this.cleanUser();
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.account.createAccount");
@@ -771,6 +739,16 @@ export default {
}
},
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
toEditReceiver: function(item) {
if (!item.isEdit) {
//如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑

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

@@ -2,65 +2,27 @@
.prom {
height: 100%;
}
.content-left {
float: left;
width: 370px;
height: 100%;
}
.sidebar-title {
padding-left: 30px;
padding-top: 20px;
.prom .el-table {
border-radius: 5px;
}
.sidebar-info {
margin-top: 20px;
border: 1px solid #acacac;
border-radius: 8px;
height: calc(90vh - 55px);
width: calc(100% - 30px);
}
.sidebar-info-header {
background: #acacac;
text-align: center;
line-height: 50px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 60px;
width: 100%;
}
.sidebar-info-footer {
padding-top: 15px;
padding-left: 15px;
}
.prom-list {
height: calc(100% - 131px);
margin-left: 370px;
padding: 0 15px 0 0;
}
.prom-list-option {
.content-right-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.prom-list-option .el-icon-delete {
.content-right-option .el-icon-delete {
color: #F98D9A;
}
.prom-list-option .el-icon-delete:hover {
.content-right-option .el-icon-delete:hover {
color: #D96D7A;
}
.prom-list-option .el-icon-view {
.content-right-option .el-icon-view {
color: #60BEFF;
}
.prom-list-option .el-icon-view:hover {
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
.prom-list-search {
float: right;
width: 220px;
margin: 15px 0;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
@@ -203,21 +165,25 @@
<template>
<div class="prom">
<div class="content-left">
<div class="sidebar-title">
<div>Config</div>
<div class="sidebar-title">{{$t('config.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-footer" v-if="sidebarState">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')">{{$t('config.account.accountList')}}</div>
<div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
</div>
</div>
</div>
</div>
<div class="prom-list">
<div class="content-right">
<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">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
<el-input
class="prom-list-search"
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="small"
size="mini"
></el-input>
</div>
<el-table
:data="tableData"
border
@@ -237,10 +203,10 @@
</el-table-column>
<el-table-column :label="$t('config.account.option')" width="100">
<template slot-scope="scope" :column="item">
<div class="prom-list-options">
<span @click="del(scope.row)" class="prom-list-option"><i class="el-icon-delete"></i></span>
<span @click="detail(scope.row)" class="prom-list-option"><i class="el-icon-view"></i></span>
<span @click="edit(scope.row)" class="prom-list-option"><i class="el-icon-edit-outline"></i></span>
<div class="content-right-options">
<span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>
<span @click="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>
</div>
</template>
</el-table-column>
@@ -330,7 +296,7 @@
<!-- begin--底部按钮-->
<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">{{promServer.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">{{promServer.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
@@ -423,7 +389,7 @@ export default {
}
},
methods: {
edit: function(u) {
toEdit: function(u) {
this.promServer = Object.assign({}, u);
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.promServer.editProm") + " ID：" + u.id;
@@ -445,24 +411,34 @@ export default {
this.rightBox.title = "Prometheus Server ID：" + u.id;
this.rightBox.show = true;
},
add: function() {
toAdd: function() {
this.cleanPromServer();
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.promServer.createProm");
this.rightBox.show = true;
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.promServer.editProm") + " ID：" + this.promServer.id;
} else {
save: function() {
if (this.promServer.id) {
this.$put('promServer', this.promServer).then(response => {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
}
})
});
} else {
this.$post('promServer', this.promServer).then(response => {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
}
});
}
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.toEdit(this.promServer);
} else {
this.save();
}
},
toEditIdc: function(item) {
@@ -473,9 +449,16 @@ export default {
} else {
//如果已在编辑状态，判断name是否有变更，有变更则发请求
if (item.name != item.oldName) {
if (this.updateIdcName(item) == 200) {
this.$put('idc', item).then(response => {
if (response.code === 200) {
item.errorMessage = '';
item.oldName = item.name;
item.isEdit = false;
} else {
console.info(response.msg)
this.$set(item, 'errorMessage', response.msg);
}
})
} else {
item.errorMessage = '';
item.isEdit = false;
@@ -496,10 +479,12 @@ export default {
this.blurEditIdc();
//TODO 请求后台，删除
},
getIdcData: function() {
this.$get('idc', this.pageObj).then(response => {
getIdcData: async function() {
console.info(1)
await this.$get('idc', this.pageObj).then(response => {
if (response.code === 200) {
this.idcData = response.data.list;
this.getTableData();
}
})
for (var i = 0; i < this.idcData.length; i++) {
@@ -512,12 +497,22 @@ export default {
},
stopFun: function() {
},
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
getTableData: function() {
this.$get('promServer', this.pageObj).then(response => {
if (response.code === 200) {
console.info(this.idcData)
for (var i = 0; i < response.data.list.length; i++) {
console.info(this.idcData)
for (var j = 0; j < this.idcData.length; j++) {
if (response.data.list[i].idcId == this.idcData[j].id) {
response.data.list[i].idc = this.idcData[j];
@@ -530,14 +525,6 @@ export default {
}
})
},
updateIdcName: function(item) {
//TODO 请求接口改名
var code = 200;
//this.$set(item, 'errorMessage', 'err');
item.errorMessage = '';
item.oldName = item.name;
return code;
},
cleanPromServer: function() {
this.promServer = {
id: '',
@@ -555,9 +542,13 @@ export default {
this.getTableData();
}
},
mounted() {
mounted: function() {
this.getIdcData();
this.getTableData();
},
watch: {
'promServer.idc': function(n, o) {
this.promServer.idcId = n.id;
}
}
}
</script>

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

@@ -1,24 +1,269 @@
<style scoped>
.project {
height: 100%;
}
.content-right-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.content-right-option .el-icon-delete {
color: #F98D9A;
}
.content-right-option .el-icon-delete:hover {
color: #D96D7A;
}
.content-right-option .el-icon-view {
color: #60BEFF;
}
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
top: 80px;
right: 15px;
z-index: 1;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
}
.right-box-project {
width: 550px;
height: calc(100% - 100px);
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
}
.right-box-top-btn-full {
background-color: #656565;
border: 1px solid #656565;
border-top: none;
color: white;
}
/* end--右侧弹框--顶部按钮*/
/* begin--右侧弹框--内容*/
.right-box-title {
height: 30px;
line-height: 40px;
text-align: left;
}
.right-box-form {
margin-top: 35px;
}
.right-box-form-row {
margin-top: 25px;
}
.right-box-form-label {
margin-bottom: 8px;
text-align: left;
}
.right-box-form-content {
line-height: 32px;
text-align: left;
width: 100%;
}
.right-box-form-content-txt {
padding-left: 11px;
}
.right-box-form-content .el-select {
width: calc(100% - 38px);
vertical-align: top;
}
.el-select-add-btn {
width: 33px;
height: 33px;
display: inline-block;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.el-select-add-btn:hover {
border: 1px solid #C0C4CC;
cursor: pointer;
}
/* end--右侧弹框--内容*/
/* begin--右侧弹框--底部按钮*/
.right-box-bottom-btns {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
left: 0;
text-align: center;
}
.right-box-bottom-btn:first-of-type {
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn:last-of-type{
border-bottom-right-radius: 8px;
}
.right-box-bottom-btn {
display: inline-block;
background-color: #656565;
color: white;
height: 100%;
line-height: 40px;
cursor: pointer;
width: 100%;
}
.config-dropdown-label-input {
width: 50%;
display: inline-block;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
}
.right-box-bottom-btn-50 {
width: 50%;
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/
</style>
<template>
<div>
<div class="project">
<div class="content-left">
<div class="sidebar-title">Config</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">Account List</div>
<div class="sidebar-info-item">Prometheus Server</div>
</div>
</div>
<div class="content-right">
<div class="top-tools">
<el-button-group>
<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>
</el-button>
<el-button @click="" class="top-tool-btn top-tool" size="mini">
<span class="top-tool-btn-txt">{{$t('project.metrics')}}</span>
</el-button>
</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">
<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>
<el-table
:data="tableData"
border
style="width: 100%">
height="calc(100% - 65px)"
style="width: 100%;">
<el-table-column
prop="date"
label="日期"
width="180">
v-for="(item, index) in tableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
:label="item.label"
>
<template slot-scope="scope" :column="item">
<!--<span v-if="item.prop == 'asset'">{{scope.row[item.prop].name}}</span>
<span v-else>{{scope.row[item.prop]}}</span>-->
<span>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
<el-table-column :label="$t('overall.option')" width="100">
<template slot-scope="scope" :column="item">
<div class="content-right-options">
<span @click="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>
</div>
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
<!-- begin--右弹框-->
<transition name="right-box">
<div class="right-box right-box-project" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
<span v-else>{{$t('overall.edit')}}</span>
</div>
<div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
</div>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form">
<div class="right-box-form-row">
<div class="right-box-form-label">IDC</div>
<div class="right-box-form-content">aaa
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">Host</div>
<div class="right-box-form-content">
<el-input
type="text"
v-if="rightBox.isEdit"
placeholder=""
v-model="endpoint.host"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
</div>
</div>
</div>
<!-- end--表单-->
<!-- begin--底部按钮-->
<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 @click="save()" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{endpoint.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
</div>
</transition>
</div>
</template>
@@ -27,28 +272,126 @@ export default {
name: "project",
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
title: ''
},
pageObj: {
pageNo: 1,
pageSize: 20,
total:0
},
endpoint: {
id: '',
host: '',
port: '',
param: '',
path: '',
asset: {id: '', name: '', host: ''},
project: {id: '', name: ''},
module: {id: '', name: ''}
},
tableTitle: [
{
label: this.$t("project.endpoint.endpointId"),
prop: 'id',
show: true,
width: 110
},
{
label: this.$t("project.endpoint.host"),
prop: 'host',
show: true,
},
{
label: this.$t("project.endpoint.port"),
prop: 'port',
show: true,
},
{
label: this.$t("project.endpoint.param"),
prop: 'param',
show: true,
},
{
label: this.$t("project.endpoint.path"),
prop: 'path',
show: true,
},
{
label: this.$t("project.endpoint.asset"),
prop: 'asset',
show: true,
}
],
tableData: []
}
},
methods: {
getTableData: function() {
this.$get('endpoint', this.pageObj).then(response => {
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
}
})
},
toEdit: function(u) {
this.endpoint = Object.assign({}, u);
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + u.id;
this.rightBox.show = true;
},
del: function(u) {
},
toAdd: function() {
this.cleanEndpoint();
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.endpoint.createEndpoint");
this.rightBox.show = true;
},
detail: function(u) {
this.alertRule = Object.assign({}, u);
this.rightBox.isEdit = false;
this.rightBox.title = this.$t("project.endpoint.endpoint") + " ID：" + u.id;
this.rightBox.show = true;
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + this.alertRule.id;
}
},
save: function() {
},
esc: function() {
this.rightBox.show = false;
},
cleanEndpoint: function() {
this.endpoint = {
id: '',
host: '',
port: '',
param: '',
path: '',
asset: {id: '', name: '', host: ''},
project: {id: '', name: ''},
module: {id: '', name: ''}
}
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData();
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getTableData();
}
},
mounted: function() {
this.getTableData();
}
}
</script>
<style scoped>
</style>

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

@@ -1,11 +1,12 @@
import axios from 'axios'
import qs from 'qs' //引入数据格式化
//axios.defaults.baseURL = 'http://localhost:8088/nz-admin';
axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin';
axios.interceptors.request.use(config => {
config.headers = {
"Content-Type": 'application/x-www-form-urlencoded',
}
config.data = qs.stringify(config.data);
// config.headers = {
// "Content-Type": 'application/x-www-form-urlencoded',
// }
// config.data = qs.stringify(config.data);
let token = sessionStorage.getItem('token')
if (token) {
config.headers['Authorization'] = token //请求头token
@@ -21,7 +22,7 @@ export function get(url, params) {
}).then(response => {
resolve(response.data)
}).catch(err => {
reject(err.response.data)
resolve(err.response.data)
})
})
}
@@ -32,20 +33,18 @@ export function post(url, params) {
resolve(response.data)
}).catch(err => {
console.info(err)
reject(err.response.data)
resolve(err.response.data)
})
})
}
export function put(url, params) {
return new Promise((resolve, reject) => {
//params = qs.stringify(Object.assign(params));
//console.info(params);
axios.put(url, params).then(response => {
resolve(response.data)
}).catch(err => {
console.info(err)
reject(err.response.data)
resolve(err.response.data);
})
})
}
@@ -56,7 +55,7 @@ export function del(url, params) {
resolve(response.data)
}).catch(err => {
console.info(err)
reject(err.response.data)
resolve(err.response.data)
})
})
}

8
nezha-fronted/src/router/index.js
View File

@@ -38,12 +38,12 @@ export default new Router({
component: resolve => require(['../components/page/config/promServer.vue'], resolve),
},
{
path: '/alarmList',
component: resolve => require(['../components/page/alarm/list.vue'], resolve),
path: '/alertList',
component: resolve => require(['../components/page/alert/list.vue'], resolve),
},
{
path: '/alarmConfig',
component: resolve => require(['../components/page/alarm/config.vue'], resolve),
path: '/alertConfig',
component: resolve => require(['../components/page/alert/config.vue'], resolve),
}
]
},