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

Merge branch 'dev-3.2' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3

Browse Source
This commit is contained in:
zhangyu
2022-03-14 16:23:16 +08:00
parent c7573eb09c 26a1999bf5
commit 274015ecf1
130 changed files with 1171 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
View File

@@ -1,133 +1,138 @@
<template>
<!--表格-->
<el-table
id="alertMessageTable"
ref="dataTable"
:cell-class-name="labelsClassName"
:data="tableData"
:height="height"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
@row-dblclick="(row)=>{rowDblclick(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}`"
<div style="height: 100%;">
<!--表格-->
<el-table
id="alertMessageTable"
ref="dataTable"
:cell-class-name="labelsClassName"
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
@row-dblclick="(row)=>{rowDblclick(row)}"
>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'alertRule'">
<div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
<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}`"
>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'alertRule'">
<div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
<span
@mouseenter="alertMessageHover(scope.row.alertRule, true, $event)"
@mouseleave="alertMessageHover(scope.row.alertRule, false)"
@mouseenter="alertMessageHover(scope.row, true, $event)"
@mouseleave="alertMessageHover(scope.row, false)"
>{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
<alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo>
</div>
<template v-else>-</template>
</template>
<template v-else-if="item.prop === 'summary'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
</template>
<template v-else-if="item.prop === 'description'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-else>-</span>
</template>
<template v-else-if="item.prop === 'remark'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-else>-</span>
</template>
<span v-else-if="item.prop === 'severityId'&&scope.row['severity']" class="severity">
</div>
<template v-else>-</template>
</template>
<template v-else-if="item.prop === 'summary'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
</template>
<template v-else-if="item.prop === 'description'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-else>-</span>
</template>
<template v-else-if="item.prop === 'remark'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-else>-</span>
</template>
<span v-else-if="item.prop === 'severityId'&&scope.row['severity']" class="severity">
<i :style="{color:scope.row['severity'].color,'font-size':'12px','margin-right':'5px'}" class="nz-icon nz-icon-circle"></i> {{scope.row['severity'].name}}
</span>
<span v-else-if="item.prop === 'startAt'">{{utcTimeToTimezoneStr(scope.row.startAt)}}</span>
<template v-else-if="item.prop === 'duration'">
<el-tooltip :disabled="!scope.row.endAt" effect="light" placement="right">
<div slot="content">
{{$t('config.terminallog.endTime')}}<br/>
{{utcTimeToTimezoneStr(scope.row.endAt)}}
</div>
<span>{{getDuration(scope.row)}}</span>
</el-tooltip>
</template>
<template v-else-if="item.prop === 'labels'" class="labels">
<span v-else-if="item.prop === 'startAt'">{{utcTimeToTimezoneStr(scope.row.startAt)}}</span>
<span v-else-if="item.prop === 'lastAt'">{{utcTimeToTimezoneStr(scope.row.lastAt)}}</span>
<template v-else-if="item.prop === 'duration'">
<el-tooltip :disabled="!scope.row.endAt" effect="light" placement="right">
<div slot="content">
{{$t('config.terminallog.endTime')}}<br/>
{{utcTimeToTimezoneStr(scope.row.endAt)}}
</div>
<span>{{getDuration(scope.row)}}</span>
</el-tooltip>
</template>
<template v-else-if="item.prop === 'labels'" class="labels">
<span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
<span
@mouseenter="labelHover(scope.row, item.label, true, $event)"
@mouseleave="labelHover(scope.row, item.label, false)">
@mouseenter="labelHover(scope.row, item.label, true, true, $event)"
@mouseleave="labelHover(scope.row, item.label, false, true,)">
<nz-alert-tag
v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'"
:label="item.label"
:type="tagType(item.label)"
style="margin: 5px 0 5px 5px;"
v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'"
:label="item.label"
:type="tagType(item.label)"
style="margin: 5px 0 5px 5px;"
>
{{item.value}}
</nz-alert-tag>
</span>
<alertLabel
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project' || item.label === 'dc' ||item.label === 'endpoint' ||item.label === 'cpu' ||item.label === 'user' ||item.label === 'parent_asset') && scope.row[item.label] && scope.row[item.label].loading"
:id="scope.row[item.label].id"
:that="scope.row[item.label]"
:type="item.label"
:alert-table-dialog="chartAlertList"
></alertLabel>
</span>
</template>
<span v-else-if="item.prop === 'state'">
<span class="alert-message-state" :class="{'green-bg': scope.row['state'] == 3, 'red-bg': scope.row['state'] == 1,'yellow-bg': scope.row['state'] == 2}">
{{$t(stateOptions.find(state=>state.value == scope.row['state']).label)}}
</span>
</span>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
<span v-else-if="item.prop === 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
{{scope.row['state'] == 1 ? "Pending" : ""}}
{{scope.row['state'] == 2 ? "Expired" : ""}}
</span>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</el-table-column>
<el-table-column
v-if="showOption"
:resizable="false"
:width="operationWidth"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown v-has="['alertMessage_expired', 'alertSilence_add']" size="medium" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<!-- <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
<el-dropdown-item v-has="'alertMessage_view'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</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-column>
<el-table-column
v-if="showOption"
:resizable="false"
:width="operationWidth"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown v-has="['alertMessage_expired', 'alertSilence_add']" size="medium" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<!-- <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
<el-dropdown-item v-has="'alertMessage_view'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</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>
</el-table>
<alertRuleInfo v-if="alertRuleShow" :id="alertRuleId" :severity-data="severityData" :that="alertRuleObj.alertRule" @showText="$emit('showText',alertRuleObj)"></alertRuleInfo>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
:alert-table-dialog="chartAlertList"
></alertLabel>
</div>
</template>
<script>
@@ -139,6 +144,8 @@ import chartDataFormat from '../../../charts/chartDataFormat'
import alertRuleInfo from '../../alert/alertRuleInfo'
import alertLabel from '../../alert/alertLabel'
import { calcDurationByStringTimeB } from '../../js/tools'
import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default {
name: 'alertMessageTable',
components: {
@@ -158,13 +165,13 @@ export default {
loading: Boolean,
chartAlertList: Boolean
},
mixins: [table, bus],
mixins: [table, bus, alertLabelMixin],
data () {
return {
/* 二级列表相关 */
tabList: [], // 二级列表的标签
tabDetailList: [], // 多个详情
stateOptions: alertMessageConstant.states,
// 详情相关
graphShow: false,
chartDatas: [],
@@ -176,6 +183,7 @@ export default {
chartUnit: 5,
severityData: [],
tableTitle: [
{
label: 'ID',
prop: 'id',
@@ -211,13 +219,27 @@ export default {
prop: 'description',
show: true,
minWidth: 200
}, {
label: this.$t('alert.list.state'),
prop: 'state',
show: true,
width: 100
// sortable: 'custom'
}, {
label: this.$t('alert.startAt'),
prop: 'startAt',
show: true,
width: 150,
sortable: 'custom'
}, {
},
// {
// label: this.$t('alert.lastAt'),
// prop: 'lastAt',
// show: true,
// width: 150,
// sortable: 'custom'
// },
{
label: this.$t('config.terminallog.duration'),
prop: 'duration',
show: true,
@@ -225,7 +247,10 @@ export default {
}
],
viewAssetState: false,
tableDataInitNum: 0
tableDataInitNum: 0,
alertRuleShow: false,
alertRuleId: '',
alertRuleObj: ''
}
},
computed: {
@@ -544,38 +569,17 @@ export default {
this.$refs.moduleBox.show(false, false)
this.viewAssetState = false
},
// label tooltip是否显示
labelToolTipDis (labelType) {
switch (labelType) {
case 'asset':
case 'module':
case 'endpoint':
case 'project':
case 'dc':
return false
default: return true
}
},
// alertName鼠标划入
alertMessageHover (item, loading, e) {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item, 'position', position)
this.$set(item.alertRule, 'position', position)
this.alertRuleId = item.alertRule.id
this.alertRuleObj = item
}
this.$set(item, 'loading', loading)
},
// label 鼠标划入
labelHover (item, type, loading, e) {
if (this.labelToolTipDis(type)) {
return
}
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item[type], 'position', position)
}
this.$set(item[type], 'loading', loading)
this.$set(item.alertRule, 'loading', loading)
this.alertRuleShow = loading
},
// Severity Label
returnSeverityLabel (key) {

1
nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
View File

@@ -6,6 +6,7 @@
:height="height"
tooltip-effect="light"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

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

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

287
nezha-fronted/src/components/common/table/asset/assetTable.vue
View File

@@ -1,50 +1,51 @@
<template>
<el-table
id="roleTable"
ref="dataTable"
class="asset-table2"
:data="tableData"
:height="height"
:default-sort="orderBy"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
@row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', 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}`"
class="data-column"
<div style="height: 100%">
<el-table
id="roleTable"
ref="dataTable"
class="asset-table2"
:data="tableData"
:height="height"
:default-sort="orderBy"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
@row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', row)}"
>
<template slot="header">
<span class="data-column__span">{{item.label}} <i class="nz-icon nz-icon-label" v-if="item.type==='label'" style="color: #fa901c"/></span>
<div class="col-resize-area"></div>
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
<template v-else-if="item.prop === 'state'">{{scope.row.state ? scope.row.state.name : '-'}}</template>
<template v-else-if="item.prop === 'endpointNum'">
<span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
<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}`"
class="data-column"
>
<template slot="header">
<span class="data-column__span">{{item.label}} <i class="nz-icon nz-icon-label" v-if="item.type==='label'" style="color: #fa901c"/></span>
<div class="col-resize-area"></div>
</template>
<template v-else-if="item.prop === 'alertNum'">
<!-- v-my-loading:ldsFacebook="scope.row.trendLoading"-->
<span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
<template v-else-if="item.prop === 'state'">{{scope.row.state ? scope.row.state.name : '-'}}</template>
<template v-else-if="item.prop === 'endpointNum'">
<span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
</template>
<template v-else-if="item.prop === 'alertNum'">
<!-- v-my-loading:ldsFacebook="scope.row.trendLoading"-->
<span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
<div class="tooltip-title">Alert message (active)</div>
@@ -54,113 +55,114 @@
</div>
</div>
<alertDaysInfo
v-show="!scope.row.trendLoading"
:alertDaysData="scope.row.alertDaysData"
v-show="!scope.row.trendLoading"
:alertDaysData="scope.row.alertDaysData"
/>
</span>
</template>
<template v-else-if="item.prop === 'dc'">{{scope.row.dc ? scope.row.dc.name : '-'}}</template>
<template v-else-if="item.prop === 'cabinet'">
<span v-if="scope.row.cabinet && scope.row.cabinet !== '--'">{{scope.row.cabinet.name}}&nbsp;{{returnCabinet( scope.row.cabinetStart, scope.row.cabinetEnd)}}</span>
<span v-else >-</span>
</template>
<template v-else-if="item.prop === 'pingInfo'">
<div class="ping-info" v-if="scope.row.pingInfo">
<div :class="{'active-icon green-bg':scope.row.pingInfo.status == 1,'active-icon red-bg':scope.row.pingInfo.status == 0}" style="position: relative">
</template>
<template v-else-if="item.prop === 'dc'">{{scope.row.dc ? scope.row.dc.name : '-'}}</template>
<template v-else-if="item.prop === 'cabinet'">
<span v-if="scope.row.cabinet && scope.row.cabinet !== '--'">{{scope.row.cabinet.name}}&nbsp;{{returnCabinet( scope.row.cabinetStart, scope.row.cabinetEnd)}}</span>
<span v-else >-</span>
</template>
<template v-else-if="item.prop === 'pingInfo'">
<div class="ping-info" v-if="scope.row.pingInfo">
<div :class="{'active-icon green-bg':scope.row.pingInfo.status == 1,'active-icon red-bg':scope.row.pingInfo.status == 0}" style="position: relative">
</div>
<div class="active-icon-content">{{$t('asset.assetStatPre')+(scope.row.pingInfo.lastUpdate?utcTimeToTimezoneStr(scope.row.pingInfo.lastUpdate):$t('asset.assetStatDown'))}}</div>
{{scope.row.pingInfo.rtt?scope.row.pingInfo.rtt+'ms':''}}
</div>
<div class="active-icon-content">{{$t('asset.assetStatPre')+(scope.row.pingInfo.lastUpdate?utcTimeToTimezoneStr(scope.row.pingInfo.lastUpdate):$t('asset.assetStatDown'))}}</div>
{{scope.row.pingInfo.rtt?scope.row.pingInfo.rtt+'ms':''}}
</div>
</template>
<template v-else-if="item.prop === 'model'">{{scope.row.model ? scope.row.model.name : '-'}}</template>
<template v-else-if="item.prop === 'parent'">
</template>
<template v-else-if="item.prop === 'model'">{{scope.row.model ? scope.row.model.name : '-'}}</template>
<template v-else-if="item.prop === 'parent'">
<span
v-if="scope.row.parent"
style="cursor: pointer"
@mouseenter="labelHover(scope.row, 'asset', true, $event)"
@mouseleave="labelHover(scope.row, 'asset', false)">
@mouseenter="labelHover(scope.row, 'asset', true, false, $event)"
@mouseleave="labelHover(scope.row, 'asset', false, false)">
{{scope.row.parent.name}}
<alertLabel
v-if="scope.row.loading"
:id="scope.row.pid"
:that="scope.row"
:type="'asset'"
></alertLabel>
</span>
<span v-else> - </span>
</template>
<template v-else-if="item.prop === 'children'">
<div @click="$emit('showBottomBox', 'assetSubTab', scope.row)" v-if="scope.row.childrenNum" style="cursor: pointer">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
{{scope.row.childrenNum}}</div>
<!-- <span v-else-if="scope.row.pid == -1"> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>-->
<span v-else> - </span>
</template>
<template v-else-if="item.prop === 'clientState'">
<div v-if="scope.row[item.prop]===1">
<div class="active-icon green-bg inline-block"></div>
OK
</div>
<div v-else-if="scope.row[item.prop]===0">
<div class="active-icon gray-bg inline-block"></div> {{ $t('config.user.disable') }}
</div>
<div v-else-if="scope.row[item.prop]===2">
<div class="active-icon red-bg inline-block"></div> {{ $t('asset.connectionTimedOut') }}
</div>
<div v-else-if="scope.row[item.prop]===3">
<div class="active-icon red-bg inline-block"></div> {{ $t('overall.AuthenticationFailed') }}
</div>
<div v-else-if="scope.row[item.prop]===4">
<div class="active-icon red-bg inline-block"></div> {{ $t('config.terminallog.statusItem.unknownError') }}
</div>
<template v-else>-</template>
</template>
<template v-else-if="item.prop === 'brand'">{{scope.row.brand ? scope.row.brand.name : '-'}}</template>
<template v-else-if="item.prop === 'purchaseDate'">{{scope.row.purchaseDate ? scope.row.purchaseDate : '-'}}</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
<template v-else>
<span v-else> - </span>
</template>
<template v-else-if="item.prop === 'children'">
<div @click="$emit('showBottomBox', 'assetSubTab', scope.row)" v-if="scope.row.childrenNum" style="cursor: pointer">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
{{scope.row.childrenNum}}</div>
<!-- <span v-else-if="scope.row.pid == -1"> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>-->
<span v-else> - </span>
</template>
<template v-else-if="item.prop === 'clientState'">
<div v-if="scope.row[item.prop]===1">
<div class="active-icon green-bg inline-block"></div>
OK
</div>
<div v-else-if="scope.row[item.prop]===0">
<div class="active-icon gray-bg inline-block"></div> {{ $t('config.user.disable') }}
</div>
<div v-else-if="scope.row[item.prop]===2">
<div class="active-icon red-bg inline-block"></div> {{ $t('asset.connectionTimedOut') }}
</div>
<div v-else-if="scope.row[item.prop]===3">
<div class="active-icon red-bg inline-block"></div> {{ $t('overall.AuthenticationFailed') }}
</div>
<div v-else-if="scope.row[item.prop]===4">
<div class="active-icon red-bg inline-block"></div> {{ $t('config.terminallog.statusItem.unknownError') }}
</div>
<template v-else>-</template>
</template>
<template v-else-if="item.prop === 'brand'">{{scope.row.brand ? scope.row.brand.name : '-'}}</template>
<template v-else-if="item.prop === 'purchaseDate'">{{scope.row.purchaseDate ? scope.row.purchaseDate : '-'}}</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
<template v-else>
<span v-if="scope.row.fields&&scope.row.fields.find(field => field.name === item.prop)">
{{scope.row.fields.find(field => field.name === item.prop).value.join(',')}}
</span>
<span v-else>
<span v-else>
{{scope.row[item.prop]}}
</span>
</template>
</template>
</el-table-column>
<el-table-column
:resizable="false"
v-if="showOption"
:width="operationWidth"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button v-if="assetTab" class="table-operation-item" v-has="'model_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['asset_edit','asset_connect','asset_add','asset_delete', 'alertSilence_add']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</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-column>
<el-table-column
:resizable="false"
v-if="showOption"
:width="operationWidth"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button v-if="assetTab" class="table-operation-item" v-has="'model_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['asset_edit','asset_connect','asset_add','asset_delete', 'alertSilence_add']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</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>
</el-table>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
></alertLabel>
</div>
</template>
<script>
@@ -169,9 +171,10 @@ import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools
// import bus from '@/libs/bus'
import alertLabel from '@/components/common/alert/alertLabel'
import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default {
name: 'assetTable',
mixins: [table],
mixins: [table, alertLabelMixin],
components: {
alertLabel: alertLabel,
alertDaysInfo
@@ -337,16 +340,6 @@ export default {
this.bottomBox.targetTab = 'endpoint'
this.bottomBox.showSubList = true
},
// label 鼠标划入
labelHover (item, type, loading, e) {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item, 'position', position)
}
this.$set(item, 'loading', loading)
// this.$set(this.tableData,index,item);// 调用父组件
},
returnCabinet (start, end) { // 返回机柜u位信息
if (!start || !end) {
return ''

1
nezha-fronted/src/components/common/table/settings/agentTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/dcTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

280
nezha-fronted/src/components/common/table/settings/endpointTable.vue
View File

@@ -1,94 +1,78 @@
<template>
<el-table
id="endpointTable"
ref="dataTable"
:data="tableData"
:height="height"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
@row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', 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}`"
class="data-column"
<div style="height: 100%">
<el-table
id="endpointTable"
ref="dataTable"
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
@row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', row)}"
>
<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 === 'name'">
{{scope.row[item.prop]}}
<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}`"
class="data-column"
>
<template slot="header">
<span class="data-column__span">{{item.label}}</span>
<div class="col-resize-area"></div>
</template>
<template v-else-if="item.prop === 'type'">
{{scope.row.module.type}}
</template>
<template v-else-if="item.prop === 'project'">
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'">
{{scope.row[item.prop]}}
</template>
<template v-else-if="item.prop === 'type'">
{{scope.row.module.type}}
</template>
<template v-else-if="item.prop === 'project'">
<span
class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)"
>
{{scope.row[item.prop].name}}
</span>
<alertLabel
v-if="scope.row[item.prop] && scope.row[item.prop].loading"
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'project'"
></alertLabel>
</template>
<template v-else-if="item.prop === 'module'">
</template>
<template v-else-if="item.prop === 'module'">
<span
class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)"
>
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
{{scope.row[item.prop].name}}
</span>
<alertLabel
v-if="scope.row[item.prop] && scope.row[item.prop].loading"
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'module'"
></alertLabel>
</template>
<template v-else-if="item.prop === 'asset'">
</template>
<template v-else-if="item.prop === 'asset'">
<span
class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)"
>
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
{{scope.row.asset.name}}
</span>
<alertLabel
v-if="scope.row[item.prop] && scope.row[item.prop].loading"
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'asset'"
></alertLabel>
</template>
<template v-else-if="item.prop === 'alerts'">
</template>
<template v-else-if="item.prop === 'alerts'">
<span style="cursor: pointer" @click="showBottomBox('endpointAlertMessage', scope.row)">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
@@ -103,27 +87,27 @@
:alertDaysData="scope.row.alertDaysData"
/>
</span>
</template>
<template v-else-if="item.prop === 'configs'">
</template>
<template v-else-if="item.prop === 'configs'">
<span class="configs-endpoint metrics"
@mouseenter="labelHover(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false, $event, true)">
@mouseenter="labelHover1(scope.row, item.prop, true, $event)"
@mouseleave="labelHover1(scope.row, item.prop, false, $event, true)">
[{{scope.row.configs[0].enable ? 'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ? 'logs' : ''}}]
</span>
<nz-tooltip :that="scope.row[item.prop]" class="data-column__" v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop">
<div name="default">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span>
<pre class="copy-value-content__pre">{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
</div>
</nz-tooltip>
</template>
<nz-tooltip :that="scope.row[item.prop]" class="data-column__" v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop">
<div name="default">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span>
<pre class="copy-value-content__pre">{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
</div>
</nz-tooltip>
</template>
<template v-else-if="item.prop === 'state'">
<!-- metrics-->
<span style="width: auto;display: inline-block;cursor: pointer"
@mouseenter="labelHoverConfigs(scope.row, 0, true, $event)"
@mouseleave="labelHoverConfigs(scope.row, 0, false, $event)"
>
<template v-else-if="item.prop === 'state'">
<!-- metrics-->
<span style="width: auto;display: inline-block;cursor: pointer"
@mouseenter="labelHoverConfigs(scope.row, 0, true, $event)"
@mouseleave="labelHoverConfigs(scope.row, 0, false, $event)"
>
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
<span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
<span class="active-icon red-bg inline-block"></span>
@@ -135,15 +119,15 @@
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
<nz-tooltip :that="scope.row.configs[0]" v-if="scope.row.configs[0] && scope.row.configs[0].loading && scope.row.configs[0].state > 1" :type="'configs[0]'">
<div name="default">
<div v-html="suspendedStr(scope.row.configs[0].state)"></div>
</div>
</nz-tooltip>
<!-- logs-->
<span style="width: auto;display: inline-block;cursor: pointer"
@mouseenter="labelHoverConfigs(scope.row, 1, true, $event)"
@mouseleave="labelHoverConfigs(scope.row, 1, false, $event)">
<nz-tooltip :that="scope.row.configs[0]" v-if="scope.row.configs[0] && scope.row.configs[0].loading && scope.row.configs[0].state > 1" :type="'configs[0]'">
<div name="default">
<div v-html="suspendedStr(scope.row.configs[0].state)"></div>
</div>
</nz-tooltip>
<!-- logs-->
<span style="width: auto;display: inline-block;cursor: pointer"
@mouseenter="labelHoverConfigs(scope.row, 1, true, $event)"
@mouseleave="labelHoverConfigs(scope.row, 1, false, $event)">
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
<span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
<span class="active-icon red-bg inline-block"></span>
@@ -155,66 +139,74 @@
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
<nz-tooltip :that="scope.row.configs[1]" v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'">
<div name="default">
<div v-html="suspendedStr(scope.row.configs[1].state)"></div>
<nz-tooltip :that="scope.row.configs[1]" v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'">
<div name="default">
<div v-html="suspendedStr(scope.row.configs[1].state)"></div>
</div>
</nz-tooltip>
</template>
<template v-else-if="item.prop === 'enabled'">
<span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span>
<span v-else>{{$t('project.endpoint.disable')}}</span>
</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
v-if="showOption"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button v-if="endpointTab" class="table-operation-item" v-has="'monitor_endpoint_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete','alertSilence_add']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
</nz-tooltip>
</template>
<template v-else-if="item.prop === 'enabled'">
<span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span>
<span v-else>{{$t('project.endpoint.disable')}}</span>
</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<!-- <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
<el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'endpoint']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</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-column>
<el-table-column
:resizable="false"
:width="operationWidth"
v-if="showOption"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button v-if="endpointTab" class="table-operation-item" v-has="'monitor_endpoint_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete','alertSilence_add']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<!-- <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
<el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'endpoint']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</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>
</el-table>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
></alertLabel>
</div>
</template>
<script>
import table from '@/components/common/mixin/table'
import alertLabel from '../../alert/alertLabel'
import nzTooltip from '../../alert/nzTooltip'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default {
name: 'endpointTable',
components: {
alertLabel,
nzTooltip
},
mixins: [table],
mixins: [table, alertLabelMixin],
props: {
showOption: {
type: Boolean,
@@ -324,7 +316,7 @@ export default {
return str
},
// label 鼠标划入
labelHover (item, type, loading, e, slow) {
labelHover1 (item, type, loading, e, slow) {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()

1
nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

4
nezha-fronted/src/components/common/table/settings/mibTable.vue
View File

@@ -40,8 +40,8 @@
</template>
<template v-else-if="item.prop === 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
<div style="height: 100%">
<div style="height: 100%; overflow: auto;">
<div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
<div style="height: 100%; overflow: auto;" v-if="scope.row['modelsDetail']">
<div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content" v-if="n">
<el-popover placement="top" trigger="hover" >
<div>
<div>

1
nezha-fronted/src/components/common/table/settings/modelTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/moduleTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/operationLogTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
class="no-operation"
@header-dragend="dragend"
@sort-change="tableDataSort"

1
nezha-fronted/src/components/common/table/settings/projectTable.vue
View File

@@ -6,6 +6,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/roleTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

10
nezha-fronted/src/components/common/table/settings/scrapeEndpointTable.vue
View File

@@ -35,7 +35,7 @@
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'endpoint'">{{scope.row.discoveredLabels.endpoint ? scope.row.discoveredLabels.endpoint : '-'}}</template>
<template v-else-if="item.prop === 'lastScrape'">{{scope.row.lastScrape}}</template>
<template v-else-if="item.prop === 'lastScrape'">{{time}}</template>
<template v-else-if="item.prop === 'labels'" class="labels">
<span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
<span>
@@ -137,7 +137,8 @@ export default {
show: true
}
],
exclusiveLabels: ['_id', 'severity', '__name__']
exclusiveLabels: ['_id', 'severity', '__name__'],
time: ''
}
},
computed: {
@@ -156,8 +157,9 @@ export default {
immediate: true,
deep: true,
handler (n) {
n.map(e => {
e.lastScrape = bus.timeFormate(e.lastScrape, this.timeFormatMain)
n.forEach(e => {
const lastScrape = new Date(e.lastScrape).getTime()
this.time = bus.timeFormate(lastScrape, this.timeFormatMain)
})
}
}

1
nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/userTable.vue
View File

@@ -6,6 +6,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

7
nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
View File

@@ -52,11 +52,10 @@
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</div>
<el-dialog
id="viewGraphDialog"
v-if="graphShow"
:visible.sync="graphShow"
:show-close="false"
class="nz-dialog chart-fullscreen"
class="nz-dialog chart-fullscreen endpoint-query-metrics"
destroy-on-close
fullscreen
:modal-append-to-body="false"
@@ -464,12 +463,12 @@ export default {
/* if (refresh) {
this.getData(this.filter)
} */
},
}
},
computed: {
chartRightBoxShow () {
return this.$store.getters.getShowRightBox
},
}
},
created () {
// this.getPanelData()