Merge branch 'dev-3.9' of git.mesalab.cn:nezha/nezha-fronted into dev-3.9
This commit is contained in:
zyh
@@ -73,7 +73,7 @@ export default {
|
||||
watch: {
|
||||
},
|
||||
created () {
|
||||
this.queryMetrics()
|
||||
// this.queryMetrics()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$store.commit('setMetricsList', [])
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="explore list-page" :class="'nz-explore-' + tabIndex" style="position:relative;">
|
||||
<div class="main-list">
|
||||
<div class="right-box__container main-list">
|
||||
<div class="main-container explore-split-box" ref="exploreScrollbar" @mouseenter="tableHover = true" @mouseleave="tableHover = false">
|
||||
<!-- 关闭按钮 -->
|
||||
<div v-if="closable" class="explore-close">
|
||||
@@ -28,7 +28,7 @@
|
||||
<div class="top-tool-right">
|
||||
<button v-if="!closable" class="top-tool-btn top-tool-btn--text margin-r-10" style="cursor: pointer;" type="button" @click="split">
|
||||
{{$t('overall.split')}}</button>
|
||||
<pick-time id="explore" ref="pickTime" v-model="filterTime" :class="{'margin-r-10': showMetrics}" :refresh-data-func="expressionChange" @unitChange="chartUnitChange">
|
||||
<pick-time id="explore" ref="pickTime" v-model="filterTime" :class="{'margin-r-10': showMetrics}" :refresh-data-func="getExpression" @unitChange="chartUnitChange">
|
||||
<!-- <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template> -->
|
||||
<template slot="added-text">{{$t('overall.query')}}</template>
|
||||
</pick-time>
|
||||
@@ -69,12 +69,82 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div id="explore-promql-box" class="top-tools" style="padding-top: 0; flex-wrap: wrap">
|
||||
<template v-if="showMetrics">
|
||||
<div id="explore-promql-box" class="top-tools chart-config" style="padding-top: 0; flex-wrap: wrap">
|
||||
<div class="metrics-input-box" style="width: 100%">
|
||||
<draggable
|
||||
v-model="promqlKeys"
|
||||
@start="start"
|
||||
@end="end"
|
||||
:scroll-sensitivity="150"
|
||||
:options="{
|
||||
dragClass:'drag-chart-class',
|
||||
fallbackClass:'fallback-class',
|
||||
forceFallback:true,
|
||||
ghostClass:'chart-ghost',
|
||||
chosenClass:'choose-class',
|
||||
scroll:true,
|
||||
filter: '.drag-disabled',
|
||||
animation: 150,
|
||||
handle: '.drag-sort'
|
||||
}">
|
||||
<el-row
|
||||
class="element-item form-row-item thresholds-from-item"
|
||||
style="margin-bottom: 10px !important"
|
||||
v-for="index of promqlKeys.length"
|
||||
v-if="expressionsShow[index-1]"
|
||||
:key="expressionsShow[index-1].id"
|
||||
>
|
||||
<div class="chart-title chart-title-config">
|
||||
<span
|
||||
class="chart-title-content el-form-item"
|
||||
:class="{
|
||||
'is-error' : expressionsShow[index-1].error,
|
||||
'hide-input': expressionsShow[index-1].hideInput
|
||||
}"
|
||||
>
|
||||
<i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1].show?'':'is-active'" @click.stop="showExpression(index)"></i>
|
||||
<el-input
|
||||
style="width: 90px"
|
||||
@mousedown.stop
|
||||
v-model="expressionName[index-1]"
|
||||
size="small"
|
||||
@input="(val)=>{expressionNameInput(val,index-1)}"
|
||||
@change="expressionNameChange(index-1)"
|
||||
@focus.stop="showInput(index-1,false)"
|
||||
@blur="showInput(index-1,true)"
|
||||
/>
|
||||
<div v-if="expressionsShow[index-1].error" class="el-form-item__error" style="top: 30px;left: 25px">{{expressionsShow[index-1].error}}</div>
|
||||
<div class="text-ellipsis" style="flex-shrink: 0;width: calc(100% - 310px)" v-if="!expressionsShow[index-1].show" :title="expressions[index - 1]">
|
||||
{{expressions[index - 1]}}
|
||||
</div>
|
||||
</span>
|
||||
<span>
|
||||
<!-- 显示隐藏 -->
|
||||
<span v-if="expressionsShow[index-1].state === 1" @click="()=>{switchExpression(index - 1,1)}" :title="$t('overall.visible')" style="margin-right: 5px;padding-left: 10px">
|
||||
<i class="nz-icon nz-icon-mimakejian"></i>
|
||||
</span>
|
||||
<span v-else @click="()=>{switchExpression(index - 1,0)}" :title="$t('overall.invisible')" style="margin-right: 5px;padding-left: 10px">
|
||||
<i class="nz-icon nz-icon-mimabukejian"></i>
|
||||
</span>
|
||||
<span @click="()=>{addExpression()}" style="margin-right: 5px" :title="$t('tip.add')">
|
||||
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
|
||||
</span>
|
||||
<span @click="copyExpression(index - 1)" style="margin-right: 5px" :title="$t('overall.duplicate')">
|
||||
<i class="nz-icon nz-icon-override"></i>
|
||||
</span>
|
||||
<span @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px" :title="$t('overall.delete')">
|
||||
<i class="nz-icon nz-icon-minus"></i>
|
||||
</span>
|
||||
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.dashboard.chartForm.sort')">
|
||||
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<el-row v-show="expressionsShow[index-1].show">
|
||||
<promql-input
|
||||
:from-father-data="true"
|
||||
:metricOptionsParent="metricOptions"
|
||||
v-for="index of promqlKeys.length"
|
||||
:id="promqlKeys[index-1].id"
|
||||
:pqid="promqlKeys[index-1].id"
|
||||
:key="promqlKeys[index-1].id"
|
||||
@@ -84,34 +154,69 @@
|
||||
:index="index-1"
|
||||
:plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy','enable', 'history']"
|
||||
:styleType="1"
|
||||
type="metrics"
|
||||
:type="promqlType"
|
||||
@enableExpression="enableExpression"
|
||||
@addExpression="addExpression"
|
||||
@copyExpression="copyExpression"
|
||||
@removeExpression="removeExpression"
|
||||
@resetExpression="resetExpression"
|
||||
></promql-input>
|
||||
</template>
|
||||
<template v-else>
|
||||
<promql-input
|
||||
v-for="index of promqlKeys.length"
|
||||
:id="promqlKeys[index-1].id"
|
||||
:pqid="promqlKeys[index-1].id"
|
||||
:key="promqlKeys[index-1].id"
|
||||
:ref="'promql-'+(index-1)"
|
||||
:expression-list="expressions"
|
||||
:state="promqlKeys[index-1].state"
|
||||
:index="index-1"
|
||||
:plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy','enable', 'history']"
|
||||
:styleType="1"
|
||||
type="log"
|
||||
@enableExpression="enableExpression"
|
||||
@addExpression="addExpression"
|
||||
@copyExpression="copyExpression"
|
||||
@removeExpression="removeExpression"
|
||||
@resetExpression="resetExpression"
|
||||
></promql-input>
|
||||
</template>
|
||||
<el-row style="margin-top: 18px;display: flex">
|
||||
<div style="min-width: 310px;flex-shrink: 0;width: 50%">
|
||||
<div class="legend-title-new">
|
||||
<span class="legend-title__span">{{$t('dashboard.dashboard.chartForm.legend')}} </span>
|
||||
<el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
|
||||
<div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div>
|
||||
<!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div> -->
|
||||
<i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div>
|
||||
<el-input maxlength="512" size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: 10px;width: 25%; flex: 1" v-if="showMetrics">
|
||||
<div class="legend-title-new" style="width: 55px">
|
||||
<span class="legend-title__span">{{$t('overall.type')}} </span>
|
||||
<el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
|
||||
<div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div>
|
||||
<!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div> -->
|
||||
<i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<el-select size="small" v-model="expressionsShow[index-1].queryType" @change="expressionChange" style="width: 100%;">
|
||||
<el-option :label="'Range'" :value="1">Range</el-option>
|
||||
<el-option :label="'Instant'" :value="2">Instant</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: 10px;width: 25%;flex: 1">
|
||||
<div class="legend-title-new" style="margin-left: 10px;width: 55px">
|
||||
<span class="legend-title__span">{{$t('overall.step')}} </span>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<el-input-number
|
||||
style="width: 100%;"
|
||||
:disabled="expressionsShow[index-1].queryType == 2"
|
||||
@change="expressionChange"
|
||||
v-model="expressionsShow[index-1].step"
|
||||
size="small"
|
||||
:min="minStep"
|
||||
:precision="0"
|
||||
:controls="false"
|
||||
class="append_unit"
|
||||
:placeholder="$t('overall.auto')"
|
||||
:data-unit="$t('overall.seconds')">
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</transition>
|
||||
</el-row>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative;z-index: 1;height: auto; padding: 0 20px 10px;">
|
||||
<el-collapse v-show="!showIntroduce" v-model="collapseValue" class="explore-collapse" @change="logsCollapseChange">
|
||||
@@ -3527,8 +3632,10 @@ import chartDataFormat from '../../../chart/chartDataFormat'
|
||||
import logTab from './logTab'
|
||||
import promqlInputMixin from '@/components/common/mixin/promqlInput'
|
||||
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
|
||||
import exploreItemMixin from '@/components/page/dashboard/explore/exploreItemMixin'
|
||||
import copy from '@/components/common/copy'
|
||||
import './promqlparser/wasm_exec.js'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'exploreItem',
|
||||
@@ -3537,13 +3644,14 @@ export default {
|
||||
chartRightBox,
|
||||
chart,
|
||||
logTab,
|
||||
copy
|
||||
copy,
|
||||
draggable
|
||||
},
|
||||
props: {
|
||||
tabIndex: Number,
|
||||
closable: Boolean
|
||||
},
|
||||
mixins: [promqlInputMixin],
|
||||
mixins: [promqlInputMixin, exploreItemMixin],
|
||||
data () {
|
||||
return {
|
||||
chartLoading: false,
|
||||
@@ -3625,6 +3733,7 @@ export default {
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
this.init()
|
||||
this.getPanelData()
|
||||
this.resetExpression()
|
||||
// this.getExploreHistory()
|
||||
@@ -3723,7 +3832,7 @@ export default {
|
||||
chartUnitChange (unit) {
|
||||
this.chartUnit = unit
|
||||
this.$nextTick(() => {
|
||||
this.expressionChange()
|
||||
this.getExpression()
|
||||
})
|
||||
},
|
||||
exportLog ({ limit, descending }) {
|
||||
@@ -4178,7 +4287,7 @@ export default {
|
||||
const rowData = { element: temp, colorElement: colorTemp, expandElement: expandTemp }
|
||||
return rowData
|
||||
},
|
||||
async expressionChange () {
|
||||
async getExpression () {
|
||||
if (this.$refs.pickTime) {
|
||||
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
@@ -4262,8 +4371,9 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
this.init()
|
||||
setTimeout(() => {
|
||||
this.expressionChange()
|
||||
this.getExpression()
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
@@ -4384,36 +4494,11 @@ export default {
|
||||
}
|
||||
this.updatePath()
|
||||
},
|
||||
addExpression (index) {
|
||||
this.expressions.splice(index + 1, 0, '')
|
||||
this.promqlKeys.splice(index + 1, 0, {
|
||||
id: getUUID(),
|
||||
state: 1
|
||||
})
|
||||
this.promqlCount++
|
||||
},
|
||||
copyExpression (index) {
|
||||
this.expressions.push(this.expressions[index])
|
||||
this.promqlKeys.push({
|
||||
id: getUUID(),
|
||||
state: 1
|
||||
})
|
||||
this.promqlCount++
|
||||
},
|
||||
removeExpression (index) {
|
||||
if (this.promqlCount > 1) {
|
||||
this.expressions.splice(index, 1)
|
||||
this.promqlKeys.splice(index, 1)
|
||||
this.promqlCount--
|
||||
}
|
||||
},
|
||||
resetExpression () {
|
||||
this.expressions = ['']
|
||||
this.promqlKeys = [{
|
||||
id: getUUID(),
|
||||
state: 1
|
||||
}]
|
||||
this.promqlKeys = []
|
||||
this.promqlCount = 1
|
||||
this.init()
|
||||
},
|
||||
changeChartVisible () {
|
||||
this.chartVisible = !this.chartVisible
|
||||
@@ -4666,9 +4751,22 @@ export default {
|
||||
}, () => {
|
||||
this.$message.error('123')
|
||||
})
|
||||
},
|
||||
start () {
|
||||
|
||||
},
|
||||
end () {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
promqlType () {
|
||||
const type = this.showMetrics ? 'metric' : 'log'
|
||||
return type
|
||||
},
|
||||
minStep () {
|
||||
return this.nzDefaultConfig.minStep
|
||||
},
|
||||
language () {
|
||||
return this.$store.getters.getLanguage
|
||||
},
|
||||
|
||||
@@ -0,0 +1,467 @@
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { getUUID, resetZIndex } from '@/components/common/js/common'
|
||||
import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
|
||||
import { isStat } from '@/components/chart/chart/tools'
|
||||
import lodash from 'lodash'
|
||||
import iconList from '@/components/common/js/iconList'
|
||||
const rz = {
|
||||
methods: {
|
||||
rz (e) {
|
||||
resetZIndex(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
params: {},
|
||||
variables: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
from: { type: String }
|
||||
},
|
||||
mixins: [rz],
|
||||
data () {
|
||||
return {
|
||||
// language: localStorage.getItem('nz-language'),
|
||||
chartConfig: {},
|
||||
expressions: [],
|
||||
expressionName: [],
|
||||
expressionsShow: [],
|
||||
spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||
unitOptions: chartDataFormat.unitOptions(),
|
||||
nullTypeList: [{
|
||||
label: this.$t('chart.connected'),
|
||||
value: 'connected'
|
||||
}, {
|
||||
label: this.$t('chart.null'),
|
||||
value: 'null'
|
||||
}, {
|
||||
label: this.$t('chart.zero'),
|
||||
value: 'zero'
|
||||
}],
|
||||
statisticsList: this.$CONSTANTS.statisticsList,
|
||||
operatorList: [
|
||||
{
|
||||
label: 'equal',
|
||||
value: 'equal'
|
||||
}, {
|
||||
label: 'not equal',
|
||||
value: 'notEqual'
|
||||
}, {
|
||||
label: 'match',
|
||||
value: 'match'
|
||||
}, {
|
||||
label: 'contains',
|
||||
value: 'contains'
|
||||
}
|
||||
],
|
||||
legendPositionList: [
|
||||
{
|
||||
label: this.$t('overall.bottom'),
|
||||
value: 'bottom'
|
||||
}, {
|
||||
label: this.$t('overall.left'),
|
||||
value: 'left'
|
||||
}, {
|
||||
label: this.$t('overall.right'),
|
||||
value: 'right'
|
||||
}
|
||||
],
|
||||
mappingTypeList: [
|
||||
{
|
||||
label: this.$t('overall.value'),
|
||||
value: 'value'
|
||||
}, {
|
||||
label: this.$t('dashboard.dashboard.chartForm.valMapping.range'),
|
||||
value: 'range'
|
||||
}, {
|
||||
label: this.$t('dashboard.dashboard.chartForm.valMapping.regx'),
|
||||
value: 'regx'
|
||||
}
|
||||
],
|
||||
mappingIconList: iconList, // 获取icon列表
|
||||
letter: [
|
||||
'A', 'B', 'C', 'D', 'E', 'F', 'G',
|
||||
'H', 'I', 'J', 'K', 'L', 'M', 'N',
|
||||
'O', 'P', 'Q', 'R', 'S', 'T',
|
||||
'U', 'V', 'W', 'X', 'Y', 'Z'
|
||||
],
|
||||
metricsChartTypeList: [
|
||||
{
|
||||
id: 'line',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label')
|
||||
},
|
||||
{
|
||||
id: 'area',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label')
|
||||
},
|
||||
{
|
||||
id: 'point',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.point.label')
|
||||
},
|
||||
{
|
||||
id: 'stat',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.singleStat.label')
|
||||
},
|
||||
{
|
||||
id: 'hexagon',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.hexagonFigure.label')
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.bar.label')
|
||||
},
|
||||
{
|
||||
id: 'pie',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.pie.label')
|
||||
},
|
||||
{
|
||||
id: 'doughnut',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.doughnut.label')
|
||||
},
|
||||
{
|
||||
id: 'rose',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.rose.label')
|
||||
},
|
||||
{
|
||||
id: 'bubble',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.bubble.label')
|
||||
},
|
||||
{
|
||||
id: 'funnel',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.funnel.label')
|
||||
},
|
||||
{
|
||||
id: 'rank',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.rank.label')
|
||||
},
|
||||
{
|
||||
id: 'sankey',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.sankey.label')
|
||||
},
|
||||
{
|
||||
id: 'gauge',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.gauge.label')
|
||||
},
|
||||
{
|
||||
id: 'treemap',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.treemap.label')
|
||||
},
|
||||
{
|
||||
id: 'table',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.table.label')
|
||||
}
|
||||
|
||||
],
|
||||
logChartTypeList: [
|
||||
{
|
||||
id: 'line',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label')
|
||||
},
|
||||
{
|
||||
id: 'area',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label')
|
||||
},
|
||||
{
|
||||
id: 'point',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.point.label')
|
||||
},
|
||||
{
|
||||
id: 'stat',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.singleStat.label')
|
||||
},
|
||||
{
|
||||
id: 'hexagon',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.hexagonFigure.label')
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.bar.label')
|
||||
},
|
||||
{
|
||||
id: 'pie',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.pie.label')
|
||||
},
|
||||
{
|
||||
id: 'doughnut',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.doughnut.label')
|
||||
},
|
||||
{
|
||||
id: 'rose',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.rose.label')
|
||||
},
|
||||
{
|
||||
id: 'bubble',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.bubble.label')
|
||||
},
|
||||
{
|
||||
id: 'funnel',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.funnel.label')
|
||||
},
|
||||
{
|
||||
id: 'rank',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.rank.label')
|
||||
},
|
||||
{
|
||||
id: 'sankey',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.sankey.label')
|
||||
},
|
||||
{
|
||||
id: 'gauge',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.gauge.label')
|
||||
},
|
||||
{
|
||||
id: 'treemap',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.treemap.label')
|
||||
},
|
||||
{
|
||||
id: 'log',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.log.label')
|
||||
},
|
||||
{
|
||||
id: 'table',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.table.label')
|
||||
}
|
||||
],
|
||||
textList: [
|
||||
{
|
||||
label: this.$t('overall.exportAll'),
|
||||
value: 'all'
|
||||
}, {
|
||||
label: this.$t('overall.value'),
|
||||
value: 'value'
|
||||
}, {
|
||||
label: this.$t('dashboard.dashboard.chartForm.legend'),
|
||||
value: 'legend'
|
||||
}, {
|
||||
label: this.$t('project.topology.none'),
|
||||
value: 'none'
|
||||
}
|
||||
],
|
||||
timeType: [
|
||||
{
|
||||
value: 'local',
|
||||
label: this.$t('dashboard.dashboard.chartForm.typeVal.local')
|
||||
},
|
||||
{
|
||||
value: 'server',
|
||||
label: this.$t('dashboard.dashboard.chartForm.typeVal.server')
|
||||
}
|
||||
],
|
||||
timeSeriesTypeList: [
|
||||
{
|
||||
id: 'line',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label')
|
||||
},
|
||||
{
|
||||
id: 'area',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label')
|
||||
},
|
||||
{
|
||||
id: 'point',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.point.label')
|
||||
}
|
||||
],
|
||||
sparklineTypeList: [
|
||||
{
|
||||
id: 'line',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label')
|
||||
},
|
||||
{
|
||||
id: 'area',
|
||||
name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label')
|
||||
},
|
||||
{
|
||||
id: 'none',
|
||||
name: this.$t('project.topology.none')
|
||||
}
|
||||
],
|
||||
comparisonTypeList: [
|
||||
{
|
||||
id: 'none',
|
||||
name: this.$t('project.topology.none')
|
||||
},
|
||||
{
|
||||
id: 'hour',
|
||||
name: this.$t('dashboard.chartForm.comparison.hour')
|
||||
},
|
||||
{
|
||||
id: 'day',
|
||||
name: this.$t('dashboard.chartForm.comparison.day')
|
||||
},
|
||||
{
|
||||
id: 'week',
|
||||
name: this.$t('dashboard.chartForm.comparison.week')
|
||||
},
|
||||
{
|
||||
id: 'month',
|
||||
name: this.$t('dashboard.chartForm.comparison.month')
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isStat,
|
||||
init () {
|
||||
// 重置相关属性
|
||||
this.expressions = []
|
||||
this.expressionsShow = []
|
||||
this.expressionName = []
|
||||
console.log(this.promqlKeys.length)
|
||||
if (!this.promqlKeys.length) {
|
||||
this.addExpression()
|
||||
} else {
|
||||
// 根据orderNum排序
|
||||
this.promqlKeys = this.promqlKeys.sort((a, b) => a.orderNum - b.orderNum)
|
||||
this.promqlKeys.forEach(item => {
|
||||
this.addExpression(item)
|
||||
})
|
||||
this.expressionChange()
|
||||
}
|
||||
},
|
||||
expressionChange: function (index) {
|
||||
if (this.expressions.length) {
|
||||
this.promqlKeys = []
|
||||
this.expressions.forEach((expr, i) => {
|
||||
if (this.expressionsShow[i]) {
|
||||
this.promqlKeys.push({
|
||||
id: this.expressionsShow[i].elementId,
|
||||
expression: expr,
|
||||
type: 'expert',
|
||||
legend: this.expressionsShow[i].legend,
|
||||
name: this.expressionName[i],
|
||||
state: this.expressionsShow[i].state,
|
||||
orderNum: i,
|
||||
step: this.expressionsShow[i].step,
|
||||
queryType: this.expressionsShow[i].queryType,
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.promqlKeys = []
|
||||
}
|
||||
},
|
||||
switchExpression (index, flag) {
|
||||
if (flag === 1) {
|
||||
this.$set(this.expressionsShow[index], 'state', 0)
|
||||
} else {
|
||||
this.$set(this.expressionsShow[index], 'state', 1)
|
||||
}
|
||||
this.expressionChange()
|
||||
},
|
||||
expressionNameChange (index) {
|
||||
if (this.expressionsShow[index].error) {
|
||||
this.expressionName[index] = this.expressionsShow[index].oldName
|
||||
this.expressionsShow[index].error = ''
|
||||
} else if (!this.expressionName[index]) {
|
||||
this.expressionName[index] = this.expressionsShow[index].oldName
|
||||
} else {
|
||||
this.expressionsShow[index].oldName = this.expressionName[index]
|
||||
}
|
||||
this.expressionChange()
|
||||
},
|
||||
expressionNameInput (val, index) {
|
||||
const findIndex = this.expressionName.indexOf(val)
|
||||
const lastIndex = this.expressionName.lastIndexOf(val)
|
||||
if (findIndex !== -1 && lastIndex != -1 && lastIndex !== findIndex) {
|
||||
this.expressionsShow[index].error = this.$t('error.nameDuplicate')
|
||||
} else if (!val) {
|
||||
this.expressionsShow[index].error = this.$t('validate.required')
|
||||
} else {
|
||||
this.expressionsShow[index].error = ''
|
||||
}
|
||||
},
|
||||
showInput (index, flag) {
|
||||
this.expressionsShow[index].hideInput = flag
|
||||
},
|
||||
transformNumToLetter (num) { // 相当于26进制 获取idaddExpression
|
||||
const self = this
|
||||
let letter = ''
|
||||
const loopNum = parseInt(num / 26)
|
||||
if (loopNum > 0) {
|
||||
letter += this.transformNumToLetter(loopNum - 1)
|
||||
}
|
||||
letter += self.letter[num % 26]
|
||||
return letter
|
||||
},
|
||||
getExpressionName () {
|
||||
let name = ''
|
||||
for (let i = 0; i <= this.expressionName.length; i++) {
|
||||
name = this.transformNumToLetter(i)
|
||||
if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
|
||||
break
|
||||
}
|
||||
}
|
||||
return name
|
||||
},
|
||||
addExpression (item) {
|
||||
if (!item) {
|
||||
this.expressions.push('')
|
||||
const expressionName = this.getExpressionName()
|
||||
console.log(expressionName)
|
||||
this.expressionName.push(expressionName)
|
||||
this.expressionsShow.push({
|
||||
id: getUUID(),
|
||||
show: true,
|
||||
hideInput: true,
|
||||
oldName: expressionName,
|
||||
name: expressionName,
|
||||
error: '',
|
||||
legend: '',
|
||||
elementId: '',
|
||||
state: 1,
|
||||
step: undefined,
|
||||
queryType: 1
|
||||
})
|
||||
this.expressionChange()
|
||||
} else {
|
||||
this.expressions.push(item.expression)
|
||||
this.expressionName.push(item.name)
|
||||
this.expressionsShow.push({
|
||||
id: getUUID(),
|
||||
show: true,
|
||||
hideInput: true,
|
||||
oldName: item.name,
|
||||
error: '',
|
||||
elementId: item.id,
|
||||
legend: item.legend,
|
||||
state: item.state,
|
||||
step: item.step,
|
||||
queryType: item.queryType
|
||||
})
|
||||
}
|
||||
},
|
||||
copyExpression (index) {
|
||||
this.expressions.push(this.expressions[index])
|
||||
const expressionName = this.getExpressionName()
|
||||
this.expressionName.push(expressionName)
|
||||
this.expressionsShow.push(
|
||||
{
|
||||
...this.expressionsShow[index],
|
||||
id: getUUID(),
|
||||
show: true,
|
||||
hideInput: true,
|
||||
oldName: expressionName,
|
||||
error: '',
|
||||
elementId: ''
|
||||
}
|
||||
)
|
||||
this.expressionChange()
|
||||
},
|
||||
removeExpression (index) {
|
||||
if (this.expressionsShow.length > 1) {
|
||||
this.expressions.splice(index, 1)
|
||||
this.expressionName.splice(index, 1)
|
||||
this.expressionsShow.splice(index, 1)
|
||||
this.expressionChange()
|
||||
}
|
||||
},
|
||||
showExpression (index) {
|
||||
this.expressionsShow[index - 1].show = !this.expressionsShow[index - 1].show
|
||||
this.$set(this.expressionsShow, index - 1, this.expressionsShow[index - 1])
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -144,7 +144,7 @@
|
||||
<span>{{ appendMsg }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<i class="nz-icon nz-icon-alert-list" style="position: absolute;top: -5px; right: 15px" @click="queryPromptShowChange"/>
|
||||
<i class="nz-icon nz-icon-alert-list" style="position: absolute;right: 15px;height: 24px; width: 24px;line-height: 24px;top: 3px;" @click="queryPromptShowChange"/>
|
||||
<queryPrompt v-if="queryPromptShow" @close="queryPromptShowChange" :type="type" :width="queryPromptWidth" :position="queryPromptPosition" class="no-style-class" @selectMetric="selectMetric" @selectLog="selectLog"/>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user