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

NEZ-894 feat: endpoint-logTab

Browse Source
This commit is contained in:
chenjinsong
2021-08-05 22:25:55 +08:00
parent d829cb432e
commit 61d8e0df1c
12 changed files with 394 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -194,8 +194,7 @@
height: calc(100% - 58px);
.el-table:not(.chart-table) {
position: absolute;
width: calc(100% - 40px);
width: 100%;
border: 1px solid $--right-box-border-color;
border-bottom: none;

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

@@ -47,7 +47,8 @@
<panel-tab-new @getTableData="getTableData" :paramsType="'module'" v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<!--endpoint列表的tab-->
<panel-tab-new @getTableData="getTableData" :paramsType="'endpoint'" v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointQuery>
<log-bottom-tab v-if="from === fromRoute.endpoint && targetTab === 'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></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>
@@ -76,10 +77,12 @@ import operationLogTab from './tabs/operationLogTab'
import terminalLogTab from './tabs/terminalLogTab'
import assetTab from '@/components/common/bottomBox/tabs/assetTab'
import { fromRoute } from '@/components/common/js/constants'
import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
export default {
name: 'bottomBox',
components: {
LogBottomTab,
cabinetTab,
alertMessageTab,
endpointTab,
@@ -186,6 +189,7 @@ export default {
endpointTabTitle: [
{ prop: 'panelTab', name: this.$t('overall.detail') },
{ prop: 'endpointQuery', name: 'Query' },
{ prop: 'log', name: 'Log' },
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') }
]
},
@@ -283,12 +287,15 @@ export default {
}
.sub-container {
padding: 10px;
height: 100%;
height: calc(100% - 64px);
background-color: #f6f6f6;
overflow-y: auto;
&>div {
background-color: white;
}
&>.nz-table2 {
padding-top: 20px !important;
}
}
.sub-top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
@@ -321,7 +328,7 @@ export default {
height: 100%;
background-color: #f6f6f6;
.nz-table2 {
&>.nz-table2 {
height: calc(100% - 92px);
padding: 20px 20px 0;
}
@@ -346,6 +353,14 @@ export default {
padding-bottom: 10px;
height: calc(100% - 30px);
}
.bottom-log {
padding: 15px;
}
.bottom-common {
padding: 20px;
height: 100%;
box-sizing: border-box;
}
.chart-temp{
height: calc(100% - 20px);
overflow-y: auto;

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

@@ -34,7 +34,7 @@
></element-set>
</transition>
<div class="sub-container">
<div :class="[targetTab === 'panel' ? 'bottom-panel' : 'nz-table2',from === fromRoute.chartTemp ? 'chart-temp': '']">
<div :class="subContentClass">
<slot></slot>
</div>
<div class="pagination-bottom" v-if="showPagination">
@@ -89,6 +89,24 @@ export default {
computed: {
bottomHeaderTitle () {
return this.title || this.$t('overall.name')
},
subContentClass () {
const className = []
switch (this.targetTab) {
case 'panel':
className.push('bottom-panel')
break
case 'log': {
className.push('bottom-log')
break
}
default: {
className.push('nz-table2')
break
}
}
this.from === fromRoute.chartTemp && className.push('chart-temp')
return className.join(' ')
}
},
data () {

3
nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
View File

@@ -222,9 +222,6 @@ export default {
width: 100%;
height: 100%;
}
/deep/ .nz-table2{
padding: 0 !important;
}
/deep/ .sub-container {
box-sizing: border-box;
}

223
nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue Normal file
View File

@@ -0,0 +1,223 @@
<template>
<nz-bottom-data-list
:custom-tool="true"
:layout="[]"
:show-pagination="false"
:tabs="tabs"
:targetTab="targetTab"
@changeTab="changeTab"
>
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
<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-select>
</el-input>
<pick-time id="explore" ref="pickTime" v-model="filterTime" :refresh-data-func="queryLogData" :use-chart-unit="false" :use-refresh="false">
<template slot="added-text">{{$t('overall.query')}}</template>
</pick-time>
</template>
<template v-slot>
<log-tab ref="logDetail" :log-data="logData" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
</template>
</nz-bottom-data-list>
</template>
<script>
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
import logTab from '@/components/page/dashboard/explore/logTab'
import subDataListMixin from '@/components/common/mixin/subDataList'
import axios from 'axios'
import bus from '@/libs/bus'
export default {
name: 'logBottomTab',
mixins: [subDataListMixin],
components: {
nzBottomDataList,
logTab
},
data () {
return {
logData: [],
filterTime: [
bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
],
expressions: [''],
matchSymbol: '|=',
matchContent: ''
}
},
methods: {
exportLog ({ limit, descending }) {
const params = {
logql: this.expressions,
start: this.$stringTimeParseToUnix(this.filterTime[0]),
end: this.$stringTimeParseToUnix(this.filterTime[1]),
direction: descending ? 'backward' : 'forward',
limit
}
axios.get('/logs/loki/export', { responseType: 'blob', params: params }).then(res => {
if (window.navigator.msSaveOrOpenBlob) {
// 兼容ie11
const blobObject = new Blob([res.data])
window.navigator.msSaveOrOpenBlob(blobObject, 'log')
} else {
const url = URL.createObjectURL(new Blob([res.data]))
const a = document.createElement('a')
document.body.appendChild(a) // 此处增加了将创建的添加到body当中
a.href = url
a.download = 'log'
a.target = '_blank'
a.click()
a.remove() // 将a标签移除
}
}, error => {
const $self = this
const reader = new FileReader()
reader.onload = function (event) {
const responseText = reader.result
const exception = JSON.parse(responseText)
if (exception.message) {
$self.$message.error(exception.message)
} else {
console.error(error)
}
}
reader.readAsText(error.response.data)
})
},
queryLogData (limit) { // log的chart和table是一个请求
if (!limit) {
limit = this.$refs.logDetail.getLimit()
}
if (this.expressions.length > 0) {
const requestArr = []
this.expressions.forEach((item, index) => {
if (item != '') {
let expr = item
this.matchContent && (expr = `${item} ${this.matchSymbol} ${this.matchContent}`)
requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + expr + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&limit=' + limit))
}
})
if (requestArr.length > 0) {
this.showIntroduce = false
this.saveDisabled = false
}
axios.all(requestArr).then(res => {
this.logData = res.map(r => r.data)
const hasGraph = this.logData.some(d => d.resultType === 'matrix')
const hasLog = this.logData.some(d => d.resultType === 'streamsFormat')
const graphTabIndex = this.showTab.indexOf('1')
if (hasGraph) {
if (graphTabIndex === -1) {
this.showTab.push('1')
}
} else {
if (graphTabIndex > -1) {
this.showTab.splice(graphTabIndex, 1)
}
}
const logTabIndex = this.showTab.indexOf('2')
if (hasLog) {
if (logTabIndex === -1) {
this.showTab.push('1')
}
} else {
if (logTabIndex > -1) {
this.showTab.splice(logTabIndex, 1)
}
}
this.$nextTick(() => {
hasGraph && this.loadLogGraph()
})
})
}
},
loadLogGraph () {
const graphData = this.logData.filter(l => l.resultType === 'matrix')
if (graphData && graphData.length > 0) {
this.$refs.logChart.startLoading()
const promqlInputIndexs = []
const queryExpression = []
const series = []
const legend = []
this.expressions.forEach((item, index) => {
if (item !== '') {
promqlInputIndexs.push(index)
queryExpression.push(item)
}
this.logData.forEach((response, index) => {
if (response.resultType === 'matrix') {
const promqlIndex = promqlInputIndexs[index]
const data = response.result
if (!data || data.length < 1) {
return
}
data.forEach((result, i) => {
const seriesItem = {
name: '',
symbol: 'emptyCircle', // 去掉点
symbolSize: [2, 2],
showSymbol: false,
smooth: 0.2, // 曲线变平滑
data: [],
lineStyle: {
width: 1,
opacity: 0.9
},
type: 'line'
}
let legendName = ''
seriesItem.data = result.values.map((item) => {
return [item[0] * 1000, item[1]]
})
if (result.metric && Object.keys(result.metric).length > 0) {
const metric = Object.assign({}, result.metric)
seriesItem.name += metric.__name__ ? metric.__name__ : ''
seriesItem.name += '{'
delete metric.__name__
for (const key in metric) {
seriesItem.name += key + '=' + '"' + metric[key] + '",'
}
legendName = seriesItem.name.substr(0, seriesItem.name.length - 1)
legendName += '}'
} else {
legendName = queryExpression[index]
}
seriesItem.name = legendName + '-' + index
series.push(seriesItem)
legend.push({ name: seriesItem.name, alias: legendName, isGray: false })
})
this.$refs['promql-' + promqlIndex][0].setError('')
}
})
})
this.$refs.logChart.setLegend(legend)
this.$refs.logChart.setRandomColors(series.length)
this.$refs.logChart.setSeries(series)
this.defaultChartVisible = true
this.$nextTick(() => {
this.$refs.logChart.endLoading()
})
}
}
},
mounted () {
this.expressions = [`{project="${this.obj.project.name}",module="${this.obj.module.name}",endpoint="${this.obj.name}"}`]
this.queryLogData()
}
}
</script>
<style>
.symbol-select .el-input__inner {
padding-left: 8px;
}
</style>

91
nezha-fronted/src/components/common/bottomBox/tabs/modelTab.vue
View File

@@ -101,94 +101,3 @@ export default {
}
}
</script>
<style lang="scss">
/* begin--二级顶部工具栏*/
.sub-top-tools {
display: flex;
height: 32px;
align-items: center;
justify-content: space-between;
border-top: 1px solid #DCDFE6;
border-bottom: 1px solid #E4E7ED;
margin: 0 -6px;
padding-right: 80px;
background-color: $content-right-background-color;
margin-bottom: 10px;
}
.sub-top-tools>div {
margin-top: 2px;
}
.sub-top-tools .top-tool-search {
width: 260px;
margin: -1px 0 0 0;
.select_input input {
background-color: white;
}
}
.sub-container {
padding: 10px;
height: 100%;
background-color: #f6f6f6;
&>div {
background-color: white;
}
}
.sub-top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right: 6px;
}
.sub-top-tool-right {
display: flex;
align-content: center;
}
.has-sub-popper {
color: $danger-color;
}
.sub-box {
height: 50%;
position: relative;
}
.sub-list {
height: calc(100% - 9px);
position: absolute;
width: 100%;
z-index: 1;
top: 9px;
.sub-list__tabs {
height: 100%;
background-color: white;
&>div {
height: 100%;
background-color: #f6f6f6;
.nz-table2 {
height: calc(100% - 92px);
padding: 20px 20px 0;
}
}
}
}
.main-and-sub-transition {
transition: .4s height;
}
.resize-modal {
width: calc(100% - 240px);
opacity: 0.6;
background-color: #f5f9ff;
border: 1px solid #a7d0f7;
box-sizing: border-box;
position: fixed;
cursor: ns-resize;
display: none;
z-index: 20;
vertical-align: bottom;
bottom: 0;
}
/* end--二级顶部工具栏*/
</style>

12
nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
View File

@@ -584,11 +584,9 @@ export default {
}
},
beforeDestroy () {
document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
if (this.scrollbarWrap) {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
};
document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
this.scrollbarWrap && this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
}
}
</script>
@@ -659,7 +657,9 @@ export default {
/* begin-chart list*/
.table-list {
overflow-y: auto;
height: calc(100% - 56px);
height: 100%;
padding: 20px 0;
box-sizing: border-box;
}
.box-content {

8
nezha-fronted/src/components/common/pickTime.vue
View File

@@ -169,7 +169,11 @@ export default {
.interval-refresh {
display: flex;
}
.select-refresh-time-label{
.select-refresh-time-label{
margin-left: 5px;
}
}
.time-picker {
padding-left: 8px;
display: flex;
}
</style>

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

@@ -2,7 +2,6 @@
@import '../../../charts/chart';
</style>
<template>
<div>
<!--表格-->
<el-table
id="alertMessageTable"
@@ -60,7 +59,7 @@
<span v-else>-</span>
</template>
<span v-else-if="item.prop === 'severityId'&&scope.row['severity']" class="severity">
<i class="nz-icon nz-icon-circle" :style="{color:scope.row['severity'].color,'font-size':'12px','margin-right':'5px'}"></i> {{scope.row['severity'].name}}
<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'">
@@ -122,7 +121,6 @@
</div>
</el-table-column>
</el-table>
</div>
</template>
<script>

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

@@ -557,9 +557,7 @@ export default {
}
.query-page-option{
width: 100%;
position: absolute;
background: #fff;
bottom: -34px;
}
/deep/ .pagination{
padding-top: 0;

5
nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
View File

@@ -130,7 +130,7 @@
</div>
</el-collapse-item>
<el-collapse-item v-if="showTab.indexOf('2') > -1" name="2" title="Logs">
<log-tab ref="logDetail" :log-data="logData" :unit="chartUnit" @exportLog="exportLog" @limitChange="limitChange"></log-tab>
<log-tab ref="logDetail" :log-data="logData" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
</el-collapse-item>
</template>
</el-collapse>
@@ -528,9 +528,6 @@ export default {
reader.readAsText(error.response.data)
})
},
limitChange (limit) {
this.queryLogData(limit)
},
queryLogData (limit) { // log的chart和table是一个请求
if (!limit) {
limit = this.$refs.logDetail.getLimit()

8
nezha-fronted/src/components/page/dashboard/explore/logTab.vue
View File

@@ -1,8 +1,6 @@
<template>
<div class="log-detail">
<div id="logChart" class="log-chart">
<!-- <chart ref="logChart" :unit="unit" chart-type="logBar" :show-toolbox="false"></chart>-->
</div>
<div id="logChart" class="log-chart"></div>
<div class="log-operations">
<div class="log-operation">
<span class="operation-label">{{$t('overall.time')}}</span>
@@ -79,7 +77,6 @@ import * as echarts from 'echarts'
export default {
name: 'logTab',
props: {
unit: Number,
logData: Array
},
computed: {
@@ -296,6 +293,9 @@ export default {
}
},
applyFilter (allTableData, filter) {
if (allTableData || allTableData.length === 0) {
return { tableData: [], tableChartData: [] }
}
let data = [...allTableData]
// 过滤level
data = data.filter(d => {