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

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

Browse Source
This commit is contained in:
zhangyu
2023-09-25 14:15:55 +08:00
parent c4ab289d4c f4676d0578
commit 3e84e523c3
15 changed files with 143 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
nezha-fronted/package-lock.json generated
View File

@@ -6910,6 +6910,11 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
},
"csv-string": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/csv-string/-/csv-string-4.1.1.tgz",
"integrity": "sha512-KGvaJEZEdh2O/EVvczwbPLqJZtSQaWQ4cEJbiOJEG4ALq+dBBqNmBkRXTF4NV79V25+XYtiqbco1IWrmHLm5FQ=="
},
"cuint": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",

12
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -5,7 +5,7 @@
class="nz-chart__component nz-chart__component--time-series" @mouseenter="mouseEnterChart"
@mouseleave="mouseLeaveChart"
>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}"></div>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"></div>
<chart-legend
v-if="hasLegend"
:chart-data="chartData"
@@ -28,6 +28,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -152,7 +158,7 @@ export default {
}
myChart.setOption(chartOption)
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
if (this.isInit && this.dataLink.length) {
if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) {
myChart.on('click', this.chartClick)
myChart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow) {
@@ -266,7 +272,7 @@ export default {
this.datalinkPosition(e)
},
clickout () {
if (this.dataLink.length) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
const option = {

14
nezha-fronted/src/components/chart/chart/chartBubble.vue
View File

@@ -3,7 +3,7 @@
ref="bubble-chart-box"
class="nz-chart__component"
>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}">
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}">
<svg :id="`bubble-svg-${chartId}`" width="100%" height="100%"></svg>
</div>
<div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
@@ -21,6 +21,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -320,7 +326,7 @@ export default {
})
},
chartClick (e, data) {
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.data.alias
this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
this.tooltip.mapping = data.data.mapping
@@ -332,12 +338,12 @@ export default {
}
},
chartMousedown (e) {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
e.stopPropagation()
}
},
clickout () {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
}

14
nezha-fronted/src/components/chart/chart/chartDoughnut.vue
View File

@@ -4,7 +4,7 @@
ref="doughnut-chart-box"
class="nz-chart__component"
>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}" style="overflow: hidden;"></div>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" style="overflow: hidden;"></div>
<chart-legend
v-if="hasLegend"
@@ -35,6 +35,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -427,7 +433,7 @@ export default {
})
},
chartClick (e, data) {
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.data.alias
this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
this.tooltip.mapping = data.data.mapping
@@ -439,12 +445,12 @@ export default {
}
},
chartMousedown (e) {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
e.stopPropagation()
}
},
clickout () {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
}

14
nezha-fronted/src/components/chart/chart/chartFunnel.vue
View File

@@ -3,7 +3,7 @@
ref="funnel-chart-box"
class="nz-chart__component"
>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}">
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}">
<svg :id="`funnel-svg-${chartId}`" width="100%" height="100%"></svg>
</div>
@@ -22,6 +22,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -416,7 +422,7 @@ export default {
})
},
chartClick (e, data) {
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.alias
this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
this.tooltip.mapping = data.mapping
@@ -428,12 +434,12 @@ export default {
}
},
chartMousedown (e) {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
e.stopPropagation()
}
},
clickout () {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
}

12
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -8,7 +8,7 @@
<div
:id="isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
class="chart-gauge-content"
:class="{'chart-cursor-default':!dataLink.length}"
:class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"
></div>
<div
v-if="item.height > 48 && chartInfo.param &&( chartInfo.param.text === 'legend' || chartInfo.param.text === 'all' )"
@@ -31,6 +31,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -234,7 +240,7 @@ export default {
// option.tooltip.position = this.formatterFunc
option.series[0].min = item.max == item.min ? 0 : item.min
myChart.setOption(option)
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
myChart.on('click', this.chartClick)
myChart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow) {
@@ -321,7 +327,7 @@ export default {
this.datalinkPosition(e)
},
clickout () {
if (this.dataLink.length) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
const option = {

16
nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
View File

@@ -1,6 +1,6 @@
<template>
<div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%;position: relative;">
<div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg"></div>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"></div>
<div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
<div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
{{tooltip.title}}
@@ -16,6 +16,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -246,7 +252,7 @@ export default {
.attr('stroke-linejoin', 'round')
.attr('stroke-width', 1)
.attr('transform', 'translate(' + x + ',' + y + ')')
.style('cursor', this.dataLink.length ? 'pointer' : 'default')
.style('cursor', 'pointer')
return hexagon
},
drawText (svg, vals, point, color, hexbinRadius, group) {
@@ -471,7 +477,7 @@ export default {
})
},
chartClick (data, e) {
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.alias
this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.metrics, legend: data.alias, value: data.showValue }) : data.showValue
this.tooltip.mapping = data.mapping
@@ -483,12 +489,12 @@ export default {
}
},
chartMousedown (e) {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
e.stopPropagation()
}
},
clickout () {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
}

14
nezha-fronted/src/components/chart/chart/chartRank.vue
View File

@@ -3,7 +3,7 @@
ref="rank-chart-box"
class="nz-chart__component"
>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}" style="overflow-y:auto;">
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" style="overflow-y:auto;">
<svg :id="`rank-svg-${chartId}`" width="100%" style="vertical-align: top;"></svg>
</div>
@@ -26,6 +26,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -333,7 +339,7 @@ export default {
})
},
chartClick (e, data) {
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.alias
this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
this.tooltip.mapping = data.mapping
@@ -345,12 +351,12 @@ export default {
}
},
chartMousedown (e) {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
e.stopPropagation()
}
},
clickout () {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
}

14
nezha-fronted/src/components/chart/chart/chartRose.vue
View File

@@ -4,7 +4,7 @@
ref="rose-chart-box"
class="nz-chart__component"
>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}" style="overflow: hidden;"></div>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" style="overflow: hidden;"></div>
<chart-legend
v-if="hasLegend"
@@ -35,6 +35,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -454,7 +460,7 @@ export default {
})
},
chartClick (e, data) {
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.data.alias
this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
this.tooltip.mapping = data.data.mapping
@@ -466,12 +472,12 @@ export default {
}
},
chartMousedown (e) {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
e.stopPropagation()
}
},
clickout () {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
}

14
nezha-fronted/src/components/chart/chart/chartSankey.vue
View File

@@ -4,7 +4,7 @@
class="nz-chart__component nz-chart__component--time-series" @mouseenter="mouseEnterChart"
@mouseleave="mouseLeaveChart"
>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}">
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}">
<svg :id="`sankey-svg-${chartId}`" width="100%" height="100%"></svg>
</div>
@@ -23,6 +23,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -441,7 +447,7 @@ export default {
})
},
chartClick (e, data) {
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.node ? data.node : data.source.node + ' ——> ' + data.target.node
this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
this.tooltip.mapping = data.mapping
@@ -453,12 +459,12 @@ export default {
}
},
chartMousedown (e) {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
e.stopPropagation()
}
},
clickout () {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
}

29
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -9,7 +9,10 @@
@mouseleave="statMouseleave(item)"
@click="chartClick($event,item)"
@mousedown="chartMousedown($event)"
:class="{'only-stat':statData.length===1,'chart-cursor-pointer':dataLink.length}"
:class="{
'only-stat':statData.length===1,
'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')
}"
:style="{
background:item.mapping ? item.mapping.color.bac : (statData.length===1 ? '' : colorList[index]),
height:item.height+'px',
@@ -90,6 +93,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -390,16 +399,8 @@ export default {
}]
if (this.chartInfo.param.sparklineMode === 'area') {
chartOption.series[0].areaStyle = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: this.hexToRgb(color, 0.1)
},
{
offset: 1,
color: this.hexToRgb(color, 1)
}
])
color: color,
opacity: 0.1
}
}
chartOption.yAxis.max = this.maxValue
@@ -528,7 +529,7 @@ export default {
})
},
chartClick (e, data) {
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.legend
this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.label, value: data.showValue }) : data.showValue
this.tooltip.mapping = data.mapping
@@ -540,12 +541,12 @@ export default {
}
},
chartMousedown (e) {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
e.stopPropagation()
}
},
clickout () {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
}

16
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -33,7 +33,7 @@
}"
class="value-mapping-table"
:title="showValueMapping(scope.row,col.title, col)"
:class="{'chart-cursor-pointer':dataLink.length}"
:class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"
@click="chartClick($event,col,scope.row)"
@mousedown="chartMousedown($event)"
>
@@ -42,7 +42,7 @@
</template>
{{showValueMapping(scope.row,col.title, col)}}
</div>
<div v-else class="value-mapping-table" :title="scope.row.display[col.title + 'display'].display" :class="{'chart-cursor-pointer':dataLink.length}" @click="chartClick($event,col,scope.row)" @mousedown="chartMousedown($event)">
<div v-else class="value-mapping-table" :title="scope.row.display[col.title + 'display'].display" :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" @click="chartClick($event,col,scope.row)" @mousedown="chartMousedown($event)">
{{scope.row.display[col.title + 'display'].display}}
</div>
</template>
@@ -68,6 +68,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -488,7 +494,7 @@ export default {
})
},
chartClick (e, col, row) {
if (this.dataLink.length) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
// 对象扁平化
let flattenedObject
for (const key in row) {
@@ -513,12 +519,12 @@ export default {
}
},
chartMousedown (e) {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
e.stopPropagation()
}
},
clickout () {
if (this.dataLink.length && this.tooltip.dataLinkShow) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
}

6
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -26,6 +26,12 @@
<div v-html="tooltip.tooltipHtml"></div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<!-- 只有一条数据时显示 -->
<div class="chart-dataLink-item select-series" v-if="isGrey.filter(value => value === false).length==1" @click="showAllSeries">
<i class="nz-icon nz-icon-a-Showallseries"></i>

12
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -5,7 +5,7 @@
class="nz-chart__component nz-chart__component--time-series" @mouseenter="mouseEnterChart"
@mouseleave="mouseLeaveChart"
>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}"></div>
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"></div>
<chart-legend
v-if="hasLegend"
:chart-data="chartData"
@@ -28,6 +28,12 @@
</div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 复制表达式 -->
<div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
<i class="nz-icon nz-icon-override"></i>
<span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
<span v-else>{{$t('overall.copy')}} LogQL</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -119,7 +125,7 @@ export default {
}
myChart.setOption(chartOption)
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
if (this.isInit && this.dataLink.length) {
if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) {
myChart.on('click', this.chartClick)
myChart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow && params.dataIndex) {
@@ -237,7 +243,7 @@ export default {
this.datalinkPosition(e)
},
clickout () {
if (this.dataLink.length) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
const option = {

18
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -169,16 +169,7 @@ export default {
// 判断如果是面积图 颜色设为渐变色
if (s.areaStyle && this.colorList.length) {
s.areaStyle = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: this.hexToRgb(this.colorList[colorIndex], 0.1)
},
{
offset: 1,
color: this.hexToRgb(this.colorList[colorIndex], 1)
}
])
opacity: 0.1
}
}
series.push(s)
@@ -487,6 +478,13 @@ export default {
}
this.clickout()
},
copyExpr () {
const expr = this.chartInfo.elements[this.tooltip.metric.expressionIndex].expression || ''
this.$copyText(expr).then(() => {
this.$message.success({ message: this.$t('overall.copySuccess') })
this.clickout()
})
},
beforeDownloadCSV (chart) {
let csv = ''
switch (chart.type) {