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

fix：silence 搜索框添加 state下拉

Browse Source
This commit is contained in:
zhangyu
2022-09-06 17:58:25 +08:00
parent 56822eb7ff
commit 95eb54546e
3 changed files with 239 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nezha-fronted/src/components/common/searchSelectInfo.js
View File

@@ -350,13 +350,13 @@ export default {
silenceState: [ silenceState: [
{ {
value: 1, value: 1,
label: this.$t('issue.open') label: this.$t('silence.active')
}, { }, {
value: 2, value: 2,
label: this.$t('issue.hasBeenAssigned') label: this.$t('silence.pending')
}, { }, {
value: 3, value: 3,
label: this.$t('issue.beingProcessed') label: this.$t('silence.expired')
} }
], ],
priority: [ priority: [

130
nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
View File

@@ -81,13 +81,13 @@
</template> </template>
<template v-else-if="item.prop === 'state'"> <template v-else-if="item.prop === 'state'">
<span v-if="scope.row.state === 1" class="silence-active" <span v-if="scope.row.state === 1" class="silence-active"
>active</span >{{$t('silence.active')}}</span
> >
<span v-if="scope.row.state === 2" class="silence-pending" <span v-if="scope.row.state === 2" class="silence-pending"
>pending</span >{{$t('silence.pending')}}</span
> >
<span v-if="scope.row.state === 3" class="silence-expired" <span v-if="scope.row.state === 3" class="silence-expired"
>expired</span >{{$t('silence.expired')}}</span
> >
</template> </template>
<template v-else-if="item.prop === 'utime'"> <template v-else-if="item.prop === 'utime'">
@@ -180,130 +180,130 @@
</template> </template>
<script> <script>
import table from "@/components/common/mixin/table"; import table from '@/components/common/mixin/table'
import { calcDurationByStringTimeB } from "@/components/common/js/tools"; import { calcDurationByStringTimeB } from '@/components/common/js/tools'
import nzAlertTag from "../../../page/alert/nzAlertTag"; import nzAlertTag from '../../../page/alert/nzAlertTag'
import { sameLabels } from "@/components/common/js/constants"; import { sameLabels } from '@/components/common/js/constants'
export default { export default {
name: "alertSilenceTable", name: 'alertSilenceTable',
components: { components: {
nzAlertTag, nzAlertTag
}, },
mixins: [table], mixins: [table],
props: { props: {
loading: Boolean, loading: Boolean,
nowTime: {}, nowTime: {}
}, },
data() { data () {
return { return {
/* 表格相关 */ /* 表格相关 */
tableTitle: [ tableTitle: [
{ {
label: "ID", label: 'ID',
prop: "id", prop: 'id',
show: true, show: true,
width: 80, width: 80,
sortable: "custom", sortable: 'custom'
}, },
{ {
label: this.$t("overall.name"), label: this.$t('overall.name'),
prop: "name", prop: 'name',
show: true, show: true,
minWidth: 150, minWidth: 150
}, },
{ {
label: this.$t("alert.silence.matchers"), label: this.$t('alert.silence.matchers'),
prop: "matchers", prop: 'matchers',
show: true, show: true,
minWidth: 200, minWidth: 200,
sortable: "custom", sortable: 'custom'
}, },
{ {
label: this.$t("overall.startTime"), label: this.$t('overall.startTime'),
prop: "startAt", prop: 'startAt',
show: true, show: true,
width: 300, width: 300,
sortable: "custom", sortable: 'custom'
}, },
{ {
label: this.$t("config.terminallog.duration"), label: this.$t('config.terminallog.duration'),
prop: "duration", prop: 'duration',
show: true, show: true,
width: 120, width: 120
}, },
{ {
label: this.$t("overall.remark"), label: this.$t('overall.remark'),
prop: "remark", prop: 'remark',
show: true, show: true,
width: 120, width: 120
}, },
{ {
label: this.$t("alert.silence.upTime"), label: this.$t('alert.silence.upTime'),
prop: "utime", prop: 'utime',
show: false, show: false,
width: 300, width: 300
}, },
{ {
label: this.$t("alert.alert"), label: this.$t('alert.alert'),
prop: "alertNum", prop: 'alertNum',
show: false, show: false,
width: 120, width: 120,
sortable: "custom", sortable: 'custom'
}, },
{ {
label: this.$t("overall.state"), label: this.$t('overall.state'),
prop: "state", prop: 'state',
show: true, show: true,
width: 120, width: 120
}, }
], ]
}; }
}, },
computed: { computed: {
getDuration() { getDuration () {
return function (record) { return function (record) {
if (record.endAt) { if (record.endAt) {
return calcDurationByStringTimeB(record.startAt, record.endAt); return calcDurationByStringTimeB(record.startAt, record.endAt)
} }
return calcDurationByStringTimeB( return calcDurationByStringTimeB(
record.startAt, record.startAt,
this.utcTimeToTimezoneStr(this.nowTime) this.utcTimeToTimezoneStr(this.nowTime)
); )
}; }
}, },
tagType() { tagType () {
return (key) => { return (key) => {
if (sameLabels.find((item) => item === key)) { if (sameLabels.find((item) => item === key)) {
return "normal"; return 'normal'
} else { } else {
return "info"; return 'info'
} }
}; }
}, }
}, },
methods: { methods: {
labelsSort(obj) { labelsSort (obj) {
obj = obj || []; obj = obj || []
const buildIn = sameLabels; const buildIn = sameLabels
if (typeof obj === "string") obj = JSON.parse(obj); if (typeof obj === 'string') obj = JSON.parse(obj)
const labels = JSON.parse(JSON.stringify(obj)); const labels = JSON.parse(JSON.stringify(obj))
const result = []; const result = []
const result2 = []; const result2 = []
for (const key of buildIn) { for (const key of buildIn) {
labels.forEach((item) => { labels.forEach((item) => {
if (item.name === key) { if (item.name === key) {
result.push(item); result.push(item)
} }
}); })
} }
labels.forEach((item) => { labels.forEach((item) => {
if (buildIn.indexOf(item.name) === -1) { if (buildIn.indexOf(item.name) === -1) {
result2.push(item); result2.push(item)
} }
}); })
// console.log([...result, ...result2]) // console.log([...result, ...result2])
return [...result, ...result2]; return [...result, ...result2]
}, }
}, }
}; }
</script> </script>

321
nezha-fronted/src/components/page/alert/alertSilence.vue
View File

@@ -109,153 +109,159 @@
</template> </template>
<script> <script>
import bus from "@/libs/bus"; import bus from '@/libs/bus'
import alertSilenceBox from "@/components/common/rightBox/alertSilenceBox"; import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
import deleteButton from "@/components/common/deleteButton"; import deleteButton from '@/components/common/deleteButton'
import nzDataList from "@/components/common/table/nzDataList"; import nzDataList from '@/components/common/table/nzDataList'
import dataListMixin from "@/components/common/mixin/dataList"; import dataListMixin from '@/components/common/mixin/dataList'
import alertSilenceTable from "@/components/common/table/alert/alertSilenceTable"; import alertSilenceTable from '@/components/common/table/alert/alertSilenceTable'
import routerPathParams from "@/components/common/mixin/routerPathParams"; import routerPathParams from '@/components/common/mixin/routerPathParams'
export default { export default {
name: "alertSilence", name: 'alertSilence',
components: { components: {
alertSilenceTable, alertSilenceTable,
deleteButton, deleteButton,
nzDataList, nzDataList,
alertSilenceBox, alertSilenceBox
}, },
mixins: [dataListMixin, routerPathParams], mixins: [dataListMixin, routerPathParams],
data() { data () {
return { return {
url: "alert/silence", url: 'alert/silence',
tableId: "silenceTable", tableId: 'silenceTable',
/* 搜素相关 */ /* 搜素相关 */
searchMsg: { searchMsg: {
// 给搜索框子组件传递的信息 // 给搜索框子组件传递的信息
zheze_none: true, zheze_none: true,
searchLabelList: [ searchLabelList: [
{ {
name: "ID", name: 'ID',
type: "input", type: 'input',
label: "ids", label: 'ids',
disabled: false, disabled: false
}, },
{ {
name: this.$t("alert.silence.matchers"), name: this.$t('alert.silence.matchers'),
type: "input", type: 'input',
label: "matchers", label: 'matchers',
disabled: false, disabled: false
}, },
], {
name: this.$t('overall.state'),
type: 'select',
label: 'silenceState',
disabled: false
}
]
}, },
// 导出相关 // 导出相关
importBox: { show: false, title: this.$t("overall.exportExcel") }, importBox: { show: false, title: this.$t('overall.exportExcel') },
deleteBox: { show: false, ids: "", remark: "", state: 2 }, deleteBox: { show: false, ids: '', remark: '', state: 2 },
// 创建修改相关 // 创建修改相关
blankObject: { blankObject: {
id: "", id: '',
startAt: "", startAt: '',
endAt: "", endAt: '',
ruleId: "", ruleId: '',
type: "asset", type: 'asset',
linkId: "", linkId: '',
remark: "", remark: '',
time: [], time: [],
matchers: [{ name: "", value: "", regex: 0 }], matchers: [{ name: '', value: '', regex: 0 }],
name: "", name: ''
}, },
nowTime: "", nowTime: ''
}; }
}, },
mounted() { mounted () {
this.initEvent(); this.initEvent()
}, },
methods: { methods: {
queryMessage(alertRule) { queryMessage (alertRule) {
this.$refs.dataList.showBottomBox('alertRuleAlertMessage', alertRule) this.$refs.dataList.showBottomBox('alertRuleAlertMessage', alertRule)
}, },
closeRightBox(refresh) { closeRightBox (refresh) {
this.rightBox.show = false; this.rightBox.show = false
this.copyFlag = false; this.copyFlag = false
this.object = {}; this.object = {}
if (refresh) { if (refresh) {
this.delFlag = true; this.delFlag = true
this.getTableData(); this.getTableData()
} }
}, },
initEvent() { initEvent () {
bus.$on("alert-rule-list-change", () => { bus.$on('alert-rule-list-change', () => {
this.getTableData(); this.getTableData()
}); })
bus.$on("dc-list-change", () => { bus.$on('dc-list-change', () => {
this.getTableData(); this.getTableData()
}); })
bus.$on("alert-message-change", () => { bus.$on('alert-message-change', () => {
this.getTableData(); this.getTableData()
}); })
}, },
exportCur() { exportCur () {
const searchLabel = Object.assign({}, this.searchLabel); const searchLabel = Object.assign({}, this.searchLabel)
this.$set( this.$set(
searchLabel, searchLabel,
"language", 'language',
localStorage.getItem("nz-language") localStorage.getItem('nz-language')
? localStorage.getItem("nz-language") ? localStorage.getItem('nz-language')
: "en" : 'en'
); )
this.exportExcel(searchLabel); this.exportExcel(searchLabel)
this.closeDialog(); this.closeDialog()
}, },
exportAll() { exportAll () {
const temp = JSON.parse(JSON.stringify(this.searchLabel)); const temp = JSON.parse(JSON.stringify(this.searchLabel))
temp.pageSize = -1; temp.pageSize = -1
this.$set( this.$set(
temp, temp,
"language", 'language',
localStorage.getItem("nz-language") localStorage.getItem('nz-language')
? localStorage.getItem("nz-language") ? localStorage.getItem('nz-language')
: "en" : 'en'
); )
this.exportExcel(temp); this.exportExcel(temp)
this.closeDialog(); this.closeDialog()
}, },
closeDialog() { closeDialog () {
this.importBox.show = false; this.importBox.show = false
this.deleteBox.show = false; this.deleteBox.show = false
}, },
getTableData(params) { getTableData (params) {
if (params && Object.keys(params).length > 0) { if (params && Object.keys(params).length > 0) {
for (const key in params) { for (const key in params) {
this.$set(this.searchLabel, key, params[key]); this.$set(this.searchLabel, key, params[key])
} }
} }
if (this.orderBy) { if (this.orderBy) {
this.$set(this.searchLabel, "orderBy", this.orderBy); this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else { } else {
delete this.searchLabel.orderBy; delete this.searchLabel.orderBy
} }
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
this.tools.loading = true; this.tools.loading = true
const alertRuleParam = { const alertRuleParam = {
...this.searchLabel, ...this.searchLabel,
...this.searchCheckBox, ...this.searchCheckBox
}; }
const path = this.fromRoute.alertSilence; const path = this.fromRoute.alertSilence
this.updatePath(alertRuleParam, path); this.updatePath(alertRuleParam, path)
this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then( this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(
(response) => { (response) => {
this.tools.loading = false; this.tools.loading = false
this.nowTime = this.utcTimeToTimezoneStr(response.time); this.nowTime = this.utcTimeToTimezoneStr(response.time)
if (response.code === 200) { if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) { for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ""; response.data.list[i].status = response.data.list[i].status + ''
// response.data.list[i].startAt = bus.UTCTimeToConfigTimezone(response.data.list[i].startAt) // response.data.list[i].startAt = bus.UTCTimeToConfigTimezone(response.data.list[i].startAt)
// response.data.list[i].endAt = bus.UTCTimeToConfigTimezone(response.data.list[i].endAt) // response.data.list[i].endAt = bus.UTCTimeToConfigTimezone(response.data.list[i].endAt)
} }
this.tableData = response.data.list; this.tableData = response.data.list
this.pageObj.total = response.data.total; this.pageObj.total = response.data.total
if ( if (
!this.scrollbarWrap && !this.scrollbarWrap &&
this.$refs.dataTable && this.$refs.dataTable &&
@@ -263,111 +269,126 @@ export default {
) { ) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.scrollbarWrap =
this.$refs.dataTable.$refs.dataTable.bodyWrapper; this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap); this.toTopBtnHandler(this.scrollbarWrap)
}); })
} }
} }
} }
); )
}, },
add() { add () {
this.blankObject.startAt = bus.getOffsetTimezoneData(); this.blankObject.startAt = bus.getOffsetTimezoneData()
this.blankObject.endAt = bus.getOffsetTimezoneData(1); this.blankObject.endAt = bus.getOffsetTimezoneData(1)
this.object = JSON.parse(JSON.stringify(this.blankObject)); this.object = JSON.parse(JSON.stringify(this.blankObject))
this.rightBox.show = true; this.rightBox.show = true
}, },
edit(u, copyFlag) { edit (u, copyFlag) {
this.$get(`${this.url}/${u.id}`).then((response) => { this.$get(`${this.url}/${u.id}`).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.object = { this.object = {
...response.data, ...response.data,
matchers: JSON.parse(response.data.matchers), matchers: JSON.parse(response.data.matchers),
startAt: bus.UTCTimeToConfigTimezone(response.data.startAt), startAt: bus.UTCTimeToConfigTimezone(response.data.startAt),
endAt: bus.UTCTimeToConfigTimezone(response.data.endAt), endAt: bus.UTCTimeToConfigTimezone(response.data.endAt)
}; }
if (copyFlag) { if (copyFlag) {
this.object.id = ""; this.object.id = ''
this.object.name = this.object.name + "-copy"; this.object.name = this.object.name + '-copy'
if (this.object.name.length > 64) { if (this.object.name.length > 64) {
const length = this.object.name.length - 64; const length = this.object.name.length - 64
this.object.name = this.object.name =
u.name.substring(0, u.name.length - length) + "-copy"; u.name.substring(0, u.name.length - length) + '-copy'
} }
} }
this.rightBox.show = true; this.rightBox.show = true
} }
}); })
}, },
copy(u) { copy (u) {
this.edit(u, true); this.edit(u, true)
}, },
del(row) { del (row) {
this.$confirm(this.$t("tip.confirmExpired"), { this.$confirm(this.$t('tip.confirmExpired'), {
confirmButtonText: this.$t("tip.yes"), confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t("tip.no"), cancelButtonText: this.$t('tip.no'),
type: "warning", type: 'warning'
}).then(() => { }).then(() => {
this.$delete(this.url + "?ids=" + row.id + "&state=" + this.state).then( this.$delete(this.url + '?ids=' + row.id + '&state=' + this.state).then(
(response) => { (response) => {
if (response.code === 200) { if (response.code === 200) {
this.delFlag = true; this.delFlag = true
this.$message({ this.$message({
duration: 2000, duration: 2000,
type: "success", type: 'success',
message: this.$t("tip.deleteSuccess"), message: this.$t('tip.deleteSuccess')
}); })
this.getTableData(); this.getTableData()
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg)
} }
} }
); )
}); })
}, }
}, },
created() { created () {
const searchKeys = { const searchKeys = {
// key: path 键 // key: path 键
// value: vue set 参数 // value: vue set 参数
pageNo: { target: this.pageObj, propertyName: "pageNo", type: "number" }, pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
pageSize: { pageSize: {
target: this.pageObj, target: this.pageObj,
propertyName: "pageSize", propertyName: 'pageSize',
type: "number", type: 'number'
}, },
orderBy: { target: this.$data, propertyName: "orderBy", type: "string" }, orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
ids: { ids: {
target: this.searchLabel, target: this.searchLabel,
isSearchInput: true, isSearchInput: true,
propertyName: "ids", propertyName: 'ids',
type: "string", type: 'string',
defaultJson: { defaultJson: {
disabled: false, disabled: false,
id: "ids", id: 'ids',
label: "ids", label: 'ids',
name: "ID", name: 'ID',
type: "input", type: 'input',
val: "", val: ''
}, },
jsonKey: "val", jsonKey: 'val'
}, },
matchers: { matchers: {
target: this.searchLabel, target: this.searchLabel,
isSearchInput: true, isSearchInput: true,
propertyName: "matchers", propertyName: 'matchers',
type: "string", type: 'string',
defaultJson: { defaultJson: {
disabled: false, disabled: false,
label: "matchers", label: 'matchers',
name: "Matcher", name: 'Matcher',
type: "input", type: 'input',
val: "", val: ''
}, },
jsonKey: "val", jsonKey: 'val'
}, },
}; state: {
this.initQueryFromPath(searchKeys); target: this.searchLabel,
}, isSearchInput: true,
}; propertyName: 'state',
type: 'number',
defaultJson: {
name: 'state',
type: 'select',
label: 'silenceState',
disabled: false,
val: '',
listStr: 'silenceState'
},
jsonKey: 'valnum',
}
}
this.initQueryFromPath(searchKeys)
}
}
</script> </script>