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

feat： 新增 table类型

Browse Source
This commit is contained in:
zhangyu
2021-12-16 10:10:27 +08:00
parent 5c540b767c
commit 63fd3f22a8
6 changed files with 319 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,15 @@
<span class="data-column__span">{{col.title}}</span>
</template>
<template slot-scope="scope" :column="col">
{{scope.row.values}}
<div v-if="scope.row.valueMapping && scope.row.valueMapping[col.title + 'mapping']" :style="{
background: scope.row.valueMapping[col.title + 'mapping'].color.bac,
color: scope.row.valueMapping[col.title + 'mapping'].color.text,
}">
{{handleDisplay(col.display,{...scope.row.$labels, value: scope.row.showValue,legend:scope.row.legend})}}
</div>
<div v-else>
{{scope.row.showValue}}
</div>
</template>
</el-table-column>
</el-table>
@@ -38,13 +46,22 @@ export default {
data () {
return {
tableData: [],
columns: []
columns: [],
valueMapping: {}
}
},
methods: {
initChart () {
console.log(this.chartInfo, this.chartData)
this.columns = this.chartInfo.param.columns
this.chartInfo.param.valueMapping.mapping.forEach((item) => {
if (this.valueMapping[item.column]) {
this.valueMapping[item.column].push(item)
} else {
this.valueMapping[item.column] = [item]
}
})
console.log(this.valueMapping)
const data = this.initTableData(this.chartInfo, this.chartData)
const arr = []
console.log(data)
@@ -54,6 +71,9 @@ export default {
arr.push(data[key][keys])
})
})
arr.forEach(item => {
item.valueMapping = this.selectTableMapping(item, this.valueMapping)
})
this.tableData = arr
this.$refs.dataTable.doLayout()
console.log(data)
@@ -69,10 +89,11 @@ export default {
data.$labels = data.metric
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
const mapping = this.selectTableMapping(value, chartInfo.param.valueMapping)
// const mapping = this.selectTableMapping(value, chartInfo.param.valueMapping)
data.values = value
data.showValue = showValue
data.mapping = mapping
data.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
// data.mapping = mapping
data.keys = ''
// eslint-disable-next-line vue/no-mutating-props
arr.forEach((item) => {
@@ -97,12 +118,38 @@ export default {
})
return returnData
},
selectTableMapping () {
selectTableMapping (row, valueMapping) {
const obj = {}
this.columns.forEach((column) => {
if (valueMapping[column.title]) {
obj[column.title + 'mapping'] = ''
if (this.chartInfo.param.valueMapping.show) {
valueMapping[column.title].forEach(item => {
if (item.type === 'value') {
if (row.values == item.value) {
obj[column.title + 'mapping'] = item
}
}
if (item.type === 'range') {
if (row.values >= item.from && row.values <= item.to) {
obj[column.title + 'mapping'] = item
}
}
if (item.type === 'regx') {
const reg = new RegExp(item.regx)
if (reg.test(row.values)) {
obj[column.title + 'mapping'] = item
}
}
})
}
}
})
return obj
},
tableDataSort (orderBy) {
},
}
},
mounted () {
this.initChart()

10
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -141,6 +141,16 @@ export default {
break
}
case 'system': {
console.log(this.chartInfo)
const params = {
q: '',
stat: startTime,
end: endTime,
resultType: 'matrix'
}
this.$get('/stat', params).then(res => {
console.log(res)
})
this.loading = false
break
}

6
nezha-fronted/src/components/common/login.vue
View File

@@ -153,9 +153,9 @@ export default {
methods: {
...mapActions(['loginSuccess']),
login () {
// if (this.loading || !this.license.valid || !this.license.token) {
// return
// }
if (this.loading || !this.license.valid || !this.license.token) {
return
}
if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
this.loading = true
this.$post('/sys/login', this.loginData).then(res => {

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

@@ -434,8 +434,71 @@
</el-row>
</transition>
</div>
<!-- table column-->
<div v-if="isTable(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.columns')}}</span>
</div>
<div v-for="(item,index) in chartConfig.param.columns" :key="index">
<div class="chart-title chart-title-config">
<span class="chart-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span>
{{item.value}}
</span>
</span>
</span>
<span>
<span @click="addColumns('')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
</span>
<span class="nz-icon-minus-medium">
<i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row class="thresholds-item" v-show="item.show" :key="1">
<div>
<div class='mapping-display'>Title</div>
</div>
<el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
<el-input size="small" v-model="item.title" placeholder="regx" @change="change"></el-input>
</el-form-item>
<div>
<div class='mapping-display'>Unit</div>
</div>
<el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
placeholder=""
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small"
style="flex: 1"
@change="unitSelected"
>
</el-cascader>
</el-row>
<el-row class="thresholds-item" v-show="item.show" :key="2">
<div>
<div class='mapping-display'>Display</div>
</div>
<el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change"/>
</el-form-item>
</el-row>
</transition-group>
</div>
<div @click="addColumns" class="thresholds-add">
Add Colums
</div>
</div>
<!-- valueMapping -->
<div v-if="isShowValueMapping(chartConfig.type)">
<div v-if="isShowValueMapping(chartConfig.type) || isTable(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
<el-switch
@@ -559,6 +622,12 @@
</el-form-item>
</el-row>
<el-row v-show="item.show" :key="2" class="thresholds-item">
<div v-if="isTable(chartConfig.type)">
<div class='mapping-display'>Columns</div>
</div>
<el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.mapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.column" style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
</el-form-item>
<div>
<div class='mapping-display'>Display</div>
</div>
@@ -575,68 +644,6 @@
</el-row>
</transition>
</div>
<!-- table column-->
<div v-if="isTable(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.columns')}}</span>
</div>
<div v-for="(item,index) in chartConfig.param.columns" :key="index">
<div class="chart-title chart-title-config">
<span class="chart-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span>
{{item.value}}
</span>
</span>
</span>
<span>
<span @click="addColumns('')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
</span>
<span class="nz-icon-minus-medium">
<i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row class="thresholds-item" v-show="item.show" :key="1">
<div>
<div class='mapping-display'>Title</div>
</div>
<el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
<el-input size="small" v-model="item.title" placeholder="regx" @change="change"></el-input>
</el-form-item>
<div>
<div class='mapping-display'>Unit</div>
</div>
<el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
placeholder=""
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small"
style="flex: 1"
@change="unitSelected"
>
</el-cascader>
</el-row>
<el-row class="thresholds-item" v-show="item.show" :key="2">
<div>
<div class='mapping-display'>Display</div>
</div>
<el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change"/>
</el-form-item>
</el-row>
</transition-group>
</div>
<div @click="addColumns" class="thresholds-add">
Add Colums
</div>
</div>
</el-form>
</div>
</template>
@@ -793,7 +800,11 @@ export default {
statistics: 'last',
columns: [],
tags: [],
indexs: ''
indexs: '',
valueMapping: {
show: true,
mapping: []
}
}
break
case 'log':

8
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -301,7 +301,7 @@ export default {
},
addMapping () {
const bacColor = randomcolor()
this.chartConfig.param.valueMapping.mapping.push({
const obj = {
type: 'value',
show: true,
value: undefined,
@@ -310,7 +310,11 @@ export default {
bac: bacColor + 'FF',
text: ColorReverse(bacColor) + 'FF'
}
})
}
if (this.chartConfig.type === 'table') {
obj.column = ''
}
this.chartConfig.param.valueMapping.mapping.push(obj)
this.change()
},
copyMapping (index) {

316
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -26,7 +26,7 @@
class="form-item--half-width"
prop="param.systemGroup"
>
<el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')">
<el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')" @change="systemGroupChange">
<el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/>
</el-select>
</el-form-item>
@@ -36,7 +36,7 @@
class="form-item--half-width"
prop="param.systemSelect"
>
<el-select size="small" v-model="chartConfig.param.systemSelect" :placeholder="$t('el.select.placeholder')">
<el-select size="small" v-model="chartConfig.param.systemSelect" :placeholder="$t('el.select.placeholder')" @change="systemSelectChange">
<el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/>
</el-select>
</el-form-item>
@@ -194,148 +194,6 @@
</el-form-item>
</div>
<!-- valueMapping -->
<div v-if="isShowValueMapping(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
<el-switch
v-model="chartConfig.param.valueMapping.show"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-row v-if="chartConfig.param.valueMapping.show">
<div
v-for="(item,index) in chartConfig.param.valueMapping.mapping"
:key="index"
>
<div class="chart-title chart-title-config">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span v-if="item.type === 'value'">
{{item.value}}
</span>
<span v-if="item.type === 'range'">
{{item.from}} -> {{item.to}}
</span>
<span v-if="item.type === 'regx'">
{{item.regx}}
</span>
<div :style="{background:item.color.bac}" class="prev-mapping-box">
<span :style="{color:item.color.text}">
{{item.display || "T"}}
</span>
</div>
</span>
</span>
<span>
<span @click="addMapping('')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i>
</span>
<span class="nz-icon-minus-medium">
<i @click="removeMapping(index)" class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row
v-show="item.show"
:key="1"
class="thresholds-item"
>
<div>
<el-select
v-model="item.type"
size="small"
style="width: 100px"
@change="(val)=>{mappingItemChange(index,val)}"
>
<el-option
v-for="item in mappingTypeList"
:value="item.value"
:label="item.label"
:key="item.value"/>
</el-select>
</div>
<el-form-item
v-if="item.type === 'value'"
:prop="'param.valueMapping.mapping.' + index + '.value'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
<el-input-number
:controls="false"
size="small"
v-model.number="item.value"
placeholder="value"
@change="change"
></el-input-number>
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + '.from'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
<el-input-number
:controls="false"
size="small"
v-model.number="item.from"
placeholder="from"
@change="change"
></el-input-number>
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + '.to'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
<el-input-number
:controls="false"
size="small"
v-model.number="item.to"
placeholder="to"
@change="change"
></el-input-number>
</el-form-item>
<el-form-item
v-if="item.type === 'regx'"
:prop="'param.valueMapping.mapping.' + index + '.regx'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
<el-input
size="small"
v-model="item.regx"
placeholder="regx"
@change="change"
></el-input>
</el-form-item>
</el-row>
<el-row v-show="item.show" :key="2" class="thresholds-item">
<div>
<div class='mapping-display'>Display</div>
</div>
<el-form-item :prop="'param.valueMapping.mapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change"/>
</el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
</el-row>
</transition-group>
</div>
<div @click="addMapping" class="thresholds-add">
Add valueMapping
</div>
</el-row>
</transition>
</div>
<!-- table column-->
<div v-if="isTable(chartConfig.type)">
<div class="form__sub-title">
@@ -397,6 +255,154 @@
Add Colums
</div>
</div>
<!-- valueMapping -->
<div v-if="isShowValueMapping(chartConfig.type) || isTable(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
<el-switch
v-model="chartConfig.param.valueMapping.show"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-row v-if="chartConfig.param.valueMapping.show">
<div
v-for="(item,index) in chartConfig.param.valueMapping.mapping"
:key="index"
>
<div class="chart-title chart-title-config">
<span class="chart-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span v-if="item.type === 'value'">
{{item.value}}
</span>
<span v-if="item.type === 'range'">
{{item.from}} -> {{item.to}}
</span>
<span v-if="item.type === 'regx'">
{{item.regx}}
</span>
<div :style="{background:item.color.bac}" class="prev-mapping-box">
<span :style="{color:item.color.text}">
{{item.display || "T"}}
</span>
</div>
</span>
</span>
<span>
<span @click="addMapping('')" style="margin-right: 5px">
<i class="nz-icon nz-icon-create-square"></i>
</span>
<span @click="copyMapping(index)" style="margin-right: 5px">
<i class="nz-icon nz-icon-override"></i>
</span>
<span @click="removeMapping(index)" style="margin-right: 5px">
<i class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row
v-show="item.show"
:key="1"
class="thresholds-item"
>
<div>
<el-select
v-model="item.type"
size="small"
style="width: 100px"
@change="(val)=>{mappingItemChange(index,val)}"
>
<el-option
v-for="item in mappingTypeList"
:value="item.value"
:label="item.label"
:key="item.value"/>
</el-select>
</div>
<el-form-item
v-if="item.type === 'value'"
:prop="'param.valueMapping.mapping.' + index + '.value'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
<el-input-number
:controls="false"
size="small"
v-model.number="item.value"
placeholder="value"
@change="change"
></el-input-number>
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + '.from'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
<el-input-number
:controls="false"
size="small"
v-model.number="item.from"
placeholder="from"
@change="change"
></el-input-number>
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + '.to'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
<el-input-number
:controls="false"
size="small"
v-model.number="item.to"
@change="change"
placeholder="to"
></el-input-number>
</el-form-item>
<el-form-item
v-if="item.type === 'regx'"
:prop="'param.valueMapping.mapping.' + index + '.regx'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
<el-input
size="small"
v-model="item.regx"
placeholder="regx"
@change="change"
></el-input>
</el-form-item>
</el-row>
<el-row v-show="item.show" :key="2" class="thresholds-item">
<div v-if="isTable(chartConfig.type)">
<div class='mapping-display'>Columns</div>
</div>
<el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.mapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.column" style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
</el-form-item>
<div>
<div class='mapping-display'>Display</div>
</div>
<el-form-item :prop="'param.valueMapping.mapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change"/>
</el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
</el-row>
</transition-group>
</div>
<div @click="addMapping" class="thresholds-add">
Add valueMapping
</div>
</el-row>
</transition>
</div>
</el-form>
</div>
</template>
@@ -405,11 +411,13 @@
import publicConfig from '@/components/common/rightBox/chart/publicConfig'
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
import nezhaColor from '@/components/common/nezhaColor'
import VueTagsInput from '@johmun/vue-tags-input'
export default {
name: 'systemChartConfig',
mixins: [publicConfig, chartTypeShow],
components: {
nezhaColor
nezhaColor,
VueTagsInput
},
data () {
return {
@@ -516,11 +524,16 @@ export default {
systemGroup: '',
systemSelect: '',
indexs: '',
tags: [],
sort: 'desc',
limit: 100,
nullType: 'null',
statistics: 'last',
columns: []
columns: [],
valueMapping: {
show: true,
mapping: []
}
}
break
}
@@ -533,6 +546,17 @@ export default {
this.chartConfig.param.systemSelect = ''
this.groupList = item.group
this.selectList = JSON.parse(JSON.stringify(item.select))
},
systemGroupChange () {
this.chartConfig.param.group = this.chartConfig.param.systemGroup.map(item => {
const obj = this.groupList.find(group => group.name === item)
return obj
})
this.change()
},
systemSelectChange () {
this.chartConfig.param.select = this.selectList.find(item => item.name === this.chartConfig.param.systemSelect)
this.change()
}
},
created () {