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

NEZ-1155 feat：添加 evallog页面

Browse Source
This commit is contained in:
zhangyu
2021-11-02 18:34:00 +08:00
parent 3094e94b0c
commit dc7a102bf7
9 changed files with 360 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,11 +50,12 @@
<panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :paramsType="'endpoint'" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab" @getTableData="getTableData"></panel-tab-new>
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointQuery>
<log-bottom-tab v-if="from === fromRoute.endpoint && targetTab === 'log' && hasLogConfig" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></alertMessageTabNew>
<!--chartTemp的Tab-->
<panel-tab-new @getTableData="getTableData" :paramsType="'template'" v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.chartTemp.chartTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<!--alertRule Tab-->
<alertMessageTabNew v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
<alertMessageTabNew v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
<alertRuleEvalLog v-if="from === fromRoute.alertRule && targetTab === 'evalLog'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab.sync="targetTab"></alertRuleEvalLog>
<!--model 下滑-->
<asset-tab v-if="(from === fromRoute.model) && targetTab === 'asset'" :tabs="tabs.model" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></asset-tab>
</div>
@@ -66,6 +67,7 @@
import cabinetTab from './tabs/cabinetTab'
import alertMessageTab from './tabs/alertMessageTab'
import alertMessageTabNew from './tabs/alertMessageTabNew'
import alertRuleEvalLog from './tabs/alertRuleEvalLog'
import assetSubTab from './tabs/assetSubTab'
import endpointQuery from './tabs/endpointQuery'
import endpointTab from './tabs/endpointTab'
@@ -97,7 +99,8 @@ export default {
endpointQuery,
panelTabNew,
assetTab,
assetSubTab
assetSubTab,
alertRuleEvalLog
},
props: {
isFullScreen: Boolean, // 是否全屏
@@ -203,7 +206,7 @@ export default {
{ prop: 'panelTab', name: this.$t('overall.detail') },
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
{ prop: 'endpointQuery', name: 'Metrics' },
{ prop: 'log', name: 'Log' },
{ prop: 'log', name: 'Log' }
]
},
chartTemp: {
@@ -213,7 +216,8 @@ export default {
},
alertRule: {
alertRule: [
{ prop: 'alertRuleAlertMessage', name: this.$t('overall.alert') }
{ prop: 'alertRuleAlertMessage', name: this.$t('overall.alert') },
{ prop: 'evalLog', name: this.$t('overall.alertRuleEvalLog') }
]
},
model: [

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

@@ -4,7 +4,7 @@
<div class="top-tool-left">
<div class="sub-list-title" v-if="showTitle">{{bottomHeaderTitle}}：<slot name="title"></slot></div>
<div class="sub-list-tabs">
<div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop=== targetTab}" class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
<div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop == targetTab }" :title='tab.prop + targetTab' class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
</div>
</div>
<div class="top-tool-right" v-if="!customTool">

141
nezha-fronted/src/components/common/bottomBox/tabs/alertRuleEvalLog.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<nz-bottom-data-list
:showTitle='showTitle'
:api="url"
:custom-table-title.sync="tools.customTableTitle"
:layout="['elementSet']"
:search-msg="searchMsg"
:tabs="tabs"
:targetTab="targetTab"
:showPagination="false"
@search="search"
@changeTab="changeTab"
>
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
<template v-slot>
<alertRuleEvalLogTable
ref="dataTable"
v-loading="tools.loading"
:loading="tools.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="subTableHeight"
:now-time="nowTime"
:table-data="tableData"
:terminaLogTab="true"
@del="del"
@edit="edit"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"></alertRuleEvalLogTable>
</template>
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
</nz-bottom-data-list>
</template>
<script>
import dataListMixin from '@/components/common/mixin/dataList'
import subDataListMixin from '@/components/common/mixin/subDataList'
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
import alertRuleEvalLogTable from '@/components/common/table/alert/alertRuleEvalLogTable'
import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
export default {
name: 'alertRuleEvalLog',
mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
components: {
nzBottomDataList,
alertRuleEvalLogTable
},
props: {
obj: Object,
showTitle: {
type: Boolean,
default: true
}
},
watch: {
obj (n) {
this.searchLabel = { id: n.id }
this.getTableData()
}
},
data () {
return {
url: 'alert/rule/1/evalLog',
tableId: 'alertRuleEvalLogTable', // 需要分页的table的id，用于记录每页数量
searchMsg: { // 给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [
{
id: 11,
name: this.$t('config.terminallog.loginHost'),
type: 'input',
label: 'host',
disabled: false
}
]
},
nowTime: '',
searchLabel: { id: this.obj.id }
}
},
methods: {
getTableData (params) {
if (params && Object.keys(params).length > 0) {
for (const key in params) {
this.$set(this.searchLabel, key, params[key])
}
}
if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy)
}
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', -1)
this.tools.loading = true
if (this.obj) {
this.$set(this.searchLabel, 'id', this.obj.id)
}
this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
this.tools.loading = false
this.nowTime = this.utcTimeToTimezoneStr(response.time)
// response = {
// code: 200,
// msg: 'success',
// data: {
// list: [{
// ruleId: 1,
// state: 200,
// msg: 'success',
// stts: 1634215095277,
// etts: 1634215095377
// }, {
// ruleId: 1,
// state: 201,
// msg: 'success',
// stts: 1634215095477,
// etts: 1634215095577
// }
// ]
// }
// }
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ''
}
this.tableData = response.data.list
this.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)
})
}
}
})
}
}
}
</script>

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

@@ -36,6 +36,7 @@ const cn = {
project: '系统',
monitor: '监控',
alert: '告警',
alertRuleEvalLog: 'Eval log',
asset: '资产',
config: '设置',
administration: '系统管理',
@@ -1265,6 +1266,7 @@ const cn = {
alertMessage: '告警信息',
rule: '告警规则',
alertRule: '告警规则',
alertRuleMessage: 'Message',
alertList: '告警信息',
alertConfig: '告警规则',
alertName: '告警名称',
@@ -1360,7 +1362,7 @@ const cn = {
},
P1Rule: 'P1: 万分紧急，可导致业务瘫痪的告警',
P2Rule: 'P2: 重要，需要紧急关注的警报，但还没有影响业务',
P3Rule: 'P3: 轻微警报，需要处理，但不紧急'
P3Rule: 'P3: 轻微警报，需要处理，但不紧急',
},
project: {
chart: {

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

@@ -35,6 +35,7 @@ const en = {
project: 'Project', // '系统'
monitor: 'Monitor', // 监控
alert: 'Alert', // "告警"
alertRuleEvalLog: 'Eval log',
asset: 'Asset', // '资产'
config: 'Setting', // '设置'
administration: 'Administration',
@@ -1269,6 +1270,7 @@ const en = {
rule: 'Rule', // '规则'
alertMessage: 'Alert message', // "告警信息"
alertRule: 'Alert rule', // "告警规则"
alertRuleMessage: 'Message',
alertName: 'Name', // "告警名称"
method: 'Method', // "告警名称"
severity: 'Priority', // "等级"

189
nezha-fronted/src/components/common/table/alert/alertRuleEvalLogTable.vue Normal file
View File

@@ -0,0 +1,189 @@
<template>
<el-table
id="alertRuleTable"
ref="dataTable"
:data="tableData"
:height="height"
tooltip-effect="light"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
@row-dblclick="(row)=>{queryMessage(row)}"
>
<el-table-column
:resizable="false"
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
:show-overflow-tooltip="item.prop === 'description'"
class="data-column"
>
<template slot="header">
<span class="data-column__span">{{item.label}}</span>
<div class="col-resize-area"></div>
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'state'">
<div>
<div :class="{'active-icon green-bg':scope.row.state == 200,'active-icon red-bg':scope.row.state != 200}" style="position: relative">
</div>
</div>
</template>
<template v-else-if="item.prop === 'duration'">
<el-tooltip :disabled="!scope.row.etts" effect="light" placement="right">
<div slot="content">
{{$t('config.terminallog.endTime')}}<br/>
{{timestampStr(scope.row.etts)}}
</div>
<span>{{getDuration(scope.row)}}</span>
</el-tooltip>
</template>
<template v-else-if="item.prop === 'stts'">
{{timestampStr(scope.row[item.prop])}}
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
</el-table-column>
<template slot="empty">
<div v-if="!loading" class="table-no-data">
<svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use>
</svg>
<div class="table-no-data__title">No results found</div>
</div>
<div v-else>&nbsp;</div>
</template>
</el-table>
</template>
<script>
import table from '@/components/common/mixin/table'
import { calcDurationByStringTimeB } from '@/components/common/js/tools'
export default {
name: 'alertRuleTable',
mixins: [table],
props: {
loading: Boolean,
nowTime: {}
},
data () {
return {
tableTitle: [
{
label: this.$t('config.dc.state'),
prop: 'state',
show: true,
minWidth: 100,
sortable: 'custom'
}, {
label: this.$t('alert.alertRuleMessage'),
prop: 'msg',
show: true,
minWidth: 100,
sortable: 'custom'
}, {
label: this.$t('alert.silence.startTime'),
prop: 'stts',
show: true,
minWidth: 300,
sortable: 'custom'
}, {
label: this.$t('config.terminallog.duration'),
prop: 'duration',
show: true,
minWidth: 120
}
]
}
},
computed: {
},
methods: {
getDuration (record) {
if (record.etts) {
return calcDurationByStringTimeB(record.stts, record.etts)
}
return calcDurationByStringTimeB(record.stts, this.utcTimeToTimezoneStr(this.nowTime))
}
}
}
</script>
<style scoped>
.colorEF7458{
color: #EF7458;
}
.color23BF9A{
color: #23BF9A;
}
/deep/ .active-icon {
margin-left: 5px;
}
</style>
<style>
.severity .P1{
background: #F5846A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P2{
background: #F7A54A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P3{
background: #F1C13D;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.schedEnableTitle{
padding: 20px 15px;
margin-right: 0;
left: 1995px !important;
background: #FFFFFF;
border: 1px solid rgba(119,131,145,0.60);
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
border-radius: 3px;
}
.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian{
font-size: 14px;
color: #666666;
margin-right: 12px;
}
.schedEnableTitle .week-item{
width: 32px;
height: 22px;
line-height: 22px;
opacity: 0.9;
background: #F6F6FA;
border-radius: 2px;
display: inline-block;
font-size: 12px;
color: #666666;
letter-spacing: 0;
font-weight: 400;
padding-left: 3px;
margin-right: 12px;
margin-bottom: 6px;
}
</style>

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

@@ -126,7 +126,8 @@ export default {
},
mixins: [table],
props: {
loading: Boolean
loading: Boolean,
nowTime: {}
},
data () {
return {

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

@@ -25,6 +25,7 @@
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"
:nowTime="nowTime"
@del="del"
@edit="edit"
@copy="copy"
@@ -163,6 +164,7 @@ export default {
this.tools.loading = true
this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
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 + ''

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

@@ -120,6 +120,17 @@ Vue.mixin({
return bus.timeFormate(this.timezoneToUtcTime(time), format)
}
},
timestampStr: function (time, format = 'yyyy-MM-dd hh:mm:ss') {
const date = new Date(time)
const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
let dateStr = new Date(time).getTime() + localOffset
dateStr = bus.timeFormate(dateStr, format)
if (time) {
return bus.timeFormate(bus.UTCTimeToConfigTimezone(dateStr), format)
} else {
return '-'
}
},
hasButton (code) {
return hasButton(this.$store.getters.buttonList, code)
},