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: [
{
value: 1,
label: this.$t('issue.open')
label: this.$t('silence.active')
}, {
value: 2,
label: this.$t('issue.hasBeenAssigned')
label: this.$t('silence.pending')
}, {
value: 3,
label: this.$t('issue.beingProcessed')
label: this.$t('silence.expired')
}
],
priority: [

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

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

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

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