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

fix：调整react-JSX语法为 vueJSX 解决控制台报错

Browse Source
This commit is contained in:
zhangyu
2023-10-09 11:53:00 +08:00
parent 84115ec7b1
commit 632b29c999
9 changed files with 574 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/.babelrc
View File

@@ -12,7 +12,8 @@
]
}
}
]
],
"@vue/babel-preset-jsx"
],
"plugins": [
"transform-vue-jsx",

2
nezha-fronted/build/webpack.base.conf.js
View File

@@ -65,7 +65,7 @@ const baseConfig = {
],
exclude: '/node_modules/',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
presets: ['@babel/preset-env', '@vue/babel-preset-jsx']
}
},
{

938
nezha-fronted/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

33
nezha-fronted/package.json
View File

@@ -50,6 +50,8 @@
"@topology/flow-diagram": "^1.1.1",
"@topology/form-diagram": "^1.1.32",
"@topology/sequence-diagram": "^1.1.0",
"@vue/babel-preset-app": "^5.0.8",
"@vue/babel-preset-jsx": "^1.4.0",
"awesome-qr": "^2.1.5-rc.0",
"axios": "^0.19.0",
"babel-loader": "^8.3.0",
@@ -99,6 +101,7 @@
"vue-grid-layout": "^2.3.12",
"vue-i18n": "^8.15.1",
"vue-introjs": "^1.3.2",
"vue-jsx": "^0.2.9",
"vue-monaco": "^1.2.2",
"vue-quill-editor": "^3.0.6",
"vue-resource": "^1.5.1",
@@ -115,21 +118,6 @@
"devDependencies": {
"@babel/cli": "^7.7.0",
"@babel/core": "^7.7.2",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.7.1",
"@babel/register": "^7.7.0",
"@vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^9.6.4",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-component": "^1.1.1",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
@@ -140,8 +128,23 @@
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/plugin-transform-modules-commonjs": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.7.1",
"@babel/register": "^7.7.0",
"@vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^9.6.4",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.6",
"babel-plugin-component": "^1.1.1",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"cache-loader": "^4.1.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",

7
nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
View File

@@ -71,6 +71,13 @@
padding-left: 10px;
}
}
.legend-title-new {
margin-bottom: 15px;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
}
/*metric样式--end*/
.label-center{
vertical-align: middle;

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

@@ -95,24 +95,44 @@
></promql-input>
</el-form-item>
<el-row style="margin-top: 18px;display: flex">
<el-col class="legend-title">
<span class="legend-title__span">{{$t('dashboard.dashboard.chartForm.legend')}}&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>
</el-col>
<el-col style="flex: 1">
<el-input maxlength="512" size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
</el-col>
<el-col class="legend-title" style="margin-left: 10px">
<span class="legend-title__span">{{$t('overall.step')}}&nbsp;</span>
</el-col>
<el-col style="flex: 1">
<el-input-number @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>
</el-col>
<div style="width: 310px;flex-shrink: 0">
<div class="legend-title-new">
<span class="legend-title__span">{{$t('dashboard.dashboard.chartForm.legend')}}&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>
<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;">
<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">
<el-option :label="'range'" :value="'range'">range</el-option>
<el-option :label="'instant'" :value="'instant'">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 @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>

14
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -384,7 +384,7 @@ export default {
height: 2,
unit: 2,
type: 'line',
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined }],
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 'range' }],
param: {
stack: 0,
nullType: 'null',
@@ -427,7 +427,7 @@ export default {
height: 2,
unit: 2,
type: 'line',
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined }],
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 'range' }],
param: {
stack: 0,
nullType: 'null',
@@ -468,7 +468,7 @@ export default {
height: 2,
unit: 2,
type: 'log',
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined }],
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 'range' }],
param: {
enable: {
thresholds: false,
@@ -610,6 +610,14 @@ export default {
immediate: true,
handler (n) {
const obj = JSON.parse(JSON.stringify(n))
console.log(obj)
if (obj && obj.elements) {
obj.elements.forEach((item)=>{
if (!item.queryType) {
item.queryType = 'range'
}
})
}
if (obj.param && !obj.param.valueMapping) {
obj.param.valueMapping = []
}

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

@@ -329,14 +329,15 @@ export default {
name: this.expressionName[i],
state: this.expressionsShow[i].state,
orderNum: i,
step: this.expressionsShow[i].step
step: this.expressionsShow[i].step,
queryType: this.expressionsShow[i].queryType,
})
}
})
} else {
this.chartConfig.elements = []
}
this.$refs.chartForm.validate('elements.' + (index) + '.expression')
this.$refs.chartForm?.clearValidate('elements.' + (index) + '.expression')
this.change()
},
switchExpression (index, flag) {
@@ -412,7 +413,8 @@ export default {
legend: '',
elementId: '',
state: 1,
step: undefined
step: undefined,
queryType: 'range'
})
this.expressionChange()
} else {
@@ -427,7 +429,8 @@ export default {
elementId: item.id,
legend: item.legend,
state: item.state,
step: item.step
step: item.step,
queryType: item.queryType
})
}
},

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

@@ -273,7 +273,7 @@ export default {
sort: 'none'
},
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0, step: undefined }],
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0, step: undefined, queryType: 'range' }],
panel: '',
sync: 0,
remark: '',