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

NEZ-3213 feat: project topology data 表达式输入框更改

Browse Source
This commit is contained in:
zhangyu
2023-10-13 17:17:42 +08:00
parent 7202e8ee7c
commit c3ba42406c
6 changed files with 91 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
View File

@@ -127,7 +127,7 @@ export default {
if (this.isChart && this.timeRange) { if (this.isChart && this.timeRange) {
startTime = this.timeRange[0] startTime = this.timeRange[0]
endTime = this.timeRange[1] endTime = this.timeRange[1]
} else if (this.filterTime) { } else if (this.filterTime && this.filterTime.length) {
startTime = this.momentStrToTimestamp(this.filterTime[0]) startTime = this.momentStrToTimestamp(this.filterTime[0])
endTime = this.momentStrToTimestamp(this.filterTime[1]) endTime = this.momentStrToTimestamp(this.filterTime[1])
} }

12
nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
View File

@@ -30,6 +30,7 @@ export default {
getTopology(this.meta2dId)._setValue(node) getTopology(this.meta2dId)._setValue(node)
}, },
getQueryValues (elements, startTime, endTime) { getQueryValues (elements, startTime, endTime) {
console.log(startTime, endTime)
this.meta2dLoading = true this.meta2dLoading = true
return new Promise(resolve => { return new Promise(resolve => {
const step = bus.getStep(startTime, endTime) const step = bus.getStep(startTime, endTime)
@@ -39,7 +40,16 @@ export default {
elements = elements.filter(item => item.state && item.expression) elements = elements.filter(item => item.state && item.expression)
const requests = elements.map((element) => { const requests = elements.map((element) => {
// query_range // query_range
let query = `${urlPre}/api/v1/query_range?start=${startTime}&end=${endTime}&step=${step}` let queryStep = step
if (element.step) {
queryStep = element.step + 's'
}
let query = ''
if (element.queryType === 2) {
query = `${urlPre}/api/v1/query_instant?time=${endTime}`
} else {
query = `${urlPre}/api/v1/query_range?start=${startTime}&end=${endTime}&step=${queryStep}`
}
query += `&nullType=${'null'}` query += `&nullType=${'null'}`
if (element.filter) { if (element.filter) {
query += `&filter=${element.filter}` query += `&filter=${element.filter}`

67
nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
View File

@@ -127,17 +127,53 @@
></promql-input> ></promql-input>
</div> </div>
<el-row style="margin-top: 18px;display: flex"> <el-row style="margin-top: 18px;display: flex">
<el-col class="legend-title"> <div style="width: 310px;flex-shrink: 0">
<div class="legend-title-new">
<span class="legend-title__span">{{$t('dashboard.dashboard.chartForm.legend')}}&nbsp;</span> <span class="legend-title__span">{{$t('dashboard.dashboard.chartForm.legend')}}&nbsp;</span>
<el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside"> <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="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> --> <!-- <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> <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> </el-popover>
</el-col> </div>
<el-col style="flex: 1"> <div>
<el-input maxlength="512" show-word-limit size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input> <el-input maxlength="512" size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
</el-col> </div>
</div>
<div style="margin-left: 10px;" v-if="'metrics' === promqlType">
<div class="legend-title-new" style="width: 55px">
<span class="legend-title__span">{{$t('overall.type')}}&nbsp;</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="queryTypeChange(index - 1)">
<el-option :label="$t('dashboard.dashboard.chartForm.valMapping.range')" :value="1">{{$t('dashboard.dashboard.chartForm.valMapping.range')}}</el-option>
<el-option :label="$t('overall.instant')" :value="2">{{$t('overall.instant')}}</el-option>
</el-select>
</div>
</div>
<div style="margin-left: 10px;">
<div class="legend-title-new" style="margin-left: 10px;width: 55px">
<span class="legend-title__span">{{$t('overall.step')}}&nbsp;</span>
</div>
<div style="flex: 1">
<el-input-number
:disabled="expressionsShow[index-1].queryType == 2"
@change="expressionChange"
v-model="expressionsShow[index-1].step"
size="small"
:min="minStep"
:precision="0"
:controls="false"
:placeholder="$t('overall.auto')"
>
</el-input-number>
</div>
</div>
</el-row> </el-row>
<el-row style="margin-top: 18px;display: flex"> <el-row style="margin-top: 18px;display: flex">
<div class="form-row-item"> <div class="form-row-item">
@@ -287,6 +323,11 @@ export default {
] ]
} }
}, },
computed : {
minStep () {
return this.nzDefaultConfig.minStep
}
},
mounted () { mounted () {
this.init() this.init()
}, },
@@ -304,7 +345,9 @@ export default {
statistic: this.expressionsShow[i].statistic || 'last', statistic: this.expressionsShow[i].statistic || 'last',
name: this.expressionName[i], name: this.expressionName[i],
state: this.expressionsShow[i].state, state: this.expressionsShow[i].state,
orderNum: i orderNum: i,
step: this.expressionsShow[i].step || undefined,
queryType: this.expressionsShow[i].queryType || 1,
}) })
}) })
} else { } else {
@@ -312,6 +355,10 @@ export default {
} }
this.change() this.change()
}, },
queryTypeChange (index) {
this.expressionsShow[index].step = undefined
this.expressionChange(index)
},
switchExpression (index, flag) { switchExpression (index, flag) {
if (flag === 1) { if (flag === 1) {
this.$set(this.expressionsShow[index], 'state', 0) this.$set(this.expressionsShow[index], 'state', 0)
@@ -379,7 +426,9 @@ export default {
unit: 1, unit: 1,
statistic: 'last', statistic: 'last',
elementId: '', elementId: '',
state: 1 state: 1,
step: undefined,
queryType: 1,
}) })
this.expressionChange() this.expressionChange()
} else { } else {
@@ -394,7 +443,9 @@ export default {
legend: item.legend, legend: item.legend,
unit: item.unit || 1, unit: item.unit || 1,
statistic: item.statistic || 'last', statistic: item.statistic || 'last',
state: item.state state: item.state,
step: item.step || undefined,
queryType: item.queryType || 1,
}) })
} }
}, },

7
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -124,8 +124,8 @@
</div> </div>
<div style="flex: 1"> <div style="flex: 1">
<el-select size="small" v-model="expressionsShow[index-1].queryType" @change="queryTypeChange(index - 1)"> <el-select size="small" v-model="expressionsShow[index-1].queryType" @change="queryTypeChange(index - 1)">
<el-option :label="'Range'" :value="1">Range</el-option> <el-option :label="$t('dashboard.dashboard.chartForm.valMapping.range')" :value="1">{{$t('dashboard.dashboard.chartForm.valMapping.range')}}</el-option>
<el-option :label="'Instant'" :value="2">Instant</el-option> <el-option :label="$t('overall.instant')" :value="2">{{$t('overall.instant')}}</el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
@@ -142,9 +142,8 @@
:min="minStep" :min="minStep"
:precision="0" :precision="0"
:controls="false" :controls="false"
class="append_unit"
:placeholder="$t('overall.auto')" :placeholder="$t('overall.auto')"
:data-unit="$t('overall.seconds')"> >
</el-input-number> </el-input-number>
</div> </div>
</div> </div>

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

@@ -189,8 +189,8 @@
</div> </div>
<div style="flex: 1"> <div style="flex: 1">
<el-select size="small" v-model="expressionsShow[index-1].queryType" @change="queryTypeChange(index - 1)" style="width: 100%;"> <el-select size="small" v-model="expressionsShow[index-1].queryType" @change="queryTypeChange(index - 1)" style="width: 100%;">
<el-option :label="'Range'" :value="1">Range</el-option> <el-option :label="$t('dashboard.dashboard.chartForm.valMapping.range')" :value="1">{{$t('dashboard.dashboard.chartForm.valMapping.range')}}</el-option>
<el-option :label="'Instant'" :value="2">Instant</el-option> <el-option :label="$t('overall.instant')" :value="2">{{$t('overall.instant')}}</el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
@@ -4039,18 +4039,19 @@ export default {
const promqlInputIndexs = [] const promqlInputIndexs = []
const queryExpression = [] const queryExpression = []
// 过滤掉state为0的元素 // 过滤掉state为0的元素
let step = bus.getStep(bus.formateTimeToTime(this.filterTime[0]), bus.formateTimeToTime(this.filterTime[1]))
this.expressions.forEach((item, index) => { this.expressions.forEach((item, index) => {
if (item != '' && this.promqlKeys[index].state && !this.promqlKeys[index].matrix) { if (item != '' && this.promqlKeys[index].state && !this.promqlKeys[index].matrix) {
let step = bus.getStep(bus.formateTimeToTime(this.filterTime[0]), bus.formateTimeToTime(this.filterTime[1])) let queryStep = step
if (this.promqlKeys[index].step) { if (this.promqlKeys[index].step) {
step = this.promqlKeys[index].step queryStep = this.promqlKeys[index].step + 's'
} }
promqlInputIndexs.push(index) promqlInputIndexs.push(index)
queryExpression.push(item) queryExpression.push(item)
if (this.promqlKeys[index].queryType === 2) { if (this.promqlKeys[index].queryType === 2) {
requestArr.push(this.$get('/prom/api/v1/query_instant?query=' + encodeURIComponent(item) + '&time=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])))) requestArr.push(this.$get('/prom/api/v1/query_instant?query=' + encodeURIComponent(item) + '&time=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1]))))
} else { } else {
requestArr.push(this.$get('/prom/api/v1/query_range?query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) + '&end=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) + '&step=' + step + '&nullType=null')) requestArr.push(this.$get('/prom/api/v1/query_range?query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) + '&end=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) + '&step=' + queryStep + '&nullType=null'))
} }
} }
}) })

10
nezha-fronted/src/components/page/dashboard/explore/queryPrompt/queryPrompt.vue
View File

@@ -23,9 +23,9 @@
</div> </div>
<div v-if="type !== 'log'" class="query-prompt-metric"> <div v-if="type !== 'log'" class="query-prompt-metric">
<div class="explore-history-box-content-header"> <div class="explore-history-box-content-header">
<div class="query-prompt-name text-ellipsis query-prompt-content-text">Name</div> <div class="query-prompt-name text-ellipsis query-prompt-content-text">{{$t('overall.name')}}</div>
<div class="query-prompt-type text-ellipsis query-prompt-content-text">Type</div> <div class="query-prompt-type text-ellipsis query-prompt-content-text">{{$t('overall.type')}}</div>
<div class="query-prompt-remark text-ellipsis query-prompt-content-text">Description</div> <div class="query-prompt-remark text-ellipsis query-prompt-content-text">{{$t('overall.remark')}}</div>
</div> </div>
<div <div
class="explore-history-box-content" class="explore-history-box-content"
@@ -62,7 +62,7 @@
</div> </div>
</div> </div>
<div v-if="type === 'log'" class="query-prompt-log" v-my-loading="logLoading"> <div v-if="type === 'log'" class="query-prompt-log" v-my-loading="logLoading">
<div class="query-prompt-log-title">1.Select label names and values</div> <div class="query-prompt-log-title">{{$t('queryPrompt.logTitle1')}}</div>
<div class="query-prompt-log-content" style=""> <div class="query-prompt-log-content" style="">
<div class="query-prompt-log-content-left"> <div class="query-prompt-log-content-left">
<div v-for="item in logLabels" :key="item" class="log-content-left-label" @click="getLogLabelsValues(item)"> <div v-for="item in logLabels" :key="item" class="log-content-left-label" @click="getLogLabelsValues(item)">
@@ -92,7 +92,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="query-prompt-log-title">2.Resulting selector</div> <div class="query-prompt-log-title">{{$t('queryPrompt.logTitle2')}}</div>
<div class="query-prompt-log-final"> <div class="query-prompt-log-final">
<div class="query-prompt-log-final-box"> <div class="query-prompt-log-final-box">
<div class="query-prompt-log-final-text text-ellipsis" :title="logFinalStr">{{logFinalStr}}</div> <div class="query-prompt-log-final-text text-ellipsis" :title="logFinalStr">{{logFinalStr}}</div>