Merge remote-tracking branch 'origin/dev-3.1' into dev-3.1.1_theme
# Conflicts: # nezha-fronted/src/assets/css/common.scss # nezha-fronted/src/assets/css/common/tableCommon.scss # nezha-fronted/src/assets/stylus/main.scss # nezha-fronted/src/components/charts/chart-list.vue # nezha-fronted/src/components/charts/logs.vue # nezha-fronted/src/components/common/alert/alertLabel.vue # nezha-fronted/src/components/common/alert/alertRuleInfo.vue # nezha-fronted/src/components/common/bottomBox/bottomBox.vue # nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue # nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue # nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue # nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue # nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue # nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue # nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue # nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue # nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue # nezha-fronted/src/components/common/detailView/nzDetailView.vue # nezha-fronted/src/components/common/detailView/view/detailViewRight.vue # nezha-fronted/src/components/common/labelFilter/clickSearch.vue # nezha-fronted/src/components/common/multipleTime.vue # nezha-fronted/src/components/common/pickTime.vue # nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue # nezha-fronted/src/components/common/project/L5/topoTooltip.vue # nezha-fronted/src/components/common/project/popData/Info.vue # nezha-fronted/src/components/common/rightBox/alertRuleBox.vue # nezha-fronted/src/components/common/table/alert/alertRuleTable.vue # nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue # nezha-fronted/src/components/common/table/settings/userTable.vue # nezha-fronted/src/components/layout/header.vue # nezha-fronted/src/components/page/alert/alertMessage.vue # nezha-fronted/src/components/page/alert/nzAlertTag.vue # nezha-fronted/src/components/page/asset/components/operation.vue # nezha-fronted/src/components/page/config/mibBrowser.vue # nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue # nezha-fronted/src/components/page/dashboard/explore/logTab.vue # nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue # nezha-fronted/src/components/page/dashboard/overview/overview2.vue # nezha-fronted/src/components/page/dashboard/panel.vue
This commit is contained in:
chenjinsong
@@ -15,7 +15,7 @@
|
||||
>
|
||||
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
|
||||
<template v-slot:top-tool-right>
|
||||
<el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
<pick-time v-model="searchTimeHeader" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
|
||||
@@ -24,6 +24,7 @@
|
||||
<alertMessageTable
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
:loading="tools.loading"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
:now-time="nowTime"
|
||||
@@ -454,6 +455,9 @@ export default {
|
||||
this.deleteBox.show = true
|
||||
},
|
||||
messageDetail (row) {
|
||||
if (row.alertRule.type == 3) {
|
||||
return
|
||||
}
|
||||
this.$get('/alert/rule/' + row.alertRule.id).then(res => {
|
||||
this.currentMsg = { ...row, alertRule: { ...res.data } }
|
||||
this.graphShow = true
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
:table-data="tableData"
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
:table-data="tableData"
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
<cabinet-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="full-width-height">
|
||||
<nz-bottom-data-list
|
||||
<div class="full-width-height endpoint-tab-new">
|
||||
<nz-bottom-data-list
|
||||
:showTitle='showTitle'
|
||||
:api="url"
|
||||
:layout="['searchInput', 'elementSet']"
|
||||
@@ -20,7 +20,7 @@
|
||||
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
|
||||
<div class="margin-r-20 nz-btn-group">
|
||||
<button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
|
||||
v-model="formatTime"
|
||||
type="datetime"
|
||||
@@ -33,13 +33,13 @@
|
||||
>
|
||||
</my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
|
||||
</div>
|
||||
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
|
||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
|
||||
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 28px;">
|
||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}" @click="viewGraph">
|
||||
<i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
|
||||
</button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
|
||||
</button><button @click="dropdownHandler(dropdownShow)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
|
||||
<i class="nz-icon nz-icon-arrow-down"></i>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
|
||||
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover" style="right: 11px;top: 33px;">
|
||||
<span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
|
||||
<el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
|
||||
</div>
|
||||
@@ -57,6 +57,7 @@
|
||||
:hideSameLabels="hideSameLabels"
|
||||
:queryExpression="queryExpression"
|
||||
@changSelection="changSelectionF"
|
||||
@selectedEndpointsChange="selectedEndpointsChange"
|
||||
/>
|
||||
</template>
|
||||
<!-- <template v-slot:pagination>-->
|
||||
@@ -119,7 +120,7 @@ export default {
|
||||
fromBottom: true,
|
||||
selectedEndpoints: [],
|
||||
queryExpression: '',
|
||||
dropdownShow: '',
|
||||
dropdownShow: false,
|
||||
timeout: null,
|
||||
formatTime: '',
|
||||
hideSameLabels: true
|
||||
@@ -192,18 +193,18 @@ export default {
|
||||
this.$refs.endpointQueryTab.viewGraph()
|
||||
},
|
||||
dropdownHandler (show) {
|
||||
if (show) {
|
||||
clearTimeout(this.timeout)
|
||||
if (!show) {
|
||||
this.dropdownShow = true
|
||||
} else {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.dropdownShow = false
|
||||
}, 700)
|
||||
this.dropdownShow = false
|
||||
}
|
||||
},
|
||||
changSelectionF (arr) {
|
||||
this.changSelection = arr
|
||||
},
|
||||
selectedEndpointsChange (n) {
|
||||
this.selectedEndpoints = n
|
||||
},
|
||||
toTop (wrap) {
|
||||
let currentTop = wrap.scrollTop
|
||||
const interval = currentTop / 10
|
||||
@@ -219,3 +220,14 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.full-width-height{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.control-icon-unchecked {
|
||||
color: #bcbec2;
|
||||
cursor: not-allowed;
|
||||
background-color: #f4f4f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,727 @@
|
||||
<style scope>
|
||||
.chart-bottom {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.plTableBox.nz-table /deep/ .el-table{
|
||||
display: block !important;
|
||||
}
|
||||
.project-calendar{
|
||||
margin-top: 2px;
|
||||
}
|
||||
.control-icon-unchecked {
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.endpoint-dialog .el-dialog__body{
|
||||
height: calc(100% - 48px) !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<span style="z-index: 1999;position: relative">
|
||||
<div class="sub-top-tools">
|
||||
<div class="sub-list-tabs">
|
||||
<div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
|
||||
class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
|
||||
<div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
|
||||
</div>
|
||||
<div class="top-tool-right">
|
||||
<div class="top-tool-search margin-r-20">
|
||||
<el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput" @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable :placeholder="$t('project.endpoint.promExpr')" >
|
||||
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
|
||||
<button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
|
||||
v-model="formatTime"
|
||||
type="datetime"
|
||||
size="mini"
|
||||
class="project-calendar nz-input-group-middle"
|
||||
clearable
|
||||
:time-arrow-control="true"
|
||||
placeholder="Moment"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="pickTime"
|
||||
>
|
||||
</my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
|
||||
</div>
|
||||
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
|
||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
|
||||
<i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
|
||||
</button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
|
||||
<i class="nz-icon nz-icon-arrow-down"></i>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
|
||||
<span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
|
||||
<el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
|
||||
</div>
|
||||
</transition>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
|
||||
<pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
|
||||
:pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-loading="loading"
|
||||
v-if="tableShow && plTableSHow" id="endpoint-list-table" :tooltip-effect="'light'" @selection-change="selectChange">
|
||||
<pl-table-column
|
||||
type="selection"
|
||||
width="39"
|
||||
align="center"
|
||||
column-key="sel"
|
||||
:selectable="selectable">
|
||||
</pl-table-column>
|
||||
<pl-table-column
|
||||
prop="element"
|
||||
:resizable="true"
|
||||
:min-width="1000"
|
||||
column-key="element"
|
||||
:show-overflow-tooltip="true"
|
||||
:label="$t('project.endpoint.element')">
|
||||
<template v-slot="scope">
|
||||
<el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
|
||||
<div>
|
||||
<ul>
|
||||
<li><span class="metirc-tip-list">metric : </span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}}</span></li>
|
||||
<li><span class="metirc-tip-list">type : </span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
|
||||
<li><span class="metirc-tip-list">help : </span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'--'}}</span></li>
|
||||
<li><span class="metirc-tip-list">unit : </span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'--'}}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
|
||||
</el-popover>
|
||||
<span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
|
||||
</template>
|
||||
</pl-table-column>
|
||||
<pl-table-column
|
||||
:resizable="false"
|
||||
prop="value"
|
||||
column-key="value"
|
||||
:label="$t('project.endpoint.value')"
|
||||
min-width="180">
|
||||
</pl-table-column>
|
||||
</pl-table>
|
||||
<button :class="{'to-top-is-hover': tools.tableHover}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn" id="endpoint-list-totop"><i class="nz-icon nz-icon-top"></i></button>
|
||||
|
||||
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
|
||||
:title="$t('project.endpoint.dialogTitle')"
|
||||
:visible.sync="graphShow"
|
||||
width="90%"
|
||||
:modal-append-to-body="false"
|
||||
id="viewGraphDialog"
|
||||
@close="dialogClose">
|
||||
<div slot="title">
|
||||
{{$t("project.endpoint.dialogTitle")}}
|
||||
<div class="float-right panel-calendar dialog-tool" style="display: flex">
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
|
||||
<button @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal-new" v-has="'project_endpoint_query_chart_toAdd'" id="endpoint-query-full-chart-save">{{$t('dashboard.metric.saveChart')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime"></chart>
|
||||
</el-dialog>
|
||||
<transition name="right-box">
|
||||
<chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
|
||||
</transition>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartBox from '../../../page/dashboard/chartBox'
|
||||
import axios from 'axios'
|
||||
import bus from '../../../../libs/bus'
|
||||
import chart from '../../../page/dashboard/overview/chart'
|
||||
|
||||
let timeout
|
||||
let internal
|
||||
export default {
|
||||
name: 'endpointQueryTab',
|
||||
components: {
|
||||
'chart-box': chartBox,
|
||||
chart: chart
|
||||
},
|
||||
props: {
|
||||
obj: Object, // 关联的实体对象
|
||||
from: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: {},
|
||||
tableShow: true,
|
||||
dropdownShow: false,
|
||||
loading: false,
|
||||
tools: {
|
||||
showTopBtn: false, // 主列表top按钮
|
||||
tableHover: false
|
||||
},
|
||||
currentEndpoint: {},
|
||||
queryData: [], // endpoint 查询列表数据
|
||||
tableData: [],
|
||||
tableDataCopy: '',
|
||||
queryExpression: '',
|
||||
elementMetricDatas: [], // element 列提示信息列表
|
||||
formatTime: '', // 查询endpoint的时间，
|
||||
selectedEndpoints: [], // 选中的metric{label='value'}
|
||||
chartDatas: [], // 从query_range查询到的数据
|
||||
legend: [], // echart legend
|
||||
graphShow: false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
|
||||
panelData: [], // chart-box的panel下拉框数据,
|
||||
hideSameLabels: true,
|
||||
sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
|
||||
chartUnit: 5,
|
||||
rightBox: { show: false },
|
||||
plTableSHow: true,
|
||||
scrollTop: 0,
|
||||
scrollbarWrap: null,
|
||||
minusTime: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab (tab) {
|
||||
this.$emit('changeTab', tab)
|
||||
},
|
||||
saveChart () { // 新增chart
|
||||
const chart = {
|
||||
title: '',
|
||||
type: 'line',
|
||||
span: 12,
|
||||
height: '400',
|
||||
unit: this.chartUnit,
|
||||
param: {
|
||||
url: '',
|
||||
threshold: ''
|
||||
},
|
||||
elements: [],
|
||||
panel: '',
|
||||
sync: 0
|
||||
}
|
||||
for (let i = 0; i < this.selectedEndpoints.length; i++) {
|
||||
if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element !== '') {
|
||||
chart.elements.push({ chartId: '', expression: this.selectedEndpoints[i].element, type: 'expert' })
|
||||
}
|
||||
}
|
||||
this.chart = chart
|
||||
this.rightBox.show = true
|
||||
},
|
||||
dropdownHandler (show) {
|
||||
if (show) {
|
||||
clearTimeout(timeout)
|
||||
this.dropdownShow = true
|
||||
} else {
|
||||
timeout = setTimeout(() => {
|
||||
this.dropdownShow = false
|
||||
}, 700)
|
||||
}
|
||||
},
|
||||
createSuccess (type, response, param, panel) {
|
||||
this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'success'
|
||||
}).then(() => {
|
||||
bus.$emit('menu-change', 'panel')
|
||||
this.$store.state.showPanel.id = panel.id
|
||||
this.$store.state.showPanel.name = panel.name
|
||||
this.$router.push({
|
||||
path: '/panel',
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
tableReload () {
|
||||
const table = this.$refs.endpointQueryTable
|
||||
internal = setInterval(() => {
|
||||
if (!window.resizing) {
|
||||
table.setHeight()
|
||||
clearInterval(internal)
|
||||
}
|
||||
}, 200)
|
||||
},
|
||||
queryEndpoint () {
|
||||
this.loading = true
|
||||
this.queryElementTips()
|
||||
this.queryData = []
|
||||
this.tableData = []
|
||||
this.tableDataCopy = ''
|
||||
setTimeout(() => {
|
||||
this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response => {
|
||||
this.loading = false
|
||||
if (response.status === 'success') {
|
||||
const results = response.data.result
|
||||
this.queryData = JSON.parse(JSON.stringify(results))
|
||||
this.tableData = this.handlerTableData(results)
|
||||
this.tableDataCopy = JSON.stringify(this.tableData)
|
||||
this.$nextTick(this.$refs.endpointQueryTable.doLayout())
|
||||
if (!this.scrollbarWrap) {
|
||||
this.$nextTick(() => {
|
||||
this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
|
||||
this.toTopBtnHandler(this.scrollbarWrap)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 450)
|
||||
},
|
||||
clearSelectedMetrics () {
|
||||
this.$refs.endpointQueryTable.clearSelection()
|
||||
},
|
||||
changeTime (size, unit) {
|
||||
this.formatTime = this.getTime(size, unit)
|
||||
this.showEndpoint()
|
||||
},
|
||||
pickTime () {
|
||||
this.showEndpoint()
|
||||
},
|
||||
getTime (size, unit) { // 计算时间
|
||||
const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(this.formatTime)
|
||||
if (unit) {
|
||||
switch (unit) {
|
||||
case 'y':
|
||||
now.setFullYear(now.getFullYear() + size)
|
||||
break
|
||||
case 'M':
|
||||
now.setMonth(now.getMonth() + size)
|
||||
break
|
||||
case 'd':
|
||||
now.setDate(now.getDate() + size)
|
||||
break
|
||||
case 'h':
|
||||
now.setHours(now.getHours() + size)
|
||||
break
|
||||
case 'm':
|
||||
now.setMinutes(now.getMinutes() + size)
|
||||
break
|
||||
case 's':
|
||||
now.setSeconds(now.getSeconds() + size)
|
||||
break
|
||||
default:
|
||||
console.error('unit error')
|
||||
}
|
||||
} else {
|
||||
now.setSeconds(now.getSeconds() + size)
|
||||
}
|
||||
const year = now.getFullYear()
|
||||
let month = now.getMonth() + 1
|
||||
month = month < 10 ? '0' + month : month
|
||||
let day = now.getDate()
|
||||
day = day < 10 ? '0' + day : day
|
||||
let hour = now.getHours()
|
||||
hour = hour < 10 ? '0' + hour : hour
|
||||
let minute = now.getMinutes()
|
||||
minute = minute < 10 ? '0' + minute : minute
|
||||
let second = now.getSeconds()
|
||||
second = second < 10 ? '0' + second : second
|
||||
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
|
||||
},
|
||||
handlerTableData (results) {
|
||||
const tableData = []
|
||||
for (const result of results) {
|
||||
const metricName = result.metric.__name__
|
||||
let temp = metricName
|
||||
let simpleTemp = metricName// 显示简略信息：隐藏same labels后的结果
|
||||
const metricColor = ''
|
||||
const bracketsColor = '#eb7b18'// #eb7b18
|
||||
const labelColor = '#65bbd1'// #66d9ef
|
||||
const valueColor = '#61c261'// #74e680
|
||||
let colorTemp = `<span style="${metricColor}">${metricName}</span>`
|
||||
let colorSimpleTemp = `<span>${metricName}</span>`
|
||||
let metricTip = {}
|
||||
const queryInfos = (this.elementMetricDatas.filter((item) => {
|
||||
return item.metric === temp
|
||||
}))
|
||||
if (queryInfos && queryInfos.length > 0) {
|
||||
metricTip = queryInfos[0]
|
||||
} else {
|
||||
metricTip.metric = temp
|
||||
}
|
||||
delete result.metric.__name__
|
||||
temp += '{'
|
||||
simpleTemp += '{'
|
||||
colorTemp += `<span style="color: ${bracketsColor}">{</span>`
|
||||
colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`
|
||||
const keys = Object.keys(result.metric)
|
||||
for (const index in keys) {
|
||||
const key = keys[index]
|
||||
temp += key + "='" + result.metric[key] + "',"
|
||||
colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
|
||||
if (!this.sameLabels.some((i) => { return i == key })) {
|
||||
simpleTemp += key + "='" + result.metric[key] + "',"
|
||||
colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
|
||||
}
|
||||
}
|
||||
if (temp.indexOf(',') !== -1) {
|
||||
temp = temp.substr(0, temp.length - 1)
|
||||
}
|
||||
if (simpleTemp.indexOf(',') !== -1) {
|
||||
simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
|
||||
}
|
||||
if (colorTemp.indexOf(',') !== -1) {
|
||||
colorTemp = colorTemp.substr(0, colorTemp.length - 1)
|
||||
}
|
||||
if (colorSimpleTemp.indexOf(',') !== -1) {
|
||||
colorSimpleTemp = colorSimpleTemp.substr(0, colorSimpleTemp.length - 1)
|
||||
}
|
||||
|
||||
temp += '}'
|
||||
simpleTemp += '}'
|
||||
colorTemp += `<span style="color: ${bracketsColor}">}</span>`
|
||||
colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`
|
||||
if (!/.+\{.+\}/.test(simpleTemp)) {
|
||||
simpleTemp = simpleTemp.substr(0, simpleTemp.length - 2)
|
||||
}
|
||||
|
||||
if (!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)) {
|
||||
const metricReg = new RegExp('<span.*?>' + metricName + '<\/span>')
|
||||
colorSimpleTemp = metricReg.exec(colorSimpleTemp)[0]
|
||||
}
|
||||
|
||||
const edpQueryData = { element: temp, simpleElement: simpleTemp, colorElement: colorTemp, colorSimpleElement: colorSimpleTemp, value: result.value[1], type: (result.metric.type ? result.metric.type : '2'), metricTip: metricTip }
|
||||
// this.tableData.push(edpQueryData);
|
||||
tableData.push(edpQueryData)
|
||||
}
|
||||
return tableData
|
||||
},
|
||||
selectChange (selection) { // selection 选中的row的数组
|
||||
this.selectedEndpoints = selection
|
||||
},
|
||||
selectable (row, index) {
|
||||
if (this.selectedEndpoints.length >= 20 && !this.selectedEndpoints.includes(row)) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
viewGraph () {
|
||||
if (this.selectedEndpoints.length < 1) {
|
||||
return
|
||||
}
|
||||
|
||||
this.chartDatas = []
|
||||
this.legend = []
|
||||
this.graphShow = true
|
||||
this.$refs.pickTime.$refs.multipleTime.searchTime = []
|
||||
this.$refs.pickTime.$refs.multipleTime.showTime = {
|
||||
id: 12,
|
||||
text: this.$t('dashboard.panel.noDate')
|
||||
}
|
||||
this.$refs.pickTime.$refs.multipleTime.showDropdown = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs.endpointChart.startLoading()
|
||||
this.queryChartDate()
|
||||
})
|
||||
},
|
||||
dialogClose () {
|
||||
this.$refs.pickTime.$refs.multipleTime.searchTime = []
|
||||
this.$refs.pickTime.$refs.multipleTime.showTime = {
|
||||
id: 12,
|
||||
text: this.$t('dashboard.panel.noDate')
|
||||
}
|
||||
this.$refs.pickTime.$refs.multipleTime.showDropdown = false
|
||||
this.graphShow = false
|
||||
},
|
||||
chartUnitChange (unit) {
|
||||
this.chartUnit = unit
|
||||
this.$nextTick(() => {
|
||||
this.queryChartDate()
|
||||
})
|
||||
},
|
||||
queryChartDate () {
|
||||
const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
|
||||
const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
|
||||
this.searchTime = [start, end]
|
||||
const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
|
||||
// end - start < 1 day : 15s
|
||||
// end - start < 7 day : 5m
|
||||
// end - start < 30 day : 10m
|
||||
// end - start > 30 day : 30m
|
||||
let step = '15s'
|
||||
if (timeDiff < 1) {
|
||||
step = '15s'
|
||||
} else if (timeDiff < 7) {
|
||||
step = '5m'
|
||||
} else if (timeDiff < 30) {
|
||||
step = '10m'
|
||||
} else {
|
||||
step = '30m'
|
||||
}
|
||||
const axiosArr = []
|
||||
for (const endpoint of this.selectedEndpoints) {
|
||||
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
|
||||
}
|
||||
if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
|
||||
const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
|
||||
const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
|
||||
for (const endpoint of this.selectedEndpoints) {
|
||||
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
|
||||
}
|
||||
}
|
||||
this.legend = []
|
||||
this.chartDatas = []
|
||||
axios.all(axiosArr).then(res => {
|
||||
res.forEach((response, promIndex) => {
|
||||
if (response.status == 200) {
|
||||
if (response.data.status == 'success') {
|
||||
const queryData = response.data.data.result[0]
|
||||
if (queryData) {
|
||||
const chartData = {
|
||||
type: 'line',
|
||||
symbol: 'none', // 去掉点
|
||||
smooth: 0.2,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
}
|
||||
}
|
||||
chartData.name = queryData.metric.__name__
|
||||
let alias = queryData.metric.__name__
|
||||
delete queryData.metric.__name__
|
||||
chartData.name += '{'
|
||||
alias += '{'
|
||||
Object.keys(queryData.metric).forEach((item, index) => {
|
||||
const label = item
|
||||
const value = queryData.metric[label]
|
||||
chartData.name += label + "='" + value + "',"
|
||||
if (!this.sameLabels.some((i) => { return i == label })) {
|
||||
alias += label + "='" + value + "',"
|
||||
}
|
||||
})
|
||||
chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
|
||||
alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
|
||||
chartData.name += '}'
|
||||
alias += '}'
|
||||
if (!/.+\{.+\}/.test(alias)) {
|
||||
alias = alias.substr(0, alias.length - 2)
|
||||
}
|
||||
const legend = {
|
||||
name: chartData.name,
|
||||
alias: alias,
|
||||
// showText:this.formatLegend(chartData.name),
|
||||
isGray: false
|
||||
}
|
||||
if (promIndex >= this.selectedEndpoints.length) {
|
||||
legend.name = 'Previous ' + legend.name
|
||||
chartData.name = legend.name
|
||||
legend.alias = 'Previous ' + legend.alias
|
||||
}
|
||||
this.legend.push(legend)
|
||||
chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
|
||||
return [dpsItem[0] * 1000, Number(dpsItem[1])]
|
||||
})
|
||||
this.chartDatas.push(chartData)
|
||||
}
|
||||
} else {
|
||||
this.$message.error(response.data.error)
|
||||
console.error(response.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.selectedEndpoints.length) {
|
||||
const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
|
||||
this.minusTime = minusTime
|
||||
let cutPoint = 0
|
||||
res.forEach((item, index) => {
|
||||
if (index < res.length / 2) {
|
||||
cutPoint += res[index].data.data.result.length
|
||||
}
|
||||
})
|
||||
this.chartDatas.forEach((item, index) => {
|
||||
if (index >= cutPoint) {
|
||||
this.chartDatas[index].data.forEach((item1, index1) => {
|
||||
item1[0] = item1[0] + minusTime
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.endpointChart) {
|
||||
this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
|
||||
this.$refs.endpointChart.setLegend(this.legend)
|
||||
this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
|
||||
this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
|
||||
this.$refs.endpointChart.modifyOption('grid', 'top', 30)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'left', 0)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'right', 30)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
|
||||
this.$refs.endpointChart.setSeries(this.chartDatas)
|
||||
this.$refs.endpointChart.endLoading()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
cellClass (row) { // 给复选框那一列添加 类名为 ‘disabledCheck’
|
||||
if (row.columnIndex === 0) {
|
||||
return 'disabledCheck'
|
||||
}
|
||||
},
|
||||
getPanelData () { // 获取panel数据
|
||||
this.$get('panel?pageNo=1&pageSize=-1').then(response => {
|
||||
if (response.code === 200) {
|
||||
this.panelData = response.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
tableFilter () {
|
||||
const temp = this
|
||||
const tableDatas = JSON.parse(this.tableDataCopy)
|
||||
this.tableData = tableDatas.filter((item) => {
|
||||
const element = temp.hideSameLabels ? item.simpleElement : item.element
|
||||
return element.indexOf(this.queryExpression) !== -1
|
||||
})
|
||||
},
|
||||
tableFilterHistory (expression) {
|
||||
let metric = ''
|
||||
let labels = []
|
||||
if (/\w*\{.*\}.*/i.test(expression)) {
|
||||
metric = expression.substr(0, expression.indexOf('{'))
|
||||
const labelStr = expression.substr(expression.indexOf('{') + 1, expression.indexOf('}') - expression.indexOf('{') - 1)
|
||||
const labelArr = labelStr.split(',')
|
||||
|
||||
if (labelArr.length > 0) {
|
||||
labels = labelArr.map((item, index) => {
|
||||
const temp = item.split('=')
|
||||
const label = temp[0] ? temp[0] : null
|
||||
const value = temp[1] ? temp[1] : null
|
||||
return label ? { label: label, value: value } : null
|
||||
})
|
||||
}
|
||||
} else {
|
||||
metric = expression
|
||||
}
|
||||
this.tableData = []
|
||||
let sourceData = JSON.parse(JSON.stringify(this.queryData))
|
||||
sourceData = sourceData.filter((item) => {
|
||||
const metricName = item.metric.__name__
|
||||
if (metricName.indexOf(metric) === -1) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (labels.length > 0) {
|
||||
for (const i in labels) {
|
||||
const label = labels[i]
|
||||
if (label && label.label) {
|
||||
const value = item.metric[label.label]
|
||||
let queryVal = label.value
|
||||
if (/^'.+'$/.test(queryVal)) {
|
||||
queryVal = queryVal.substr(1, queryVal.length - 2)
|
||||
}
|
||||
if (!value || value != queryVal) {
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
})
|
||||
for (const i in sourceData) {
|
||||
const item = sourceData[i]
|
||||
// {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
|
||||
const metricName = item.metric.__name__
|
||||
let temp = metricName
|
||||
delete item.metric.__name__
|
||||
temp += '{'
|
||||
const hasLabel = true
|
||||
for (const key in item.metric) {
|
||||
const label = key
|
||||
const value = item.metric[label]
|
||||
temp += label + "='" + value + "',"
|
||||
}
|
||||
temp = temp.charAt(temp.length - 1) == ',' ? temp.substr(0, temp.length - 1) : temp
|
||||
temp += '}'
|
||||
if (hasLabel) {
|
||||
const edpQueryData = { element: temp, value: item.value[1], type: (item.metric.type ? item.metric.type : '2') }
|
||||
this.tableData.push(edpQueryData)
|
||||
}
|
||||
}
|
||||
},
|
||||
focusInput () {
|
||||
let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
|
||||
classVal = classVal.replace('query-input-inactive', 'query-input-active')
|
||||
document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
|
||||
this.$refs.elementQuery.focus()
|
||||
},
|
||||
blurInput () {
|
||||
if (!this.queryExpression || this.queryExpression == '') {
|
||||
setTimeout(function () {
|
||||
let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
|
||||
classVal = classVal.replace('query-input-active', 'query-input-inactive')
|
||||
document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
clearInput () {
|
||||
this.$refs.elementQuery.focus()
|
||||
},
|
||||
queryElementTips: async function () {
|
||||
this.elementMetricDatas = []
|
||||
const response = await axios.get('/metric/metadata?endpointId=' + this.currentEndpoint.id)
|
||||
if (response && response.status === 200) {
|
||||
if (response.data.msg === 'success') {
|
||||
this.elementMetricDatas = response.data.data.list
|
||||
}
|
||||
}
|
||||
},
|
||||
getStateContent (row) {
|
||||
if (row) {
|
||||
if (row.state == 1) {
|
||||
return 'up' + '[' + this.formatUpdateTime(row.lastUpdate) + ']'
|
||||
} else {
|
||||
return 'down' + '[' + this.getStateErrorMsg(row) + ']'
|
||||
}
|
||||
}
|
||||
},
|
||||
formatUpdateTime (date) {
|
||||
const time = new Date(date)
|
||||
const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
|
||||
const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
|
||||
|
||||
return hours + ':' + minutes
|
||||
},
|
||||
getStateErrorMsg (row) {
|
||||
const errCodes = [230009, 230010, 230011]
|
||||
if (row) {
|
||||
if (row.state == 0) {
|
||||
if (errCodes.find((item) => { return row.stateInfo.code == item })) {
|
||||
return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
|
||||
} else {
|
||||
this.$message.error('state code error')
|
||||
return row.stateInfo.msg
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
obj: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
if (n) {
|
||||
this.currentEndpoint = JSON.parse(JSON.stringify(n))
|
||||
this.queryEndpoint()
|
||||
}
|
||||
}
|
||||
},
|
||||
queryExpression (n, o) {
|
||||
const temp = this
|
||||
setTimeout(function () {
|
||||
temp.tableFilter()
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getPanelData()
|
||||
setTimeout(() => { this.$refs.endpointQueryTable.setHeight() }, 700)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -52,6 +52,7 @@
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
class="nz-table endpoint-table"
|
||||
:height="$tableHeight.noPagination"
|
||||
:cell-class-name="messageStyle"
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
<endpoint-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
|
||||
@@ -12,10 +12,18 @@
|
||||
<template v-slot:top-tool-right>
|
||||
<el-input v-model="matchContent" class="margin-r-10" placeholder="" size="small" suffix-icon="el-icon-search" @keyup.enter.native="queryLogData()">
|
||||
<el-select slot="prepend" v-model="matchSymbol" class="symbol-select" size="small" style="width: 60px;">
|
||||
<el-option value="|="></el-option>
|
||||
<el-option value="!="></el-option>
|
||||
<el-option value="|~"></el-option>
|
||||
<el-option value="!~"></el-option>
|
||||
<el-option value="|=">
|
||||
<span style="font-family: Inter-Regular">|=</span>
|
||||
</el-option>
|
||||
<el-option value="!=">
|
||||
<span style="font-family: Inter-Regular">!=</span>
|
||||
</el-option>
|
||||
<el-option value="|~">
|
||||
<span style="font-family: Inter-Regular">|~</span>
|
||||
</el-option>
|
||||
<el-option value="!~">
|
||||
<span style="font-family: Inter-Regular">!~</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
<pick-time id="explore" ref="pickTime" v-model="filterTime" :refresh-data-func="queryLogData" :use-chart-unit="false" :use-refresh="false">
|
||||
@@ -23,8 +31,8 @@
|
||||
</pick-time>
|
||||
</template>
|
||||
<template v-slot>
|
||||
<log-tab ref="logDetail" v-loading="loading" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
|
||||
<div v-if="!logData" v-loading="loading" class="log-no-data">No Data</div>
|
||||
<log-tab ref="logDetail" v-loading="loading" :loading-bottom="endpointLoading" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
|
||||
<!-- <div v-loading="loading" v-if="!logData" style="height: 300px; width: 100%; display: flex; justify-content: center; align-items: center; color: #999;">No Data</div>-->
|
||||
</template>
|
||||
</nz-bottom-data-list>
|
||||
</template>
|
||||
@@ -55,7 +63,8 @@ export default {
|
||||
expressions: [''],
|
||||
matchSymbol: '|=',
|
||||
matchContent: '',
|
||||
loading: true
|
||||
loading: true,
|
||||
endpointLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -110,6 +119,11 @@ export default {
|
||||
})
|
||||
axios.all(requestArr).then(res => {
|
||||
this.logData = res.map(r => r.data)
|
||||
if (this.logData[0].result.length > 0) {
|
||||
this.endpointLoading = false
|
||||
} else {
|
||||
this.endpointLoading = true
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
<operation-log-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
<terminal-log-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
|
||||
Reference in New Issue
Block a user