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

NEZ-3236 fix：promql 输入框placeholder 显示错误

Browse Source
This commit is contained in:
zhangyu
2023-10-16 18:52:21 +08:00
parent 92e67961c8
commit 0ce962598e
4 changed files with 46 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
nezha-fronted/src/components/cli/consoleNew.vue
View File

@@ -183,10 +183,13 @@ export default {
if (userInfo) { if (userInfo) {
this.waterMarkText = `${userInfo.username}(${userInfo.name})` this.waterMarkText = `${userInfo.username}(${userInfo.name})`
} }
if (!baseUrl.endsWith('/')) {
baseUrl += '/'
}
if (this.terminal.type === 'asset') { if (this.terminal.type === 'asset') {
url = baseUrl + '/terminal.ws?width=' + this.terminal.width + '&height=' + this.terminal.height + '&cols=' + this.term.cols + '&rows=' + this.term.rows + '&token=' + token + '&assetId=' + this.terminal.assetId + '&accountId=' + this.terminal.accountId + '&uuid=' + this.terminal.uuid url = baseUrl + 'terminal.ws?width=' + this.terminal.width + '&height=' + this.terminal.height + '&cols=' + this.term.cols + '&rows=' + this.term.rows + '&token=' + token + '&assetId=' + this.terminal.assetId + '&accountId=' + this.terminal.accountId + '&uuid=' + this.terminal.uuid
} else if (this.terminal.type === 'custom') { } else if (this.terminal.type === 'custom') {
url = baseUrl + '/terminal.ws?width=' + this.terminal.width + '&height=' + this.terminal.height + '&cols=' + this.term.cols + '&rows=' + this.term.rows + '&token=' + token + '&accountId=' + this.terminal.accountId + '&uuid=' + this.terminal.uuid url = baseUrl + 'terminal.ws?width=' + this.terminal.width + '&height=' + this.terminal.height + '&cols=' + this.term.cols + '&rows=' + this.term.rows + '&token=' + token + '&accountId=' + this.terminal.accountId + '&uuid=' + this.terminal.uuid
Object.keys(this.terminal.custom).forEach(key => { Object.keys(this.terminal.custom).forEach(key => {
if (this.terminal.custom[key]) { if (this.terminal.custom[key]) {
url += '&' + key + '=' + this.terminal.custom[key] url += '&' + key + '=' + this.terminal.custom[key]
@@ -250,8 +253,6 @@ export default {
// 关闭 // 关闭
this.terminalSocket.onclose = () => { this.terminalSocket.onclose = () => {
this.terminal.isLogin = false this.terminal.isLogin = false
// 报错sorry的，还没来得及看信息就关闭
// this.$emit("closeConsole",this.terminal.name);//
this.term && (this.term.options.disableStdin = true) this.term && (this.term.options.disableStdin = true)
} }

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="explores"> <div class="explores">
<explore-item <explore-item
v-for="item in exploreItems" v-for="(item, index) in exploreItems"
ref="exploreItem" ref="exploreItem"
:key="item" :key="item"
:closable="closable" :closable="closable"

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

@@ -224,12 +224,12 @@
<el-collapse v-show="!showIntroduce" v-model="collapseValue" class="explore-collapse" @change="logsCollapseChange"> <el-collapse v-show="!showIntroduce" v-model="collapseValue" class="explore-collapse" @change="logsCollapseChange">
<!--metric--> <!--metric-->
<template v-if="showMetrics"> <template v-if="showMetrics">
<el-collapse-item v-if="!allMatrix" name="1" :title="$t('explore.graph')" class="el-collapse-item__height"> <el-collapse-item v-if="!allMatrix && showChart" name="1" :title="$t('explore.graph')" class="el-collapse-item__height">
<div class="chart-room"> <div class="chart-room">
<chart ref="exploreChart" :unit="chartUnit" :timeRange="filterTime"></chart> <chart ref="exploreChart" :unit="chartUnit" :timeRange="filterTime"></chart>
</div> </div>
</el-collapse-item> </el-collapse-item>
<el-collapse-item class="el-collapse-item__height" name="2" title="Table"> <el-collapse-item class="el-collapse-item__height" name="2" title="Table" v-if="showTable">
<div slot="title" class="explore-table-title"> <div slot="title" class="explore-table-title">
<span>{{tableMode==='table'?$t('dashboard.dashboard.chartForm.typeVal.table.label'):$t('explore.row')}}</span> <span>{{tableMode==='table'?$t('dashboard.dashboard.chartForm.typeVal.table.label'):$t('explore.row')}}</span>
<!-- 判断是否折叠 --> <!-- 判断是否折叠 -->
@@ -3731,7 +3731,9 @@ export default {
rowData: [], rowData: [],
metricsHistory: [], metricsHistory: [],
logsHistory: [], logsHistory: [],
lastHistory: [] lastHistory: [],
showChart: false,
showTable: false,
} }
}, },
async created () { async created () {
@@ -4041,7 +4043,7 @@ export default {
// 过滤掉state为0的元素 // 过滤掉state为0的元素
let step = bus.getStep(bus.formateTimeToTime(this.filterTime[0]), bus.formateTimeToTime(this.filterTime[1])) 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 && this.promqlKeys[index].queryType == 1) {
let queryStep = step let queryStep = step
if (this.promqlKeys[index].step) { if (this.promqlKeys[index].step) {
queryStep = this.promqlKeys[index].step + 's' queryStep = this.promqlKeys[index].step + 's'
@@ -4051,6 +4053,7 @@ export default {
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 {
this.showChart = true
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')) 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'))
} }
} }
@@ -4132,13 +4135,13 @@ export default {
} }
} }
}) })
this.series = series
this.$refs.exploreChart.setLegend(legend) this.$refs.exploreChart?.setLegend(legend)
this.$refs.exploreChart.setRandomColors(series.length) this.$refs.exploreChart?.setRandomColors(series.length)
if (!series.length) { if (!series.length) {
series = '' series = ''
} }
this.$refs.exploreChart.setSeries(series) this.$refs.exploreChart?.setSeries(series)
this.defaultChartVisible = true this.defaultChartVisible = true
} }
this.$refs.exploreChart && this.$refs.exploreChart.endLoading() this.$refs.exploreChart && this.$refs.exploreChart.endLoading()
@@ -4146,13 +4149,17 @@ export default {
} }
}, },
async queryTableData () { async queryTableData () {
console.log(this.expressions)
this.tools.loading = true this.tools.loading = true
if (this.expressions.length > 0) { if (this.expressions.length > 0) {
const requestArr = [] const requestArr = []
this.expressions.forEach((item, index) => { this.expressions.forEach((item, index) => {
// 过滤掉state为0的元素 // 过滤掉state为0的元素
if (item !== '' && this.promqlKeys[index].state) { console.log(this.promqlKeys[index].queryType)
requestArr.push(this.$get('/prom/api/v1/query?query=' + encodeURIComponent(item))) if (item !== '' && this.promqlKeys[index].state && this.promqlKeys[index].queryType == 2) {
// requestArr.push(this.$get('/prom/api/v1/query?query=' + encodeURIComponent(item)))
this.showTable = true
requestArr.push(this.$get('/prom/api/v1/query_instant?query=' + encodeURIComponent(item) + '&time=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1]))))
} }
}) })
if (requestArr.length > 0) { if (requestArr.length > 0) {
@@ -4168,7 +4175,7 @@ export default {
this.tableTitle = [] this.tableTitle = []
this.tools.customTableTitle = [] this.tools.customTableTitle = []
this.allMatrix = res.every(d => d.data.resultType === 'matrix') // this.allMatrix = res.every(d => d.data.resultType === 'matrix')
res.forEach((response, index) => { res.forEach((response, index) => {
if (response.data && response.status === 'success') { if (response.data && response.status === 'success') {
@@ -4176,21 +4183,10 @@ export default {
this.promqlKeys[index].matrix = response.data.resultType === 'matrix' this.promqlKeys[index].matrix = response.data.resultType === 'matrix'
let data = response.data.result let data = response.data.result
if (data) { if (data) {
if (data.length && !Array.isArray(data[0].value) && response.data.resultType !== 'matrix') {
data = [{
metric: {},
value: data
}]
}
data.forEach((result, i) => { data.forEach((result, i) => {
const metrics = Object.assign({}, result.metric) const metrics = Object.assign({}, result.metric)
if (response.data.resultType === 'matrix') { this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit || 2).compute(result.values[0][1], null, 2))
this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit || 2).compute(result.values[0][1], null, 2)) this.$set(metrics, 'time', bus.timeFormate(bus.computeTimezone(result.values[0][0] * 1000)))
this.$set(metrics, 'time', bus.timeFormate(bus.computeTimezone(result.values[0][0] * 1000)))
} else {
this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit || 2).compute(result.value[1], null, 2))
this.$set(metrics, 'time', bus.timeFormate(bus.computeTimezone(result.value[0] * 1000)))
}
for (const key in metrics) { for (const key in metrics) {
const label = { const label = {
label: key, label: key,
@@ -4204,37 +4200,28 @@ export default {
tLabels.push(label) tLabels.push(label)
} }
} }
if (response.data.resultType === 'matrix') { result.values.forEach(item => {
result.values.forEach(item => { tData.push({
tData.push({ ...metrics,
...metrics, ['value#' + index]: chartDataFormat.getUnit(this.chartUnit || 2).compute(item[1], null, 2),
['value#' + index]: chartDataFormat.getUnit(this.chartUnit || 2).compute(item[1], null, 2), time: bus.timeFormate(bus.computeTimezone(result.values[0][0] * 1000))
time: bus.timeFormate(bus.computeTimezone(result.values[0][0] * 1000))
})
}) })
} else { })
tData.push(metrics)
}
// 处理row模式数据 // 处理row模式数据
const rowData = this.handlerRowData(result.metric) const rowData = this.handlerRowData(result.metric)
rowData.value = metrics['value#' + index] rowData.value = metrics['value#' + index]
// matrix 类型数据 // matrix 类型数据
if (response.data.resultType === 'matrix') { rowData.valueList = result.values.map((item, index) => {
rowData.valueList = result.values.map((item, index) => { const obj = {}
const obj = {} obj.value = chartDataFormat.getUnit(this.chartUnit || 2).compute(item[1], null, 2)
obj.value = chartDataFormat.getUnit(this.chartUnit || 2).compute(item[1], null, 2) obj.timestamp = '@' + item[0]
obj.timestamp = '@' + item[0] obj.time = bus.timeFormate(bus.computeTimezone(item[0] * 1000))
obj.time = bus.timeFormate(bus.computeTimezone(item[0] * 1000)) if (index) { // 与前一个数据间隔
if (index) { // 与前一个数据间隔 obj.interval = '+' + parseInt(item[0] - result.values[index - 1][0]).toString()
obj.interval = '+' + parseInt(item[0] - result.values[index - 1][0]).toString() }
} return obj
return obj })
})
} else {
rowData.timestamp = '@' + result.value[0]
rowData.time = bus.timeFormate(bus.computeTimezone(result.value[0] * 1000))
}
this.rowData.push(rowData) this.rowData.push(rowData)
}) })
} }
@@ -4375,6 +4362,8 @@ export default {
if (error) { return } if (error) { return }
if (this.showMetrics) { if (this.showMetrics) {
this.$refs.exploreChart && this.$refs.exploreChart.startLoading() this.$refs.exploreChart && this.$refs.exploreChart.startLoading()
this.showChart = false
this.showTable = false
await this.queryTableData() await this.queryTableData()
this.queryChartData() this.queryChartData()
this.storeHistory() this.storeHistory()

3
nezha-fronted/src/components/page/dashboard/explore/exploreItemMixin.js
View File

@@ -328,7 +328,8 @@ export default {
this.expressions.forEach((expr, i) => { this.expressions.forEach((expr, i) => {
if (this.expressionsShow[i]) { if (this.expressionsShow[i]) {
this.promqlKeys.push({ this.promqlKeys.push({
id: this.expressionsShow[i].elementId, elementId: this.expressionsShow[i].elementId,
id: this.expressionsShow[i].id,
expression: expr, expression: expr,
type: 'expert', type: 'expert',
legend: this.expressionsShow[i].legend, legend: this.expressionsShow[i].legend,