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

feat： topo重构

Browse Source
This commit is contained in:
zhangyu
2023-02-22 18:21:39 +08:00
parent 9caa58a76b
commit 245eb6f985
12 changed files with 271 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/assets/css/common.scss
View File

@@ -647,6 +647,7 @@ textarea {
transform: unset !important;
}
}
.nz-el-dropdown-menu{
.el-dropdown-menu__item{
padding: 0;

61
nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
View File

@@ -81,4 +81,65 @@
width: 100%;
}
}
.meta2d-image-box{
position: relative;
.image-box {
width: 30px;
height: 30px;
}
.image-box-null {
border: 1px solid $--border-color-base-focus;
box-sizing: border-box;
border-radius: 2px;
}
.image-select-box {
text-align: center;
width: 225px;
z-index: 1;
padding: 0px 0px 0px 0px;
position: absolute;
top: 26px;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
border-radius: 4px;
left: 0;
.el-card {
border: none;
}
.el-card__body {
padding: 0;
}
.el-collapse-item {
margin-bottom: 2px;
}
.image-box-item {
width: 30px;
height: 30px;
margin: 5px 10px 10px 0;
flex-direction: column;
align-items: center;
display: inline-block;
position: relative;
.image-src{
width: 30px;
height: 30px;
}
.image-text {
width: 100%;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
}
.delIcon{
position: absolute;
right: -6px;
top: -8px;
}
}
.upload-pic-box{
width: 100%;
}
}
}
}

3
nezha-fronted/src/components/cli/webSSHNew.vue
View File

@@ -432,8 +432,7 @@ export default {
// this.$refs['console' + el.index][0].focusConsole()
if (this.$refs['console' + el.index] && this.$refs['console' + el.index][0]) {
setTimeout(() => {
this.$refs['console' + el.index][0].term.resize(225, 200)
this.$refs['console' + el.index][0].term.fit()
this.$refs['console' + el.index][0].resize()
this.$refs['console' + el.index][0].term.scrollToBottom()
this.$refs['console' + el.index][0].focusConsole()
})

4
nezha-fronted/src/components/common/mixin/beforeMeta2d.js
View File

@@ -23,7 +23,7 @@ export default {
this.topoData = res.data.topo.topo || {}
this.querysArray = res.data.topo.elements || []
this.params = {
timeType: res.data.topo.timeType || 1,
timeType: res.data.topo.timeType || 5,
unit: res.data.topo.unit || 1,
statistic: res.data.topo.statistic || 'last',
}
@@ -31,7 +31,7 @@ export default {
this.topoData = {}
this.querysArray = []
this.params = {
timeType: 1,
timeType: 5,
unit: 1,
statistic: 'last'
}

80
nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
View File

@@ -25,14 +25,16 @@ export default {
meta2dLoading: true,
position: {
top: 50,
left: 0
left: 0,
show: false
},
timer3: null,
chartParams: {
chartType: 'line',
content: '',
legends: [],
title: '',
titleShow: true,
titleShow: true
}
}
},
@@ -80,7 +82,8 @@ export default {
},
reload () {
const endTime = new Date().getTime()
const startTime = endTime - 60 * 5 * 1000
const startTime = endTime - 60 * this.params.timeType * 1000
console.log(startTime)
this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
console.log(arr)
this.clacTopoData(this.topoData, arr).then((data) => {
@@ -184,6 +187,7 @@ export default {
},
pensActive (pens, e) { // 选中节点
this.selectPens = pens
setTimeout(() => {
this.$refs.meta2dProps && (this.$refs.meta2dProps.isUpdate = true)
})
@@ -194,20 +198,76 @@ export default {
this.selectPens = []
}
},
penEnter (pen) { // 移入节点
console.log(pen, 'penEnter')
if (!pen.type) {
penEnter (pen, e) { // 移入节点
console.log(pen, e, 'penEnter')
console.log(getTopology(this.meta2dId).getPenRect(pen))
if (this.timer3) {
clearTimeout(this.timer3)
this.timer3 = null
}
this.position.show = false
if (!pen.type && pen.data.enable.tooltip) {
if (!pen.data.tooltip.legends.length) {
return
}
this.chartParams = {
...pen.data.tooltip,
unit: this.params.unit,
statistic: this.params.statistic
}
// this.chartParams.type = 'line'
// this.chartParams.values = pens.data.values
this.timer3 = setTimeout(() => {
let ePosition = window.ePosition
console.log(this.meta2dId, ePosition)
let boxWidth = this.$refs.meta2dBox.offsetWidth
let boxHeight = this.$refs.meta2dBox.offsetHeight
this.position.left = ePosition.layerX
this.position.top = ePosition.layerY
this.$nextTick(() => {
if ((boxWidth / 2) > ePosition.layerX) {
this.position.left = ePosition.layerX + 20
} else {
this.position.left = ePosition.layerX - 20 - 400
}
if (boxHeight > (ePosition.layerY + 300)) {
this.position.top = ePosition.layerY + 50
} else {
this.position.top = ePosition.layerY - 300
}
ePosition = null
boxWidth = null
boxHeight = null
})
this.position.show = true
clearTimeout(this.timer3)
}, 100)
}
},
penLeave (pens) { // 移出节点
// console.log(pens)
penLeave () {
if (!this.timer3) {
this.timer3 = setTimeout(() => {
this.position.show = false
this.timer3 = null
}, 50)
} else {
clearTimeout(this.timer3)
this.timer3 = null
this.timer3 = setTimeout(() => {
this.position.show = false
this.timer3 = null
}, 50)
}
},
tooltipOver () {
console.log('tooltipOver')
clearTimeout(this.timer3)
this.timer3 = null
},
tooltipOut () {
console.log('tooltipOut')
this.timer3 = setTimeout(() => {
this.position.show = false
this.timer3 = null
}, 50)
},
updatePens (pen, key) { // 更新对应的节点
// meta2d.setValue({ id: pen.id, text: 'new text' }, { render: false });

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

@@ -2,6 +2,7 @@ import { getTopology, setTopology, dealImg, topologyImg } from '@/components/com
import bus from '@/libs/bus'
import axios from 'axios'
import { getMetricTypeValue } from '@/components/common/js/tools'
import chartDataFormat from "@/components/chart/chartDataFormat";
export default {
methods: {
topoResize (id) {
@@ -74,7 +75,7 @@ export default {
const obj = {
type: 'item',
id: rindex + elements[index].name + JSON.stringify(r.metric),
name: this.handleLegendAlias(legend, elements[index].legend, r.metric),
name: this.handleLegendAlias(legend, elements[index].legend, r.metric) || legend,
values: r.values,
metric: r.metric || {},
elements: elements[index],
@@ -138,11 +139,12 @@ export default {
}
data.pens.forEach(pen => {
if (pen.isNz) {
if (pen.data.legend) {
if (pen.data.legend && pen.data.enable.valueMapping) {
const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent)
console.log(findItem)
if (findItem) {
pen.data.value = getMetricTypeValue(findItem.values, this.params.statistic || 'last')
pen.data.value = getMetricTypeValue(findItem.values, findItem.elements.statistic || 'last')
pen.data.showValue = chartDataFormat.getUnit(findItem.elements.unit).compute(pen.data.value, null, 2)
this.selectMapping(pen)
}
}
@@ -158,6 +160,7 @@ export default {
const show = pen.data.enable.valueMapping
const valueMapping = pen.data.valueMapping
const value = pen.data.value
const showValue = pen.data.showValue
if (show && valueMapping) {
valueMapping.forEach(item => {
if (item.type === 'value') {
@@ -172,7 +175,9 @@ export default {
}
if (item.type === 'regx') {
const reg = new RegExp(item.regx)
if (reg.test(value)) {
if (reg.test(showValue)) {
mapping = item
} else if (reg.test(value)) {
mapping = item
}
}

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

@@ -7,36 +7,36 @@
</div>
<div class="form-row-value">
<el-select v-model="dataTimeType" size="small" style="width: 100%">
<el-option v-for="item in timeData" :key="item.id" :value="item.id" :label="$t(item.text)"></el-option>
<el-option v-for="item in timeData" :key="item.id" :value="item.value" :label="$t(item.text)"></el-option>
</el-select>
</div>
<el-row style="margin-top: 18px;display: flex">
<div class="form-row-item">
<div class="form-row-key">
Statistics
</div>
<div class="form-row-value">
<el-select v-model="dataStatistic" size="small">
<el-option v-for="item in statisticsList" :key="item.value" :value="item.value" :label='$t(item.label)'></el-option>
</el-select>
</div>
</div>
<div class="form-row-item">
<div class="form-row-key">
Unit
</div>
<div class="form-row-value">
<el-cascader :id="'columns-unit'" v-model="dataUnit" :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>
</div>
</div>
</el-row>
<!-- <el-row style="margin-top: 18px;display: flex">-->
<!-- <div class="form-row-item">-->
<!-- <div class="form-row-key">-->
<!-- Statistics-->
<!-- </div>-->
<!-- <div class="form-row-value">-->
<!-- <el-select v-model="dataStatistic" size="small">-->
<!-- <el-option v-for="item in statisticsList" :key="item.value" :value="item.value" :label='$t(item.label)'></el-option>-->
<!-- </el-select>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="form-row-item">-->
<!-- <div class="form-row-key">-->
<!-- Unit-->
<!-- </div>-->
<!-- <div class="form-row-value">-->
<!-- <el-cascader :id="'columns-unit'" v-model="dataUnit" :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>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-row>-->
</div>
<div class="form-row-item form-row-item-full">
<div
@@ -139,6 +139,33 @@
<el-input maxlength="512" show-word-limit size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
</el-col>
</el-row>
<el-row style="margin-top: 18px;display: flex">
<div class="form-row-item">
<div class="form-row-key">
Statistics
</div>
<div class="form-row-value">
<el-select v-model="expressionsShow[index-1].statistic" size="small">
<el-option v-for="item in statisticsList" :key="item.value" :value="item.value" :label='$t(item.label)'></el-option>
</el-select>
</div>
</div>
<div class="form-row-item">
<div class="form-row-key">
Unit
</div>
<div class="form-row-value">
<el-cascader :id="'columns-unit'" v-model="expressionsShow[index-1].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>
</div>
</div>
</el-row>
</el-row>
</transition>
</el-row>
@@ -190,7 +217,7 @@ export default {
'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z'
],
dataTimeType: 1,
dataTimeType: 5,
dataStatistic: 'last',
dataUnit: 1,
statisticsList: this.$CONSTANTS.statisticsList,
@@ -218,51 +245,51 @@ export default {
id: 4,
text: this.$t('dashboard.panel.lastOneHour'),
type: 'hour',
value: 1
value: 60
},
{
id: 5,
text: this.$t('dashboard.panel.lastThreeHour'),
type: 'hour',
value: 3
value: 3 * 60
},
{
id: 6,
text: this.$t('dashboard.panel.lastSixHour'),
type: 'hour',
value: 6
value: 6 * 60
},
{
id: 7,
text: this.$t('dashboard.panel.lastTwelveHour'),
type: 'hour',
value: 12
value: 12 * 60
},
{
id: 8,
text: this.$t('dashboard.panel.lastTwentyFourHour'),
type: 'hour',
value: 24
value: 24 * 60
},
{
id: 9,
text: this.$t('dashboard.panel.lastTwoDay'),
type: 'date',
value: 2
value: 2 * 24 * 60
},
{
id: 10,
text: this.$t('dashboard.panel.lastSevenDay'),
type: 'date',
value: 7
value: 7 * 24 * 60
},
{
id: 11,
text: this.$t('dashboard.panel.lastThirtyDay'),
type: 'date',
value: 30
value: 30 * 24 * 60
}
],
]
}
},
mounted () {

56
nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
View File

@@ -684,12 +684,12 @@
Legend
</div>
<div class="form-row-value">
<div style="display: inline-block;width: calc(50% - 3px)">
<div style="display: inline-block;width: calc(20% - 3px)">
<el-select v-model="pen.data.parent" size="small">
<el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
</el-select>
</div>
<div style="display: inline-block;width: calc(50% - 3px)">
<div style="display: inline-block;width: calc(80% - 3px)">
<el-select v-model="pen.data.legend" size="small">
<el-option v-for="item in queryValues.filter(query => (query.parent === pen.data.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
</el-select>
@@ -882,17 +882,31 @@
</transition>
<!-- tooltip -->
<div class="form-row-title" v-if="pen.type !== 1">
tooltip
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/>
<div class="form-row-title">
Tooltip
<span>
<el-switch
v-model="pen.data.enable.tooltip"
:active-value="true"
:inactive-value="false"
@change="change('data.enable.tooltip')"
></el-switch>
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/>
</span>
</div>
<div v-show="elements.tooltip" class="form-row-content" v-if="pen.type !== 1">
<transition name="el-zoom-in-top">
<div v-show="elements.tooltip" class="form-row-content" v-if="pen.type !== 1">
<div class="form-row-item form-row-item-full">
<div class="form-row-key">
Title
</div>
<div class="form-row-value">
<el-input v-model="pen.data.tooltip.title" />
<div class="form-row-value" style="display: flex">
<el-input v-model="pen.data.tooltip.title" size="small" style="flex: 1"/>
<!-- 显示头部 -->
<div class="choose-header-btn" @click="pen.data.tooltip.titleShow = !pen.data.tooltip.titleShow" :title="$t('overall.visible')">
<i class="nz-icon nz-icon-mimakejian" v-if="pen.data.tooltip.titleShow"></i>
<i class="nz-icon nz-icon-mimabukejian" v-else></i>
</div>
</div>
</div>
<div class="form-row-item form-row-item-full">
@@ -908,28 +922,36 @@
Content
</div>
<div class="form-row-value">
<el-input v-model="pen.data.tooltip.content" />
<el-input maxlength="256" show-word-limit v-model="pen.data.tooltip.content" size="small" :rows="4" type="textarea"/>
</div>
</div>
<div class="form-row-item form-row-item-full">
<div class="form-row-key">
<div class="form-row-item form-row-item-full chart-config">
<div class="form-row-key" style="margin-bottom: 5px">
Legends
</div>
<div class="form-row-value" v-for="legend in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
<div style="display: inline-block;width: calc(50% - 3px)">
<el-select v-model="legend.parent" size="small">
<div class="form-row-value" style="margin-bottom: 10px" v-for="legend in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
<div style="display: inline-block;width: calc(20% - 3px)">
<el-select v-model="legend.parent" size="small" style="width: 100%">
<el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
</el-select>
</div>
<div style="display: inline-block;width: calc(50% - 3px)">
<el-select v-model="legend.legend" size="small">
<div style="display: inline-block;width: calc(40% - 3px)">
<el-select v-model="legend.legend" size="small" style="width: 100%">
<el-option v-for="item in queryValues.filter(query => (query.parent === legend.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
</el-select>
</div>
<div style="display: inline-block;width: calc(40% - 3px)">
<el-input v-model="legend.alias" size="small" style="width: 100%">
<template slot="prepend">Alias</template>
</el-input>
</div>
</div>
<div @click="addTooltipLegend" class="thresholds-add">
{{$t('overall.addTooltipLegend')}}
</div>
<div @click="addTooltipLegend()"> jia</div>
</div>
</div>
</transition>
</div>
</div>
</template>

2
nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
View File

@@ -150,7 +150,7 @@ export default {
})
},
dateChange () {
this.$emit('reload')
},
changeScreen () {
this.$store.commit('setShowTopoScreen', !this.topoScreen)

24
nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="meta2d-box list-page" v-my-loading="meta2dLoading">
<meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :project="project" :editFlag="editFlag" @edit="editFlag = true" @exitEdit="exitEdit"/>
<div class="meta2d-box list-page" v-my-loading="meta2dLoading" ref="meta2dBox">
<meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :project="project" :editFlag="editFlag" @edit="editFlag = true" @exitEdit="exitEdit" @reload="reload"/>
<div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'">
<div :id="meta2dId" style="height: 100%;width: 100%"></div>
</div>
@@ -13,14 +13,20 @@
:meta2dId="meta2dId"
@updatePens="updatePens"
/>
<meta2dTooltip
<div
v-show="position.show && !editFlag"
@mouseleave="tooltipOut"
@mouseenter="tooltipOver"
style="position: absolute"
:style="{
top: position.top + 'px',
left: position.top + 'px',
left: position.left + 'px',
}"
:params="chartParams"
/>
>
<meta2dTooltip
:params="chartParams"
/>
</div>
</div>
</template>
@@ -62,14 +68,18 @@ export default {
mounted () {
this.init()
bus.$on('changeSelectPens', this.pensActive)
this.$refs.meta2dBox.addEventListener('mousemove', this.mousemove)
},
methods: {
mousemove (e) {
window.ePosition = e
}
},
beforeDestroy () {
getTopology(this.meta2dId).destroy()
setTopology(this.meta2dId, null)
bus.$off('changeSelectPens', this.pensActive)
this.$refs.meta2dBox.removeEventListener('mousemove', this.mousemove)
}
}

57
nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
View File

@@ -12,8 +12,8 @@
<!-- <img :src="item.image" class="imag-src"/>-->
<!-- <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>-->
<!-- </div>-->
<div style="height: 450px" v-my-loading="imgageLoading">
<el-card shadow="hover" style="height:420px;width:100%;overflow-y: auto"
<div style="height: 350px" v-my-loading="imgageLoading">
<el-card shadow="hover" style="height:320px;width:100%;overflow-y: auto"
class="project-topology-add-node">
<el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box">
<el-collapse-item :title="item.group" :name="item.group">
@@ -165,56 +165,5 @@ export default {
</script>
<style scoped lang="scss">
.meta2d-image-box{
position: relative;
.image-box {
width: 30px;
height: 30px;
}
.image-box-null {
border: 1px solid #999999;
box-sizing: border-box;
border-radius: 2px;
}
.image-select-box {
text-align: center;
width: 225px;
z-index: 1;
padding: 5px 0px 0px 0px;
position: absolute;
top: 26px;
background: #ffffff;
border: 1px solid #999999;
border-radius: 4px;
left: 0;
/deep/ .el-card__body {
padding: 0;
}
.image-box-item {
width: 30px;
height: 50px;
margin: 0 10px 10px 0;
flex-direction: column;
align-items: center;
display: inline-block;
position: relative;
.image-src{
width: 30px;
height: 30px;
}
.image-text {
width: 100%;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
}
.delIcon{
position: absolute;
right: 0;
top: 0;
}
}
}
}
</style>

4
nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue
View File

@@ -1,6 +1,6 @@
<template>
<div style="width: 300px;height: 200px">
<div v-if="params.titleShow">{{params.title}}</div>
<div class="tooltip-box" style="width: 400px;height: 300px">
<div v-if="params.titleShow && params.title">{{params.title}}</div>
<div
v-if="params.chartType === 'text'"