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

Merge branch 'dev-3.2' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3

Browse Source
This commit is contained in:
zhangyu
2022-03-14 16:23:16 +08:00
parent c7573eb09c 26a1999bf5
commit 274015ecf1
130 changed files with 1171 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/index.html
View File

@@ -4,6 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="data:;base64,=">
<link href="./static/explore-tab-logo.png" rel="icon" type="image/x-icon"/> <link href="./static/explore-tab-logo.png" rel="icon" type="image/x-icon"/>
<title>Nezha</title> <title>Nezha</title>

7
nezha-fronted/src/App.vue
View File

@@ -15,9 +15,6 @@ export default {
browserWindowZoom browserWindowZoom
}, },
async created () { async created () {
if (window.outerWidth <= 1024) { // outerWidth 获取设备宽度
document.querySelector('meta[name=viewport]').setAttribute('content', `width=device-width, initial-scale=${window.outerWidth / (1024 * window.devicePixelRatio)}, maximum-scale=1.0, user-scalable=0`)
}
const herfSpiltArr = window.location.href.split('/') const herfSpiltArr = window.location.href.split('/')
if (herfSpiltArr[3] !== '#') { if (herfSpiltArr[3] !== '#') {
herfSpiltArr[3] = '#' herfSpiltArr[3] = '#'
@@ -28,6 +25,7 @@ export default {
const result = await this.$http.get(url) const result = await this.$http.get(url)
this.$axios.defaults.baseURL = result.body.baseUrl this.$axios.defaults.baseURL = result.body.baseUrl
const version = result.body.version const version = result.body.version
const defaultWindowWidth = result.body.width || 1024
if (version !== localStorage.getItem('nz-version')) { if (version !== localStorage.getItem('nz-version')) {
localStorage.clear() localStorage.clear()
localStorage.clear() localStorage.clear()
@@ -35,6 +33,9 @@ export default {
herfSpiltArr[2] = herfSpiltArr[2] + '?t=' + new Date().getTime() herfSpiltArr[2] = herfSpiltArr[2] + '?t=' + new Date().getTime()
window.location.href = herfSpiltArr[0] + '//' + herfSpiltArr[2] window.location.href = herfSpiltArr[0] + '//' + herfSpiltArr[2]
} }
if (window.outerWidth <= defaultWindowWidth) { // outerWidth 获取设备宽度
document.querySelector('meta[name=viewport]').setAttribute('content', `width=device-width, initial-scale=${window.outerWidth / (defaultWindowWidth * window.devicePixelRatio)}, maximum-scale=1.0, user-scalable=0`)
}
} }
} }
</script> </script>

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

@@ -73,6 +73,9 @@
.green-bg { .green-bg {
background-color:$--color-success !important; background-color:$--color-success !important;
} }
.yellow-bg {
background-color:$--color-silence !important;
}
.gray-bg { .gray-bg {
background-color: $--color-suspended !important; background-color: $--color-suspended !important;
} }

5
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -401,6 +401,11 @@
} }
} }
} }
.endpoint-query-metrics.chart-fullscreen.nz-dialog {
.chart-screen-header .chart-header__tools #browser-go {
margin-left: 5px;
}
}
.chart-fullscreen.nz-dialog { .chart-fullscreen.nz-dialog {
.el-dialog__header{ .el-dialog__header{
display: none; display: none;

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

@@ -20,5 +20,6 @@
} }
.chart-unit .el-input__inner { .chart-unit .el-input__inner {
border-top-left-radius: 0 !important; border-top-left-radius: 0 !important;
border-color: $--border-color-base;
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
} }

2
nezha-fronted/src/assets/css/components/common/login.scss
View File

@@ -164,7 +164,7 @@
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-between;
.license-info { .license-info {
margin-bottom: 10px; margin-bottom: 10px;
color: white; color: white;

2
nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
View File

@@ -1,6 +1,6 @@
.props-box label { .props-box label {
line-height: 32px; line-height: 32px;
width: 100px; width: 120px;
font-size: 14px; font-size: 14px;
text-align: right; text-align: right;
} }

5
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -61,6 +61,7 @@
.chart-title-config { .chart-title-config {
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
border-radius: 2px; border-radius: 2px;
position: relative;
display: flex; display: flex;
padding: 0; padding: 0;
padding-left: 5px; padding-left: 5px;
@@ -159,9 +160,11 @@
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
border-radius: 5px; border-radius: 5px;
margin-left: 120px;
padding: 0 3px; padding: 0 3px;
text-align: center; text-align: center;
position: absolute;
top: 0;
left: 200px;
} }
.element-item { .element-item {
padding: 0; padding: 0;

6
nezha-fronted/src/assets/css/components/common/searchInput.scss
View File

@@ -46,6 +46,12 @@
display: flex; display: flex;
position: relative; position: relative;
} }
@media screen and (max-width:2000px){
.bottom-data-list .new-search .search-input-all{
width: 176px !important;
min-width: 176px;
}
}
.search-input-all .btn-retract{ .search-input-all .btn-retract{
padding: 0 4px; padding: 0 4px;
text-align: center; text-align: center;

5
nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
View File

@@ -101,3 +101,8 @@
.nz-message .el-textarea textarea{ .nz-message .el-textarea textarea{
height: 108px !important; height: 108px !important;
} }
.alert-message-state{
padding: 3px 5px;
border-radius: 4px;
color: $--color-text-primary;
}

51
nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
View File

@@ -39,31 +39,40 @@
} }
.panel { .panel {
.el-table { .right-box.right-box-chart-temp {
border-radius: 5px; .el-table {
border-left: 1px solid $--border-color-light; border-radius: 5px;
border-top: 1px solid $--border-color-light; .el-table__body-wrapper {
.el-table__body-wrapper { height: calc(100% - 40px) !important;
height: calc(100% - 65px) !important; }
th.is-center {
border-right: none;
}
th {
border-right: 1px solid $--border-color-light;
}
th:nth-of-type(2) {
border-left: 1px solid $--border-color-light;
}
tr {
background-color: $--background-color-empty;
}
td {
border-bottom: 1px solid $--border-color-light;
}
th.is-leaf {
border-bottom: 1px solid $--border-color-light;
}
} }
th { .el-table--border th.gutter:last-of-type {
border-right: 1px solid $--border-color-light;
}
tr {
background-color: $--background-color-empty;
}
td {
border-bottom: 1px solid $--border-color-light; border-bottom: 1px solid $--border-color-light;
} }
th.is-leaf { .el-table--border::after {
border-bottom: 1px solid $--border-color-light; background-color: $--border-color-light;
}
.el-table::before {
display: none;
} }
}
.el-table--border th.gutter:last-of-type {
border-bottom: 1px solid $--border-color-light;
}
.el-table--border::after {
background-color: $--border-color-light;
} }
} }
/* begin-chart list*/ /* begin-chart list*/

2
nezha-fronted/src/assets/css/themes/theme-dark.scss
View File

@@ -69,6 +69,8 @@ $--color-info: #999998;
$--color-suspended: #9e9c98; $--color-suspended: #9e9c98;
// 监控色 // 监控色
$--color-monitor: #98AEC5; $--color-monitor: #98AEC5;
// silence
$--color-silence: #FFC107;
/* 6.table */ /* 6.table */
// 表头字色 // 表头字色

2
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -69,6 +69,8 @@ $--color-info: #999998;
$--color-suspended: #9e9c98; $--color-suspended: #9e9c98;
// 监控色 // 监控色
$--color-monitor: #98AEC5; $--color-monitor: #98AEC5;
// sliences
$--color-silence: #FFC107;
/* 6.table */ /* 6.table */
// 表头字色 // 表头字色

13
nezha-fronted/src/components/chart/ChartScreenHeader.vue
View File

@@ -26,7 +26,7 @@
</span> </span>
</el-popover> </el-popover>
</span> </span>
<div class="chart-header__title">{{chartInfo.name}}</div> <div class="chart-header__title" :title="chartInfo.name">{{chartInfo.name}}</div>
<div class="chart-header__tools"> <div class="chart-header__tools">
<span v-if="chartInfo.remark" class="chart-header__tool top-tool-btn-group"> <span v-if="chartInfo.remark" class="chart-header__tool top-tool-btn-group">
<el-tooltip :content="chartInfo.remark" effect="light" placement="top"> <el-tooltip :content="chartInfo.remark" effect="light" placement="top">
@@ -58,7 +58,7 @@
<script> <script>
import bus from '@/libs/bus' import bus from '@/libs/bus'
import lodash from 'lodash' import lodash from 'lodash'
import chartHeaderMixin from "@/components/chart/chartHeaderMixin"; import chartHeaderMixin from '@/components/chart/chartHeaderMixin'
export default { export default {
name: 'ChartScreenHeader', name: 'ChartScreenHeader',
mixins: [chartHeaderMixin], mixins: [chartHeaderMixin],
@@ -88,7 +88,8 @@ export default {
this.filter.value = this.searchTime[2] this.filter.value = this.searchTime[2]
this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
setTimeout(() => { setTimeout(() => {
this.$emit('dateChange', this.filter, this.$refs.pickTime.$refs.multipleTime.searchTime) const multipleTime = this.$refs.pickTime.$refs.multipleTime ? this.$refs.pickTime.$refs.multipleTime.searchTime : ''
this.$emit('dateChange', this.filter, multipleTime)
}, 100) }, 100)
}, },
closeDialog () { closeDialog () {
@@ -124,10 +125,14 @@ export default {
case 'bar' : case 'bar' :
case 'table' : case 'table' :
case 'stat' : case 'stat' :
case 'guage' : case 'gauge' :
case 'pie' : case 'pie' :
case 'treemap' : case 'treemap' :
case 'log' : case 'log' :
case 'hexagon' :
case 'diagram' :
case 'url':
case 'clock':
return true return true
default: return false default: return false
} }

6
nezha-fronted/src/components/chart/chart.vue
View File

@@ -76,6 +76,7 @@
:chart-info="chartInfo" :chart-info="chartInfo"
:chart-option="chartOption" :chart-option="chartOption"
:is-fullscreen="isFullscreen" :is-fullscreen="isFullscreen"
@refreshLogs="refreshLogs"
@chartIsNoData="chartIsNoData" @chartIsNoData="chartIsNoData"
></chart-log> ></chart-log>
<chart-stat <chart-stat
@@ -261,7 +262,7 @@ export default {
} else { } else {
return getOption(this.chartInfo.type) return getOption(this.chartInfo.type)
} }
}, }
}, },
methods: { methods: {
isTimeSeries, isTimeSeries,
@@ -287,6 +288,9 @@ export default {
}, },
resize () { resize () {
this.$refs['chart' + this.chartInfo.id] && this.$refs['chart' + this.chartInfo.id].resize() this.$refs['chart' + this.chartInfo.id] && this.$refs['chart' + this.chartInfo.id].resize()
},
refreshLogs (params) {
this.$emit('refreshLogs', params)
} }
}, },
mounted () { mounted () {

3
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -112,6 +112,9 @@ export default {
/* 使用setTimeout延迟渲染图表，避免样式错乱 */ /* 使用setTimeout延迟渲染图表，避免样式错乱 */
setTimeout(() => { setTimeout(() => {
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
if (!myChart) {
return
}
myChart.setOption(chartOption) myChart.setOption(chartOption)
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
this.isInit = false this.isInit = false

2
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -31,7 +31,7 @@ import { initColor } from '@/components/chart/chart/tools'
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
export default { export default {
name: 'chart-guage', name: 'chart-gauge',
mixins: [chartMixin, chartFormat], mixins: [chartMixin, chartFormat],
data () { data () {
return { return {

2
nezha-fronted/src/components/chart/chart/chartGroup.vue
View File

@@ -56,7 +56,7 @@ export default {
return { return {
...item, ...item,
// hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件 // hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
loaded: true loaded: false
} }
}) })
}, 100) }, 100)

13
nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
View File

@@ -57,6 +57,8 @@ export default {
this.initHexagonData(this.chartInfo, this.chartData).then(() => { this.initHexagonData(this.chartInfo, this.chartData).then(() => {
this.getLayout().then(layout => { this.getLayout().then(layout => {
this.initHexagon(layout) this.initHexagon(layout)
}).catch(() => {
}) })
}) })
}, 200) }, 200)
@@ -331,9 +333,12 @@ export default {
: '#FFFFFF' : '#FFFFFF'
}, },
getLayout () { getLayout () {
this.boxWidth = this.$refs[`chart-canvas-${this.chartId}`].offsetWidth - 2 * this.boxPadding return new Promise((resolve, reject) => {
this.boxHeight = this.$refs[`chart-canvas-${this.chartId}`].offsetHeight - 2 * this.boxPadding if (!this.$refs[`chart-canvas-${this.chartId}`]) {
return new Promise(resolve => { reject()
}
this.boxWidth = this.$refs[`chart-canvas-${this.chartId}`].offsetWidth - 2 * this.boxPadding
this.boxHeight = this.$refs[`chart-canvas-${this.chartId}`].offsetHeight - 2 * this.boxPadding
let radius = 0 let radius = 0
let col = 0 let col = 0
let row = 0 let row = 0
@@ -384,6 +389,8 @@ export default {
this.hexagonTimer = setTimeout(() => { this.hexagonTimer = setTimeout(() => {
this.getLayout().then(layout => { this.getLayout().then(layout => {
this.initHexagon(layout) this.initHexagon(layout)
}).catch(() => {
}) })
}, 50) }, 50)
} }

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

@@ -164,6 +164,7 @@ export default {
initChart () { initChart () {
this.tableData = [] this.tableData = []
this.isInit = false this.isInit = false
this.operations.descending = this.chartInfo.descending
this.chartData.forEach(item => { this.chartData.forEach(item => {
item.forEach(row => { item.forEach(row => {
this.tableData.push({ this.tableData.push({
@@ -215,7 +216,7 @@ export default {
const limit = this.operations.limit const limit = this.operations.limit
const descending = this.operations.descending const descending = this.operations.descending
const params = { const params = {
logql: this.expressions, logql: this.chartInfo.elements.map(item => item.expression),
start: this.$stringTimeParseToUnix(this.filterTime[0]), start: this.$stringTimeParseToUnix(this.filterTime[0]),
end: this.$stringTimeParseToUnix(this.filterTime[1]), end: this.$stringTimeParseToUnix(this.filterTime[1]),
direction: descending ? 'backward' : 'forward', direction: descending ? 'backward' : 'forward',
@@ -286,6 +287,13 @@ export default {
handler (n) { handler (n) {
this.initChart(this.chartOption) this.initChart(this.chartOption)
} }
},
operations: {
deep: true,
handler (n) {
// this.tableData = this.tableData.reverse()
this.$emit('refreshLogs', this.operations)
}
} }
} }
} }

5
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -89,6 +89,9 @@ export default {
/* 使用setTimeout延迟渲染图表，避免样式错乱 */ /* 使用setTimeout延迟渲染图表，避免样式错乱 */
setTimeout(() => { setTimeout(() => {
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
if (!myChart) {
return
}
myChart.setOption(chartOption) myChart.setOption(chartOption)
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
this.isInit = false this.isInit = false
@@ -157,7 +160,7 @@ export default {
try { try {
this.isStack = this.chartInfo.param.stack this.isStack = this.chartInfo.param.stack
} catch (e) {} } catch (e) {}
this.chartInfo.loaded && this.initChart(this.chartOption) this.chartInfo.loaded && this.initChart(this.chartOption)
} }
} }
</script> </script>

4
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -151,8 +151,8 @@ export default {
this.tooltip.show = false this.tooltip.show = false
}, },
getLayout () { getLayout () {
this.boxWidth = this.$refs['chart-stat-box'].offsetWidth - 2 * this.boxPadding this.boxWidth = this.$refs['chart-stat-box'].offsetWidth - 3 * this.boxPadding
this.boxHeight = this.$refs['chart-stat-box'].offsetHeight - 2 * this.boxPadding this.boxHeight = this.$refs['chart-stat-box'].offsetHeight - 3 * this.boxPadding
return new Promise(resolve => { return new Promise(resolve => {
let rateMax = 0 let rateMax = 0
let col = 0 let col = 0

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

@@ -67,7 +67,7 @@ export default {
} }
this.tableTimer = setTimeout(() => { this.tableTimer = setTimeout(() => {
this.columns = this.chartInfo.param.columns this.columns = this.chartInfo.param.columns
this.chartInfo.param.valueMapping.forEach((item) => { this.chartInfo.param.valueMapping && this.chartInfo.param.valueMapping.forEach((item) => {
if (this.valueMapping[item.column]) { if (this.valueMapping[item.column]) {
this.valueMapping[item.column].push(item) this.valueMapping[item.column].push(item)
} else { } else {
@@ -94,7 +94,7 @@ export default {
initTableData (chartInfo, originalDatas) { initTableData (chartInfo, originalDatas) {
let colorIndex = 0 let colorIndex = 0
const returnData = {} const returnData = {}
const arr = chartInfo.param.indexs.split(',') const arr = chartInfo.param.indexs ? chartInfo.param.indexs.split(',') : []
const tableInitialData = lodash.cloneDeep(originalDatas) const tableInitialData = lodash.cloneDeep(originalDatas)
tableInitialData.forEach((originalData, expressionIndex) => { tableInitialData.forEach((originalData, expressionIndex) => {
let key = expressionIndex let key = expressionIndex
@@ -107,7 +107,7 @@ export default {
originalData.forEach((data, dataIndex) => { originalData.forEach((data, dataIndex) => {
this.isNoData = false this.isNoData = false
data.$labels = data.metric data.$labels = data.metric
const value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last') const value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last') + ''
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2) 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.$value = value data.$value = value

7
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -42,7 +42,7 @@ export default {
data () { data () {
return { return {
stackTotalColor: null, stackTotalColor: null,
isStack: false, isStack: false
} }
}, },
computed: { computed: {
@@ -93,6 +93,9 @@ export default {
/* 使用setTimeout延迟渲染图表，避免样式错乱 */ /* 使用setTimeout延迟渲染图表，避免样式错乱 */
setTimeout(() => { setTimeout(() => {
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
if (!myChart) {
return
}
myChart.setOption(chartOption) myChart.setOption(chartOption)
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
this.isInit = false this.isInit = false
@@ -108,7 +111,7 @@ export default {
let seriesIndex = 0 let seriesIndex = 0
originalDatas.forEach((originalData, expressionIndex) => { originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => { originalData.forEach((data, dataIndex) => {
if (seriesIndex >= this.series.length) {// 只取跟series 一样长度作比较 if (seriesIndex >= this.series.length) { // 只取跟series 一样长度作比较
return return
} }
seriesIndex++ seriesIndex++

3
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -86,6 +86,9 @@ export default {
/* 使用setTimeout延迟渲染图表，避免样式错乱 */ /* 使用setTimeout延迟渲染图表，避免样式错乱 */
setTimeout(() => { setTimeout(() => {
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
if (!myChart) {
return
}
myChart.setOption(chartOption) myChart.setOption(chartOption)
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
this.isInit = false this.isInit = false

30
nezha-fronted/src/components/chart/chart/grid/TestElement.vue
View File

@@ -6,20 +6,20 @@
<style> <style>
</style> </style>
<script> <script>
export default { export default {
name: "TestElement", name: 'TestElement',
props: { props: {
text : { text: {
type: String, type: String,
default: "x", default: 'x'
},
},
data: function() {
return {
}
},
mounted: function() {
console.log("### " + this.text + " ready!");
},
} }
},
data: function () {
return {
}
},
mounted: function () {
console.log('### ' + this.text + ' ready!')
}
}
</script> </script>

106
nezha-fronted/src/components/chart/chart/grid/aspectRatio.js
View File

@@ -15,97 +15,97 @@
* }); * });
* ``` * ```
*/ */
import extend from "../utils/extend.js"; import extend from '../utils/extend.js'
import { addEdges } from "../utils/rect.js"; import { addEdges } from '../utils/rect.js'
import Modification from "./Modification.js"; import Modification from './Modification.js'
import { makeModifier } from "./base.js"; import { makeModifier } from './base.js'
const aspectRatio = { const aspectRatio = {
start(arg) { start (arg) {
const { const {
state, state,
rect, rect,
edges: originalEdges, edges: originalEdges,
pageCoords: coords pageCoords: coords
} = arg; } = arg
let { let {
ratio ratio
} = state.options; } = state.options
const { const {
equalDelta, equalDelta,
modifiers modifiers
} = state.options; } = state.options
if (ratio === 'preserve') { if (ratio === 'preserve') {
ratio = rect.width / rect.height; ratio = rect.width / rect.height
} }
state.startCoords = extend({}, coords); state.startCoords = extend({}, coords)
state.startRect = extend({}, rect); state.startRect = extend({}, rect)
state.ratio = ratio; state.ratio = ratio
state.equalDelta = equalDelta; state.equalDelta = equalDelta
const linkedEdges = state.linkedEdges = { const linkedEdges = state.linkedEdges = {
top: originalEdges.top || originalEdges.left && !originalEdges.bottom, top: originalEdges.top || originalEdges.left && !originalEdges.bottom,
left: originalEdges.left || originalEdges.top && !originalEdges.right, left: originalEdges.left || originalEdges.top && !originalEdges.right,
bottom: originalEdges.bottom || originalEdges.right && !originalEdges.top, bottom: originalEdges.bottom || originalEdges.right && !originalEdges.top,
right: originalEdges.right || originalEdges.bottom && !originalEdges.left right: originalEdges.right || originalEdges.bottom && !originalEdges.left
}; }
state.xIsPrimaryAxis = !!(originalEdges.left || originalEdges.right); state.xIsPrimaryAxis = !!(originalEdges.left || originalEdges.right)
if (state.equalDelta) { if (state.equalDelta) {
state.edgeSign = (linkedEdges.left ? 1 : -1) * (linkedEdges.top ? 1 : -1); state.edgeSign = (linkedEdges.left ? 1 : -1) * (linkedEdges.top ? 1 : -1)
} else { } else {
const negativeSecondaryEdge = state.xIsPrimaryAxis ? linkedEdges.top : linkedEdges.left; const negativeSecondaryEdge = state.xIsPrimaryAxis ? linkedEdges.top : linkedEdges.left
state.edgeSign = negativeSecondaryEdge ? -1 : 1; state.edgeSign = negativeSecondaryEdge ? -1 : 1
} }
extend(arg.edges, linkedEdges); extend(arg.edges, linkedEdges)
if (!modifiers || !modifiers.length) return; if (!modifiers || !modifiers.length) return
const subModification = new Modification(arg.interaction); const subModification = new Modification(arg.interaction)
subModification.copyFrom(arg.interaction.modification); subModification.copyFrom(arg.interaction.modification)
subModification.prepareStates(modifiers); subModification.prepareStates(modifiers)
state.subModification = subModification; state.subModification = subModification
subModification.startAll({ ...arg subModification.startAll({ ...arg })
});
}, },
set(arg) { set (arg) {
const { const {
state, state,
rect, rect,
coords coords
} = arg; } = arg
const initialCoords = extend({}, coords); const initialCoords = extend({}, coords)
const aspectMethod = state.equalDelta ? setEqualDelta : setRatio; const aspectMethod = state.equalDelta ? setEqualDelta : setRatio
aspectMethod(state, state.xIsPrimaryAxis, coords, rect); aspectMethod(state, state.xIsPrimaryAxis, coords, rect)
if (!state.subModification) { if (!state.subModification) {
return null; return null
} }
const correctedRect = extend({}, rect); const correctedRect = extend({}, rect)
addEdges(state.linkedEdges, correctedRect, { addEdges(state.linkedEdges, correctedRect, {
x: coords.x - initialCoords.x, x: coords.x - initialCoords.x,
y: coords.y - initialCoords.y y: coords.y - initialCoords.y
}); })
const result = state.subModification.setAll({ ...arg, const result = state.subModification.setAll({
...arg,
rect: correctedRect, rect: correctedRect,
edges: state.linkedEdges, edges: state.linkedEdges,
pageCoords: coords, pageCoords: coords,
prevCoords: coords, prevCoords: coords,
prevRect: correctedRect prevRect: correctedRect
}); })
const { const {
delta delta
} = result; } = result
if (result.changed) { if (result.changed) {
const xIsCriticalAxis = Math.abs(delta.x) > Math.abs(delta.y); // do aspect modification again with critical edge axis as primary const xIsCriticalAxis = Math.abs(delta.x) > Math.abs(delta.y) // do aspect modification again with critical edge axis as primary
aspectMethod(state, xIsCriticalAxis, result.coords, result.rect); aspectMethod(state, xIsCriticalAxis, result.coords, result.rect)
extend(coords, result.coords); extend(coords, result.coords)
} }
return result.eventProps; return result.eventProps
}, },
defaults: { defaults: {
@@ -114,34 +114,34 @@ const aspectRatio = {
modifiers: [], modifiers: [],
enabled: false enabled: false
} }
}; }
function setEqualDelta({ function setEqualDelta ({
startCoords, startCoords,
edgeSign edgeSign
}, xIsPrimaryAxis, coords) { }, xIsPrimaryAxis, coords) {
if (xIsPrimaryAxis) { if (xIsPrimaryAxis) {
coords.y = startCoords.y + (coords.x - startCoords.x) * edgeSign; coords.y = startCoords.y + (coords.x - startCoords.x) * edgeSign
} else { } else {
coords.x = startCoords.x + (coords.y - startCoords.y) * edgeSign; coords.x = startCoords.x + (coords.y - startCoords.y) * edgeSign
} }
} }
function setRatio({ function setRatio ({
startRect, startRect,
startCoords, startCoords,
ratio, ratio,
edgeSign edgeSign
}, xIsPrimaryAxis, coords, rect) { }, xIsPrimaryAxis, coords, rect) {
if (xIsPrimaryAxis) { if (xIsPrimaryAxis) {
const newHeight = rect.width / ratio; const newHeight = rect.width / ratio
coords.y = startCoords.y + (newHeight - startRect.height) * edgeSign; coords.y = startCoords.y + (newHeight - startRect.height) * edgeSign
} else { } else {
const newWidth = rect.height * ratio; const newWidth = rect.height * ratio
coords.x = startCoords.x + (newWidth - startRect.width) * edgeSign; coords.x = startCoords.x + (newWidth - startRect.width) * edgeSign
} }
} }
export default makeModifier(aspectRatio, 'aspectRatio'); export default makeModifier(aspectRatio, 'aspectRatio')
export { aspectRatio }; export { aspectRatio }
//# sourceMappingURL=aspectRatio.js.map // # sourceMappingURL=aspectRatio.js.map

2
nezha-fronted/src/components/chart/chart/options/chartTreemap.js
View File

@@ -19,7 +19,7 @@ const chartTreemapOption = {
return [ return [
'<div class="tooltip-title">' + '<div class="tooltip-title">' +
formatUtil.encodeHTML(treePath.join('/')) + formatUtil.encodeHTML(treePath.join('/')) +
'</div>', '</div>'
].join('') ].join('')
} }
}, },

4
nezha-fronted/src/components/chart/chart/tools.js
View File

@@ -43,7 +43,7 @@ export function getOption (type) {
chartOption = lodash.cloneDeep(chartTreemapOption) chartOption = lodash.cloneDeep(chartTreemapOption)
break break
} }
case chartType.guage: { case chartType.gauge: {
chartOption = lodash.cloneDeep(chartGaugeOption) chartOption = lodash.cloneDeep(chartGaugeOption)
break break
} }
@@ -109,7 +109,7 @@ export function isTable (type) {
return type === chartType.table return type === chartType.table
} }
export function isGauge (type) { export function isGauge (type) {
return type === chartType.guage return type === chartType.gauge
} }
export function isClock (type) { export function isClock (type) {
return type === chartType.clock return type === chartType.clock

14
nezha-fronted/src/components/chart/chartHeader.vue
View File

@@ -26,7 +26,7 @@
</span> </span>
</el-popover> </el-popover>
</span> </span>
<div class="chart-header__title" v-if="!isGroup">{{chartInfo.name}}</div> <div class="chart-header__title" v-if="!isGroup" :title="chartInfo.name">{{chartInfo.name}}</div>
<div class="chart-header__title" v-else > <div class="chart-header__title" v-else >
<span @click="groupShow"> <i class="nz-icon" :class="chartInfo.param.collapse ? 'nz-icon-arrow-right': 'nz-icon-arrow-down'"></i></span> <span @click="groupShow"> <i class="nz-icon" :class="chartInfo.param.collapse ? 'nz-icon-arrow-right': 'nz-icon-arrow-down'"></i></span>
{{chartInfo.name}} {{chartInfo.name}}
@@ -41,6 +41,11 @@
<i class="nz-icon nz-icon-info-normal tool__icon"></i> <i class="nz-icon nz-icon-info-normal tool__icon"></i>
</el-tooltip> </el-tooltip>
</span> </span>
<span v-if="chartInfo.type=='group'" class="chart-header__tool" @click="addChartGroup">
<el-tooltip :content="$t('overall.add')" effect="light" placement="top">
<i class="nz-icon nz-icon-plus tool__icon"></i>
</el-tooltip>
</span>
<span class="chart-header__tool" @click="refreshChart"> <span class="chart-header__tool" @click="refreshChart">
<el-tooltip :content="$t('dashboard.refresh')" effect="light" placement="top"> <el-tooltip :content="$t('dashboard.refresh')" effect="light" placement="top">
<i class="nz-icon nz-icon-replay tool__icon"></i> <i class="nz-icon nz-icon-replay tool__icon"></i>
@@ -87,6 +92,13 @@ export default {
methods: { methods: {
openUrl () { openUrl () {
window.open(this.chartInfo.param.link) window.open(this.chartInfo.param.link)
},
addChartGroup () {
this.$store.commit('setGroupId', this.chartInfo.id)
this.$store.dispatch('dispatchEditChart', {
chart: '',
type: 'addGroupItem'
})
} }
} }
} }

37
nezha-fronted/src/components/chart/chartList.vue
View File

@@ -48,6 +48,7 @@
:from="from" :from="from"
:time-range="timeRange" :time-range="timeRange"
:chart-detail-info="chartDetailInfo" :chart-detail-info="chartDetailInfo"
@refreshPanel="refreshPanel"
@showFullscreen="showFullscreen" @showFullscreen="showFullscreen"
></panel-chart> ></panel-chart>
</grid-item> </grid-item>
@@ -280,13 +281,15 @@ export default {
panelId: this.panelId, panelId: this.panelId,
charts: charts charts: charts
} }
this.$put('/visual/panel/chart/weights', params).then(() => { if (charts && charts.length) {
const position = getLayoutPosition(this.copyDataList) this.$put('/visual/panel/chart/weights', params).then(() => {
this.$store.commit('setChartLastPosition', position) const position = getLayoutPosition(this.copyDataList)
}) this.$store.commit('setChartLastPosition', position)
}, 300) })
}
}, 1000)
}, },
onScroll (scrollTop = 0) { onScroll (scrollTop = 0, groupTop = 0) {
const self = this const self = this
if (this.scrollTopTimer) { if (this.scrollTopTimer) {
clearTimeout(this.scrollTopTimer) clearTimeout(this.scrollTopTimer)
@@ -294,19 +297,25 @@ export default {
} }
this.scrollTopTimer = setTimeout(() => { this.scrollTopTimer = setTimeout(() => {
this.copyDataList.forEach(item => { this.copyDataList.forEach(item => {
if (item.loaded) { if (!this.$refs['grid-item' + item.id] || !this.$refs['grid-item' + item.id][0]) {
return return;
} }
const dom = this.$refs['grid-item' + item.id][0].$el const dom = this.$refs['grid-item' + item.id][0].$el
if (dom) { if (dom) {
let top = dom.style.top
top = Number(top.substring(0, top.length - 2)) + groupTop
if (item.type === 'group') {
this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.onScroll(scrollTop, top)
}
if (item.loaded) {
return
}
const itemHeight = dom.offsetHeight const itemHeight = dom.offsetHeight
// 1.元素距离页面顶部的距离 // 1.元素距离页面顶部的距离
// console.log(dom.style.transform) // console.log(dom.style.transform)
// let top = dom.style.transform.split(',')[1] // let top = dom.style.transform.split(',')[1]
// top = top.substring(0, top.length - 2) // top = top.substring(0, top.length - 2)
let top = dom.style.top
top = top.substring(0, top.length - 2)
const mainOffsetTop = top - this.stepWidth + 14// transform: grid组件 通过 tranfrom 控制位置 中间的为y的值 通过截取获得 - 父元素 marginTop的 值。 const mainOffsetTop = top - this.stepWidth + 14// transform: grid组件 通过 tranfrom 控制位置 中间的为y的值 通过截取获得 - 父元素 marginTop的 值。
// 2.元素的高度 // 2.元素的高度
const mainHeight = itemHeight // ele.offsetHeight;//itemHeight; const mainHeight = itemHeight // ele.offsetHeight;//itemHeight;
@@ -316,13 +325,16 @@ export default {
// 4.浏览器可见区域的高度 // 4.浏览器可见区域的高度
const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 70 const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 70
// console.log(this.$refs['chart' + item.id][0].$el.offsetHeight, scrollTop,'scrollTop',windowHeight,mainOffsetTop + mainHeight / 4,(windowScrollTop + windowHeight)) // console.log(this.$refs['chart' + item.id][0].$el.offsetHeight, scrollTop,'scrollTop',windowHeight,mainOffsetTop + mainHeight / 4,(windowScrollTop + windowHeight))
if ((mainOffsetTop + mainHeight / 4) < (windowScrollTop + windowHeight) || self.isGroup) { if ((mainOffsetTop + mainHeight / 4) < (windowScrollTop + windowHeight)) {
item.loaded = true item.loaded = true
this.$refs['chart' + item.id][0].getChartData() this.$refs['chart' + item.id][0].getChartData()
} }
} }
}) })
}, 200) }, 200)
},
refreshPanel () {
bus.$emit('refreshPanel')
} }
}, },
created () { created () {
@@ -335,9 +347,6 @@ export default {
this.$store.commit('setChartListId', `chartList${this.timestamp}`) this.$store.commit('setChartListId', `chartList${this.timestamp}`)
} }
}, },
beforeDestroy () {
this.$store.dispatch('dispatchPanelLock', { flag: true })
},
watch: { watch: {
dataList: { dataList: {
deep: true, deep: true,

4
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -163,7 +163,7 @@ export default {
}, },
selectMapping (value, valueMapping, show) { selectMapping (value, valueMapping, show) {
let mapping = '' let mapping = ''
if (show) { if (show && valueMapping) {
valueMapping.forEach(item => { valueMapping.forEach(item => {
if (item.type === 'value') { if (item.type === 'value') {
if (value == item.value) { if (value == item.value) {
@@ -263,7 +263,7 @@ export default {
chartData: { chartData: {
deep: true, deep: true,
handler (n) { handler (n) {
if (!this.isInit) { if (!this.isInit && this.chartOption.color) {
this.colorList = this.colorList.slice(0, 20) this.colorList = this.colorList.slice(0, 20)
this.chartOption.color = this.chartOption.color.slice(0, 20) this.chartOption.color = this.chartOption.color.slice(0, 20)
this.initChart(this.chartOption) this.initChart(this.chartOption)

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

@@ -14,6 +14,7 @@
@loadMore="loadMore" @loadMore="loadMore"
@edit-chart="$emit('edit-chart', chartInfo)" @edit-chart="$emit('edit-chart', chartInfo)"
@refresh="refresh" @refresh="refresh"
@sync="chartSync"
@groupShow="groupShow" @groupShow="groupShow"
@showFullscreen="showFullscreen" @showFullscreen="showFullscreen"
></chart-header> ></chart-header>
@@ -43,6 +44,7 @@
:panelLock="panelLock" :panelLock="panelLock"
:filter="filter" :filter="filter"
:from="from" :from="from"
@refreshLogs="refreshLogs"
:show-header="showHeader" :show-header="showHeader"
:isError="isError" :isError="isError"
:loading="loading" :loading="loading"
@@ -128,7 +130,7 @@ export default {
this.chartInfo.loaded && this.query(elements, startTime, endTime, step) this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
}, },
// 参数 isRefresh 标识是否是刷新操作 // 参数 isRefresh 标识是否是刷新操作
getChartData (isRefresh) { getChartData (isRefresh, params) {
this.loading = true this.loading = true
// TODO assetInfo、endpointInfo、echarts等进行不同的处理 // TODO assetInfo、endpointInfo、echarts等进行不同的处理
let startTime = '' let startTime = ''
@@ -152,9 +154,9 @@ export default {
startTime = this.$stringTimeParseToUnix(startTime) startTime = this.$stringTimeParseToUnix(startTime)
endTime = this.$stringTimeParseToUnix(endTime) endTime = this.$stringTimeParseToUnix(endTime)
const elements = this.chartInfo.elements || [] const elements = this.chartInfo.elements || []
this.chartInfo.loaded && this.query(elements, startTime, endTime, step) this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params)
}, },
query (elements, startTime, endTime, step) { query (elements, startTime, endTime, step, params) {
this.isError = false this.isError = false
this.allDataLength = 0 this.allDataLength = 0
try { try {
@@ -192,11 +194,18 @@ export default {
} }
if (this.chartInfo.datasource === 'logs') { if (this.chartInfo.datasource === 'logs') {
query += '&format=1' query += '&format=1'
if (!params || params.descending) {
this.chartInfo.descending = true
query += '&direction=backward'
} else {
this.chartInfo.descending = false
query += '&direction=forward'
}
} }
// if (isChartPie(this.chartInfo.type)) { // if (isChartPie(this.chartInfo.type)) {
// query += `&statistics=${this.chartInfo.param.statistics || 'last'}` // query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
// } // }
query += `&query=${element.expression}` query += `&query=${encodeURIComponent(element.expression)}`
return this.$get(query) return this.$get(query)
}) })
if (this.multipleTime) { if (this.multipleTime) {
@@ -217,7 +226,7 @@ export default {
// if (isChartPie(this.chartInfo.type)) { // if (isChartPie(this.chartInfo.type)) {
// query += `&statistics=${this.chartInfo.param.statistics || 'last'}` // query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
// } // }
query += `&query=${element.expression}` query += `&query=${encodeURIComponent(element.expression)}`
return this.$get(query) return this.$get(query)
}) })
requests = requests.concat(multipleRequests) requests = requests.concat(multipleRequests)
@@ -334,6 +343,7 @@ export default {
} }
if (this.chartInfo.type === 'group') { if (this.chartInfo.type === 'group') {
this.chartData = lodash.get(this, 'chartInfo.children', []) this.chartData = lodash.get(this, 'chartInfo.children', [])
this.loading = false
this.groupInit() this.groupInit()
} }
if (this.chartInfo.type === 'topology') { if (this.chartInfo.type === 'topology') {
@@ -346,7 +356,6 @@ export default {
} }
} }
} catch (e) { } catch (e) {
console.info(e)
this.loading = false this.loading = false
} }
}, },
@@ -382,6 +391,9 @@ export default {
refresh () { refresh () {
this.getChartData(true) this.getChartData(true)
}, },
refreshLogs (params) {
this.getChartData(true, params)
},
logChartDataFormat () { logChartDataFormat () {
this.chartData.forEach((item, index) => { this.chartData.forEach((item, index) => {
const elements = this.chartInfo.elements[index] const elements = this.chartInfo.elements[index]
@@ -439,6 +451,17 @@ export default {
}, },
saveChart () { saveChart () {
this.$emit('saveChart', this.chartInfo) this.$emit('saveChart', this.chartInfo)
},
chartSync () {
this.loading = true
this.$post('visual/panel/chart/syncTmpl', { ids: [this.chartInfo.id] }).then(res => {
if (res.code === 200) {
this.$message.success(this.$t('tip.syncSuccess'))
this.$emit('refreshPanel')
} else {
this.$message.error(res.msg)
}
})
} }
}, },
watch: { watch: {

3
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -77,7 +77,7 @@
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix" style="margin-top: 15px;"></Pagination> <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix" style="margin-top: 15px;"></Pagination>
</div> </div>
<!--全屏--> <!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" id="dialog-alert-massage" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenDialogClose" :modal-append-to-body="false"> <el-dialog class="nz-dialog table-chart-dialog" id="dialog-alert-massage viewGraphDialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenDialogClose" :modal-append-to-body="false">
<div slot="title"> <div slot="title">
<span class="nz-dialog-title">{{data.name}}</span> <span class="nz-dialog-title">{{data.name}}</span>
<div class="float-right panel-calendar dialog-tool"> <div class="float-right panel-calendar dialog-tool">
@@ -126,7 +126,6 @@
:visible.sync="graphShow" :visible.sync="graphShow"
width="90%" width="90%"
:append-to-body="true" :append-to-body="true"
id="viewGraphDialog"
@close="dialogClose" :modal-append-to-body="false"> @close="dialogClose" :modal-append-to-body="false">
<div slot="title"> <div slot="title">
{{$t("project.endpoint.dialogTitle")}} {{$t("project.endpoint.dialogTitle")}}

2
nezha-fronted/src/components/charts/chart-list-group.vue
View File

@@ -512,7 +512,7 @@ export default {
// this.getChartData(item, index, this.filter) // this.getChartData(item, index, this.filter)
this.setChartSize(item, index) this.setChartSize(item, index)
const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0]; const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
this.handleElementInViewport(chartBox, this.childrenScrollTop, item, index, true) this.handleElementInViewport(chartBox, this.childrenScrollTop, item, index, true)
}) })
}, },
loadChartData (scrollTop) { loadChartData (scrollTop) {

2
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -849,7 +849,7 @@ export default {
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) { if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
if (filterType === 'refresh') { if (filterType === 'refresh') {
this.$get('visual/panel/chart/' + chartItem.id).then(res => { this.$get('visual/panel/chart/' + chartItem.id).then(res => {
const data = res.data.data const data = res.data
data.param = JSON.parse(data.param) data.param = JSON.parse(data.param)
this.$refs['editChart' + chartItem.id][0].setData(data, null, this.$refs['editChart' + chartItem.id][0].setData(data, null,
this.filter.panelId, null, '') this.filter.panelId, null, '')

3
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -1796,6 +1796,9 @@ export default {
this.imgageLoading = true this.imgageLoading = true
this.$get('monitor/project/topo/icon').then((imageAllId) => { this.$get('monitor/project/topo/icon').then((imageAllId) => {
const promiseArr = [] const promiseArr = []
if (!imageAllId || !imageAllId.data) {
return
}
imgidList.forEach((item, index) => { imgidList.forEach((item, index) => {
if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) { if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`)) promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))

5
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -318,7 +318,7 @@ export default {
return { return {
alertLabelData: null, alertLabelData: null,
loading: true, loading: true,
heightList: 0, heightList: 0
} }
}, },
watch: { watch: {
@@ -452,6 +452,9 @@ export default {
} }
params[this.type + 'Id'] = this.id params[this.type + 'Id'] = this.id
this.$get('/stat/alertMessage/trend', params).then((res) => { this.$get('/stat/alertMessage/trend', params).then((res) => {
if (!res.data) {
return
}
const alertDaysData = res.data.result ? res.data.result[0].values : [] const alertDaysData = res.data.result ? res.data.result[0].values : []
const newWeekDays = JSON.parse(JSON.stringify(weekDays)) const newWeekDays = JSON.parse(JSON.stringify(weekDays))
alertDaysData.forEach(item => { alertDaysData.forEach(item => {

3
nezha-fronted/src/components/common/alert/alertLabel2.vue
View File

@@ -443,6 +443,9 @@ export default {
} }
params[this.type + 'Id'] = this.id params[this.type + 'Id'] = this.id
this.$get('/stat/alertMessage/trend', params).then((res) => { this.$get('/stat/alertMessage/trend', params).then((res) => {
if (!res.data) {
return
}
const alertDaysData = res.data.result ? res.data.result[0].values : [] const alertDaysData = res.data.result ? res.data.result[0].values : []
const newWeekDays = JSON.parse(JSON.stringify(weekDays)) const newWeekDays = JSON.parse(JSON.stringify(weekDays))
alertDaysData.forEach(item => { alertDaysData.forEach(item => {

3
nezha-fronted/src/components/common/alert/alertRuleInfo.vue
View File

@@ -157,6 +157,9 @@ export default {
} }
params['rule' + 'Id'] = this.id params['rule' + 'Id'] = this.id
this.$get('/stat/alertMessage/trend', params).then((res) => { this.$get('/stat/alertMessage/trend', params).then((res) => {
if (!res.data) {
return
}
const alertDaysData = res.data.result ? res.data.result[0].values : [] const alertDaysData = res.data.result ? res.data.result[0].values : []
const newWeekDays = JSON.parse(JSON.stringify(weekDays)) const newWeekDays = JSON.parse(JSON.stringify(weekDays))
alertDaysData.forEach(item => { alertDaysData.forEach(item => {

1
nezha-fronted/src/components/common/alert/nzTooltip.vue
View File

@@ -81,4 +81,3 @@ export default {
} }
} }
</script> </script>

2
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="sub-box bottom-box"> <div class="sub-box bottom-box" :style="{height: isFullScreen ? '100%' : ''}">
<div class="resize-modal"> <div class="resize-modal">
<div class="sub-list-resize-copy">一</div> <div class="sub-list-resize-copy">一</div>
</div> </div>

42
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
View File

@@ -16,15 +16,16 @@
> >
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template> <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
<template v-slot:top-tool-right> <template v-slot:top-tool-right>
<el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 100px"> <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 110px">
<el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option> <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
</el-select> </el-select>
<pick-time v-model="searchTimeHeader" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time> <pick-time v-model="searchTimeHeader" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
</template> </template>
<template v-slot> <template v-slot>
<alertMessageTable <alertMessageTable
ref="dataTable" ref="dataTable"
:api="url" :api="url"
:orderByFa="orderBy"
:loading="tools.loading" :loading="tools.loading"
:custom-table-title="tools.customTableTitle" :custom-table-title="tools.customTableTitle"
:height="subTableHeight" :height="subTableHeight"
@@ -155,6 +156,14 @@ export default {
this.getTableData() this.getTableData()
} }
} }
},
orderBy: {
immediate: true,
handler (n) {
if (n) {
// console.log(n)
}
}
} }
}, },
data () { data () {
@@ -230,7 +239,7 @@ export default {
sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'], sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
legend: [], legend: [],
searchTime: [], searchTime: [],
searchTimeHeader: [], searchTimeHeader: [bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 24 * 7)), bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))],
searchTimeSelect: bus.getTimezontDateRange(), searchTimeSelect: bus.getTimezontDateRange(),
currentMsg: {}, currentMsg: {},
chartUnit: 5, chartUnit: 5,
@@ -293,22 +302,24 @@ export default {
} }
if (this.orderBy) { if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy) this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
} }
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo) this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize) this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
this.$set(this.searchLabel, 'state', this.state) this.$set(this.searchLabel, 'state', this.state)
if (this.searchTimeHeader && this.searchTimeHeader.length > 1) { if (this.searchTimeHeader && this.searchTimeHeader.length > 1) {
this.$set(this.searchLabel, 'startAt', this.timezoneToUtcTimeStr(this.searchTimeHeader[0])) this.$set(this.searchLabel, 'startAt', bus.timeFormate(this.timezoneToUtcTime(bus.formateTimeToTime(this.searchTimeHeader[0])), 'YYYY-MM-DD HH:mm:ss'))
this.$set(this.searchLabel, 'endAt', this.timezoneToUtcTimeStr(this.searchTimeHeader[1])) this.$set(this.searchLabel, 'endAt', bus.timeFormate(this.timezoneToUtcTime(bus.formateTimeToTime(this.searchTimeHeader[1])), 'YYYY-MM-DD HH:mm:ss'))
} else { } else {
delete this.searchLabel.startAt delete this.searchLabel.startAt
delete this.searchLabel.endAt delete this.searchLabel.endAt
} }
this.tools.loading = true this.tools.loading = true
if (state) { // if (state) {
delete this.searchLabel.startAt // delete this.searchLabel.startAt
delete this.searchLabel.endAt // delete this.searchLabel.endAt
} // }
if (this.from === fromRoute.module) { if (this.from === fromRoute.module) {
this.searchLabel.moduleIds = this.obj.id this.searchLabel.moduleIds = this.obj.id
} else if (this.from === fromRoute.endpoint) { } else if (this.from === fromRoute.endpoint) {
@@ -327,6 +338,8 @@ export default {
this.tableData = response.data.list this.tableData = response.data.list
this.deleteBox.ids = '' this.deleteBox.ids = ''
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
} else {
this.$message.error(response.msg)
} }
}) })
}, },
@@ -401,6 +414,15 @@ export default {
this.currentMsg = { ...row, alertRule: { ...res.data } } this.currentMsg = { ...row, alertRule: { ...res.data } }
this.$nextTick(() => { this.$nextTick(() => {
this.searchTime = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())] this.searchTime = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
this.$store.dispatch('dispatchPanelTime', {
time: this.searchTime,
nowTimeType: {
id: 4,
text: this.$t('dashboard.panel.lastOneHour'),
type: 'hour',
value: 1
}
})
this.queryDate() this.queryDate()
}) })
}) })
@@ -597,7 +619,7 @@ export default {
color: '#d64f40' color: '#d64f40'
}] }]
} }
chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')
chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))) chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
chartInfo.unit = this.currentMsg.unit chartInfo.unit = this.currentMsg.unit
this.showFullscreen(true, chartInfo) this.showFullscreen(true, chartInfo)

5
nezha-fronted/src/components/common/bottomBox/tabs/alertRuleEvalLog.vue
View File

@@ -16,6 +16,7 @@
<template v-slot> <template v-slot>
<alertRuleEvalLogTable <alertRuleEvalLogTable
ref="dataTable" ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading" v-loading="tools.loading"
:loading="tools.loading" :loading="tools.loading"
:api="url" :api="url"
@@ -92,6 +93,8 @@ export default {
} }
if (this.orderBy) { if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy) this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
} }
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo) this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', -1) this.$set(this.searchLabel, 'pageSize', -1)
@@ -104,7 +107,7 @@ export default {
this.nowTime = this.utcTimeToTimezoneStr(response.time) this.nowTime = this.utcTimeToTimezoneStr(response.time)
if (response.code === 200) { if (response.code === 200) {
this.tableData = response.data this.tableData = response.data
if (!this.scrollbarWrap) { if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap) this.toTopBtnHandler(this.scrollbarWrap)

31
nezha-fronted/src/components/common/bottomBox/tabs/assetSubTab.vue
View File

@@ -18,6 +18,7 @@
<asset-table <asset-table
ref="dataTable" ref="dataTable"
:api="url" :api="url"
:orderByFa="'id'"
v-loading="tools.loading" v-loading="tools.loading"
:loading="tools.loading" :loading="tools.loading"
:custom-table-title="tools.customTableTitle" :custom-table-title="tools.customTableTitle"
@@ -121,7 +122,9 @@ export default {
typeData: [], typeData: [],
dcData: [], dcData: [],
snmpCredentialData: [], snmpCredentialData: [],
fieldGroupData: [] fieldGroupData: [],
needAlertDaysData: true,
trendKey: 'assetId'
} }
}, },
methods: { methods: {
@@ -223,6 +226,8 @@ export default {
} }
if (this.orderBy) { if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy) this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
} }
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo) this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize) this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -234,9 +239,31 @@ export default {
for (let i = 0; i < response.data.list.length; i++) { for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + '' response.data.list[i].status = response.data.list[i].status + ''
} }
if (this.needAlertDaysData) {
response.data.list.forEach(item => {
item.trendLoading = true
item.left = 0
item.top = 0
item.alertNumtooltipShow = false
item.alertDaysData = [
{
metric: { priority: 'P1' },
values: [[0, 0]]
},
{
metric: { priority: 'P2' },
values: [[0, 0]]
},
{
metric: { priority: 'P3' },
values: [[0, 0]]
}
]
})
}
this.tableData = response.data.list this.tableData = response.data.list
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
if (!this.scrollbarWrap) { if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap) this.toTopBtnHandler(this.scrollbarWrap)

8
nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
View File

@@ -18,6 +18,7 @@
<asset-table <asset-table
ref="dataTable" ref="dataTable"
:api="url" :api="url"
:orderByFa="'id'"
v-loading="tools.loading" v-loading="tools.loading"
:loading="tools.loading" :loading="tools.loading"
:custom-table-title="tools.customTableTitle" :custom-table-title="tools.customTableTitle"
@@ -226,6 +227,8 @@ export default {
} }
if (this.orderBy) { if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy) this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
} }
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo) this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize) this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -244,6 +247,9 @@ export default {
if (this.needAlertDaysData) { if (this.needAlertDaysData) {
response.data.list.forEach(item => { response.data.list.forEach(item => {
item.trendLoading = true item.trendLoading = true
item.left = 0
item.top = 0
item.alertNumtooltipShow = false
item.alertDaysData = [ item.alertDaysData = [
{ {
metric: { priority: 'P1' }, metric: { priority: 'P1' },
@@ -262,7 +268,7 @@ export default {
} }
this.tableData = response.data.list this.tableData = response.data.list
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
if (!this.scrollbarWrap) { if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap) this.toTopBtnHandler(this.scrollbarWrap)

8
nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
View File

@@ -18,6 +18,7 @@
<template v-slot> <template v-slot>
<cabinet-table <cabinet-table
ref="dataTable" ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading" v-loading="tools.loading"
:loading="tools.loading" :loading="tools.loading"
:api="url" :api="url"
@@ -135,6 +136,8 @@ export default {
} }
if (this.orderBy) { if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy) this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
} }
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo) this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize) this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -151,6 +154,9 @@ export default {
if (this.needAlertDaysData) { if (this.needAlertDaysData) {
response.data.list.forEach(item => { response.data.list.forEach(item => {
item.trendLoading = true item.trendLoading = true
item.left = 0
item.top = 0
item.alertNumtooltipShow = false
item.alertDaysData = [ item.alertDaysData = [
{ {
metric: { priority: 'P1' }, metric: { priority: 'P1' },
@@ -169,7 +175,7 @@ export default {
} }
this.tableData = response.data.list this.tableData = response.data.list
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
if (!this.scrollbarWrap) { if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap) this.toTopBtnHandler(this.scrollbarWrap)

3
nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
View File

@@ -56,6 +56,7 @@
<template v-slot> <template v-slot>
<endpointQueryTab <endpointQueryTab
ref="endpointQueryTab" ref="endpointQueryTab"
:orderByFa="'id'"
:from="from" :from="from"
:obj="obj" :obj="obj"
:formatTime="formatTime" :formatTime="formatTime"
@@ -128,7 +129,7 @@ export default {
dropdownShow: false, dropdownShow: false,
timeout: null, timeout: null,
formatTime: '', formatTime: '',
hideSameLabels: true, hideSameLabels: true
} }
}, },
methods: { methods: {

3
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -111,7 +111,6 @@
:visible.sync="graphShow" :visible.sync="graphShow"
width="90%" width="90%"
:modal-append-to-body="false" :modal-append-to-body="false"
id="viewGraphDialog"
@close="dialogClose"> @close="dialogClose">
<div slot="title"> <div slot="title">
{{$t("project.endpoint.dialogTitle")}} {{$t("project.endpoint.dialogTitle")}}
@@ -176,7 +175,7 @@ export default {
plTableSHow: true, plTableSHow: true,
scrollTop: 0, scrollTop: 0,
scrollbarWrap: null, scrollbarWrap: null,
minusTime: 0, minusTime: 0
} }
}, },
methods: { methods: {

8
nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
View File

@@ -17,6 +17,7 @@
<template v-slot> <template v-slot>
<endpoint-table <endpoint-table
ref="dataTable" ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading" v-loading="tools.loading"
:loading="tools.loading" :loading="tools.loading"
:api="url" :api="url"
@@ -119,6 +120,8 @@ export default {
getTableData () { getTableData () {
if (this.orderBy) { if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy) this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
} }
const params = { const params = {
...this.searchLabel, ...this.searchLabel,
@@ -141,6 +144,9 @@ export default {
if (this.needAlertDaysData) { if (this.needAlertDaysData) {
response.data.list.forEach(item => { response.data.list.forEach(item => {
item.trendLoading = true item.trendLoading = true
item.left = 0
item.top = 0
item.alertNumtooltipShow = false
item.alertDaysData = [ item.alertDaysData = [
{ {
metric: { priority: 'P1' }, metric: { priority: 'P1' },
@@ -160,7 +166,7 @@ export default {
this.tableData = response.data.list this.tableData = response.data.list
this.nowTime = this.utcTimeToTimezoneStr(response.time) this.nowTime = this.utcTimeToTimezoneStr(response.time)
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
if (!this.scrollbarWrap) { if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap) this.toTopBtnHandler(this.scrollbarWrap)

4
nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
View File

@@ -58,8 +58,8 @@ export default {
return { return {
logData: null, logData: null,
filterTime: [ filterTime: [
bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss'), bus.timeFormate(bus.getOffsetTimezoneData(-1), this.timeFormatMain),
bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss') bus.timeFormate(bus.getOffsetTimezoneData(), this.timeFormatMain)
], ],
expressions: [''], expressions: [''],
matchSymbol: '|=', matchSymbol: '|=',

5
nezha-fronted/src/components/common/bottomBox/tabs/operationLogTab.vue
View File

@@ -15,6 +15,7 @@
<template v-slot> <template v-slot>
<operation-log-table <operation-log-table
ref="dataTable" ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading" v-loading="tools.loading"
:loading="tools.loading" :loading="tools.loading"
:api="url" :api="url"
@@ -125,6 +126,8 @@ export default {
} }
if (this.orderBy) { if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy) this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
} }
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo) this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize) this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -140,7 +143,7 @@ export default {
} }
this.tableData = response.data.list this.tableData = response.data.list
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
if (!this.scrollbarWrap) { if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap) this.toTopBtnHandler(this.scrollbarWrap)

16
nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
View File

@@ -102,6 +102,7 @@
@on-refresh-time="refreshTime" @on-refresh-time="refreshTime"
@on-remove-chart="delChart" @on-remove-chart="delChart"
@on-add-group-item-chart="addGroupItem" @on-add-group-item-chart="addGroupItem"
@refreshPanel="refreshPanel"
:loading="chartListLoading" :loading="chartListLoading"
:chart-detail-info="chartDetailInfo" :chart-detail-info="chartDetailInfo"
></chart-list> ></chart-list>
@@ -274,6 +275,9 @@ export default {
refresh () { refresh () {
this.getTableData(this.obj.id) this.getTableData(this.obj.id)
}, },
refreshPanel () {
this.getData(this.filter)
},
refreshTime (st, et) { refreshTime (st, et) {
const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm') const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm') const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
@@ -377,7 +381,7 @@ export default {
this.$get('visual/panel/chart/' + data.id).then(res => { this.$get('visual/panel/chart/' + data.id).then(res => {
this.rightBox.loading = false this.rightBox.loading = false
if (res.code === 200) { if (res.code === 200) {
const chartData = res.data.data const chartData = res.data
this.chart = JSON.parse(JSON.stringify(chartData)) this.chart = JSON.parse(JSON.stringify(chartData))
this.chart.panelId = this.showPanel.id this.chart.panelId = this.showPanel.id
this.chart.panelName = this.showPanel.name this.chart.panelName = this.showPanel.name
@@ -682,7 +686,13 @@ export default {
}, },
chartBySync () { chartBySync () {
this.panelTabLoading = true this.panelTabLoading = true
this.$post('visual/panel/chart/syncTmpl', { panelId: this.showPanel.id }).then(res => { const params = {}
if (this.from === 'chartTemp') {
params.pid = this.obj.id
} else {
params.panelId = this.showPanel.id
}
this.$post('visual/panel/chart/syncTmpl', params).then(res => {
this.panelTabLoading = false this.panelTabLoading = false
if (res.code === 200) { if (res.code === 200) {
this.getTableData(this.obj.id) this.getTableData(this.obj.id)
@@ -714,6 +724,7 @@ export default {
} }
}, },
mounted () { mounted () {
bus.$on('refreshPanel', this.refreshPanel)
this.scrollbarWrap = this.$refs.dashboardScrollbar this.scrollbarWrap = this.$refs.dashboardScrollbar
this.onScroll() this.onScroll()
document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter) document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
@@ -767,6 +778,7 @@ export default {
document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter) document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave) document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
this.scrollbarWrap && this.scrollbarWrap.removeEventListener('scroll', bus.debounce) this.scrollbarWrap && this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
this.$store.dispatch('dispatchPanelLock', { flag: true })
} }
} }
</script> </script>

1
nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
View File

@@ -24,6 +24,7 @@
<template v-slot> <template v-slot>
<scrape-endpoint-table <scrape-endpoint-table
ref="dataTable" ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading" v-loading="tools.loading"
:loading="tools.loading" :loading="tools.loading"
:api="url" :api="url"

5
nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue
View File

@@ -15,6 +15,7 @@
<template v-slot> <template v-slot>
<terminal-log-table <terminal-log-table
ref="dataTable" ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading" v-loading="tools.loading"
:loading="tools.loading" :loading="tools.loading"
:api="url" :api="url"
@@ -129,6 +130,8 @@ export default {
} }
if (this.orderBy) { if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy) this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
} }
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo) this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize) this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -144,7 +147,7 @@ export default {
} }
this.tableData = response.data.list this.tableData = response.data.list
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
if (!this.scrollbarWrap) { if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap) this.toTopBtnHandler(this.scrollbarWrap)

4
nezha-fronted/src/components/common/detailView/nzDetailView.vue
View File

@@ -33,13 +33,13 @@
<!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>--> <!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
</div> </div>
<div :style="{ height: nzTableHeight }" class="nz-detail-view" :class="dataLength?'':'nz-detail-view-no-data'"> <div :style="{ height: nzTableHeight }" class="nz-detail-view" :class="dataLength?'':'nz-detail-view-no-data'">
<div class="nz-detail-view-left" v-if="dataLength"> <div class="nz-detail-view-left" v-show="dataLength">
<slot name="nz-detail-view-list"></slot> <slot name="nz-detail-view-list"></slot>
<div v-if="showLayout.indexOf('pagination') > -1" class="nz-detail-view-pagination"> <div v-if="showLayout.indexOf('pagination') > -1" class="nz-detail-view-pagination">
<slot name="pagination"></slot> <slot name="pagination"></slot>
</div> </div>
</div> </div>
<div v-else class="no-data"> <div v-if="!dataLength" class="no-data">
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use> <use xlink:href="#nz-icon-no-data-list"></use>
</svg> </svg>

2
nezha-fronted/src/components/common/filterSearch/filterSearch.vue
View File

@@ -118,7 +118,7 @@ export default {
this.metaList.push(meta) this.metaList.push(meta)
this.$emit('metaList') this.$emit('metaList')
} else { } else {
let self = this const self = this
const newCondition = Object.assign({}, self.meta) const newCondition = Object.assign({}, self.meta)
newCondition.nameIsEditing = true newCondition.nameIsEditing = true
this.metaList.push(newCondition) this.metaList.push(newCondition)

5
nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
View File

@@ -406,6 +406,9 @@ export default {
} }
params[trendKey] = this.obj.id params[trendKey] = this.obj.id
this.$get('/stat/alertMessage/trend', params).then((res) => { this.$get('/stat/alertMessage/trend', params).then((res) => {
if (!res.data) {
return
}
const alertDaysData = res.data.result ? res.data.result[0].values : [] const alertDaysData = res.data.result ? res.data.result[0].values : []
const newWeekDays = JSON.parse(JSON.stringify(weekDays)) const newWeekDays = JSON.parse(JSON.stringify(weekDays))
alertDaysData.forEach(item => { alertDaysData.forEach(item => {
@@ -552,7 +555,7 @@ export default {
arr.unshift(obj) arr.unshift(obj)
} }
return arr return arr
}, }
} }
} }
</script> </script>

3
nezha-fronted/src/components/common/js/constants.js
View File

@@ -202,6 +202,7 @@ export const alertMessage = {
{ value: 'P3', label: i18n.t('alert.config.P3') } { value: 'P3', label: i18n.t('alert.config.P3') }
], ],
states: [ states: [
{ value: '', label: i18n.t('overall.all') },
{ value: '1', label: i18n.t('overall.active') }, { value: '1', label: i18n.t('overall.active') },
{ value: '2', label: i18n.t('overall.silence') }, { value: '2', label: i18n.t('overall.silence') },
{ value: '3', label: i18n.t('alert.list.expired') } { value: '3', label: i18n.t('alert.list.expired') }
@@ -395,7 +396,7 @@ export const chartType = {
bar: 'bar', bar: 'bar',
table: 'table', table: 'table',
stat: 'stat', stat: 'stat',
guage: 'guage', gauge: 'gauge',
pie: 'pie', pie: 'pie',
treemap: 'treemap', treemap: 'treemap',
log: 'log', log: 'log',

2
nezha-fronted/src/components/common/js/validate.js
View File

@@ -77,7 +77,7 @@ export function nzNumber (rule, value, callback) {
export function noSpecialChar (rule, value, callback) { export function noSpecialChar (rule, value, callback) {
// eslint-disable-next-line no-control-regex // eslint-disable-next-line no-control-regex
const charReg = /^\w[\u0000-\uFFFF]*$/ const charReg = /^\S[\u0000-\uFFFF]*$/
/// ^\S[\u0000-\uFFFF]*$/ /// ^\S[\u0000-\uFFFF]*$/
setTimeout(() => { setTimeout(() => {
if (!value) { if (!value) {

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

@@ -31,7 +31,7 @@
<!-- <div v-if="!license.valid" class="license-info">INSTALLATION ID:&nbsp;{{license.token}}</div>--> <!-- <div v-if="!license.valid" class="license-info">INSTALLATION ID:&nbsp;{{license.token}}</div>-->
<div v-if="!license.valid" class="license-upload"> <div v-if="!license.valid" class="license-upload">
<!-- <button type="button" class="login-btn" @click="downloadMib"><span style="margin-right: 5px"><i class="nz-icon nz-icon-download1"></i></span>{{$t('license.dowLicense')}}</button>--> <!-- <button type="button" class="login-btn" @click="downloadMib"><span style="margin-right: 5px"><i class="nz-icon nz-icon-download1"></i></span>{{$t('license.dowLicense')}}</button>-->
<button type="button" class="login-btn download-btn" @click="downloadLogin"><span style="margin-right: 5px"><i class="nz-icon nz-icon-download1"></i></span>{{$t('login.download')}}</button> <button type="button" class="login-btn download-btn" @click="downloadLogin"><span style="margin-right: 5px"><i class="nz-icon nz-icon-download1"></i></span>{{$t('license.downloadID')}}</button>
</div> </div>
<div class="license-upload" v-if="!license.valid"> <div class="license-upload" v-if="!license.valid">
<el-upload <el-upload
@@ -270,13 +270,17 @@ export default {
}, },
downloadLogin () { downloadLogin () {
this.$get('/sys/license/token').then(res => { this.$get('/sys/license/token').then(res => {
const fileName = 'Login' + '-' + this.getTimeString() + '.xml' let fileName = this.licenseList.id + '-' + this.getTimeString() + '.xml'
const resFileName = res.headers['content-disposition'].split('=')[1]
if (resFileName) {
fileName = resFileName
}
if (window.navigator.msSaveOrOpenBlob) { if (window.navigator.msSaveOrOpenBlob) {
// 兼容ie11 // 兼容ie11
const blobObject = new Blob([res]) const blobObject = new Blob([res.data])
window.navigator.msSaveOrOpenBlob(blobObject, fileName) window.navigator.msSaveOrOpenBlob(blobObject, fileName)
} else { } else {
const url = URL.createObjectURL(new Blob([res])) const url = URL.createObjectURL(new Blob([res.data]))
const a = document.createElement('a') const a = document.createElement('a')
document.body.appendChild(a) // 此处增加了将创建的添加到body当中 document.body.appendChild(a) // 此处增加了将创建的添加到body当中
a.href = url a.href = url

52
nezha-fronted/src/components/common/mixin/alertLabelMixin.js Normal file
View File

@@ -0,0 +1,52 @@
export default {
data () {
return {
alertLabelShow: false,
alertLabelId: '',
alertLabelObj: {},
alertLabelType: ''
}
},
methods: {
// label 鼠标划入
labelHover (item, type, loading, isUseType = true, e) {
if (this.labelToolTipDis(type)) {
return
}
if (isUseType) {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item[type], 'position', position)
this.alertLabelId = item[type].id
this.alertLabelObj = item[type]
this.alertLabelType = type
}
this.$set(item[type], 'loading', loading)
} else {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item, 'position', position)
this.alertLabelId = item.id
this.alertLabelObj = item
this.alertLabelType = type
}
this.$set(item, 'loading', loading)
}
this.alertLabelShow = loading
},
// label tooltip是否显示
labelToolTipDis (labelType) {
switch (labelType) {
case 'asset':
case 'module':
case 'endpoint':
case 'project':
case 'dc':
return false
default: return true
}
}
}
}

30
nezha-fronted/src/components/common/mixin/dataList.js
View File

@@ -23,7 +23,7 @@ export default {
pages: 1, pages: 1,
total: 0 total: 0
}, },
orderBy: '', orderBy: 'id',
/* 工具参数 */ /* 工具参数 */
tools: { tools: {
loading: true, // 是否显示table加载动画 loading: true, // 是否显示table加载动画
@@ -105,6 +105,9 @@ export default {
if (this.needAlertDaysData) { if (this.needAlertDaysData) {
response.data.list.forEach(item => { response.data.list.forEach(item => {
item.trendLoading = true item.trendLoading = true
item.left = 0
item.top = 0
item.alertNumtooltipShow = false
item.alertDaysData = [ item.alertDaysData = [
{ {
metric: { priority: 'P1' }, metric: { priority: 'P1' },
@@ -132,7 +135,7 @@ export default {
this.detailViewRightObj = detailViewRightObj this.detailViewRightObj = detailViewRightObj
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
this.pageObj.pages = response.data.pages this.pageObj.pages = response.data.pages
if (!this.scrollbarWrap && this.$refs.dataTable.$refs.dataTable) { if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap) this.toTopBtnHandler(this.scrollbarWrap)
@@ -214,7 +217,9 @@ export default {
}, },
dragend () { dragend () {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.dataTable.$refs.dataTable && this.$refs.dataTable.$refs.dataTable.doLayout() if (this.$refs.dataTable) {
this.$refs.dataTable.$refs.dataTable && this.$refs.dataTable.$refs.dataTable.doLayout()
}
}) })
}, },
search (searchObj) { search (searchObj) {
@@ -332,6 +337,9 @@ export default {
}, },
created () { created () {
const path = this.$route.fullPath.match(/\/(\S*)\?/)[1] const path = this.$route.fullPath.match(/\/(\S*)\?/)[1]
if (this.$route.query.orderBy && !this.isSubList) {
this.orderBy = this.$route.query.orderBy
}
let searchKeys = {} let searchKeys = {}
if (path === 'dc') { if (path === 'dc') {
searchKeys = { searchKeys = {
@@ -969,14 +977,18 @@ export default {
if (pageSize && pageSize !== 'undefined') { if (pageSize && pageSize !== 'undefined') {
this.pageObj.pageSize = pageSize this.pageObj.pageSize = pageSize
} }
if (!this.$refs.dataTable && !this.$refs.dataDetail) {
return
}
const tableTitle = this.$refs.dataTable ? this.$refs.dataTable.tableTitle : this.$refs.dataDetail.tableTitle
let localStorageTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId) let localStorageTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : this.$refs.dataTable.tableTitle localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : tableTitle
this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题 this.tools.customTableTitle = tableTitle.map((item, index) => { // 修复切换中英文的问题
item.show = localStorageTableTitle[index].show item.show = localStorageTableTitle[index].show
return item return item
}) })
if (localStorageTableTitle && (localStorageTableTitle.length > this.$refs.dataTable.tableTitle.length)) { if (localStorageTableTitle && (localStorageTableTitle.length > tableTitle.length)) {
const arr = localStorageTableTitle.splice(this.$refs.dataTable.tableTitle.length, localStorageTableTitle.length) const arr = localStorageTableTitle.splice(tableTitle.length, localStorageTableTitle.length)
arr.forEach(item => { arr.forEach(item => {
item.minWidth = item.label.length * 16 + 20 item.minWidth = item.label.length * 16 + 20
}) })
@@ -985,7 +997,9 @@ export default {
if (!this.fromBottom) { if (!this.fromBottom) {
this.getTableData() this.getTableData()
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.dataTable.$refs.dataTable && this.$refs.dataTable.$refs.dataTable.doLayout() if (this.$refs.dataTable) {
this.$refs.dataTable.$refs.dataTable && this.$refs.dataTable.$refs.dataTable.doLayout()
}
}) })
} }
}, },

16
nezha-fronted/src/components/common/mixin/detailViewMixin.js
View File

@@ -2,7 +2,7 @@ export default {
props: {}, props: {},
data () { data () {
return { return {
detailType: 'list', detailType: localStorage.getItem('detail-view-' + this.tableId) || 'list',
detailViewRightObj: '', detailViewRightObj: '',
detailViewLoading: false, detailViewLoading: false,
detailTimer: '' detailTimer: ''
@@ -16,10 +16,10 @@ export default {
if (this.detailType === flag) { if (this.detailType === flag) {
return return
} }
this.$refs.dataList.bottomBox.showSubList = false // this.$refs.dataList.bottomBox.showSubList = false
if (this.orderBy) { // if (this.orderBy) {
this.detailViewRightObj = '' // this.detailViewRightObj = ''
} // }
this.detailType = flag this.detailType = flag
let dataList = '' let dataList = ''
localStorage.setItem('detail-view-' + this.tableId, this.detailType) localStorage.setItem('detail-view-' + this.tableId, this.detailType)
@@ -66,7 +66,7 @@ export default {
this.$refs[dataList].$refs.searchInput.searchLabelList = this.$refs.dataList.$refs.searchInput.searchLabelList.filter(item => searchLabel.label !== item.label) this.$refs[dataList].$refs.searchInput.searchLabelList = this.$refs.dataList.$refs.searchInput.searchLabelList.filter(item => searchLabel.label !== item.label)
} }
}) })
if (this.orderBy && this.$refs.dataTable.$refs.dataTable) { if (this.orderBy) {
const index = this.orderBy.indexOf('-') const index = this.orderBy.indexOf('-')
let orderBy = '' let orderBy = ''
let orderType = '' let orderType = ''
@@ -78,7 +78,9 @@ export default {
orderBy = this.orderBy orderBy = this.orderBy
orderType = 'ascending' orderType = 'ascending'
} }
this.$refs.dataTable.$refs.dataTable.sort(orderBy, orderType) if (this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$refs.dataTable.$refs.dataTable.sort(orderBy, orderType)
}
} }
}, 100) }, 100)
}, },

5
nezha-fronted/src/components/common/mixin/subDataList.js
View File

@@ -5,11 +5,12 @@ export default {
type: Array type: Array
}, },
targetTab: String, targetTab: String,
from: String from: String,
}, },
data () { data () {
return { return {
subTableHeight: this.$tableHeight.openSubList.subList subTableHeight: this.$tableHeight.openSubList.subList,
isSubList: true
} }
}, },
methods: { methods: {

1
nezha-fronted/src/components/common/mixin/system/systemMixin.js
View File

@@ -77,6 +77,7 @@ export default {
localStorage.setItem('nz-sys-timezone', param.timezone) localStorage.setItem('nz-sys-timezone', param.timezone)
localStorage.setItem('timezoneOffset', moment.tz(param.timezone).format('Z')) localStorage.setItem('timezoneOffset', moment.tz(param.timezone).format('Z'))
localStorage.setItem('nz-default-dateFormat', param.date_format) localStorage.setItem('nz-default-dateFormat', param.date_format)
this.$store.commit('setTimeFormatMain', param.date_format)
} }
this.dateFormatTimer() this.dateFormatTimer()
setTimeout(() => { setTimeout(() => {

36
nezha-fronted/src/components/common/mixin/table.js
View File

@@ -26,7 +26,7 @@ export default {
data () { data () {
return { return {
operationWidth: '165', // 操作列宽 operationWidth: '165', // 操作列宽
orderBy: {}, orderBy: null,
severityDataWeight: this.$store.getters.severityDataWeight severityDataWeight: this.$store.getters.severityDataWeight
} }
}, },
@@ -131,10 +131,11 @@ export default {
if (n) { if (n) {
const index = n.indexOf('-') const index = n.indexOf('-')
if (index !== -1) { if (index !== -1) {
this.orderBy[n.slice(index + 1)] = 'descending' this.orderBy = { prop: n.slice(index + 1), order: 'descending' }
} else { } else {
this.orderBy[n] = 'descending' this.orderBy = { prop: n, order: 'ascending' }
} }
// this.orderBy = JSON.parse(JSON.stringify(this.orderBy))
} }
} }
}, },
@@ -162,32 +163,9 @@ export default {
params[this.trendKey] = item.id params[this.trendKey] = item.id
setTimeout(() => { setTimeout(() => {
this.$get('/stat/alertMessage/trend', params).then((res) => { this.$get('/stat/alertMessage/trend', params).then((res) => {
// res = { if (!res.data) {
// msg: 'success', return
// code: 200, }
// data: {
// result: [
// {
// values: [
// {
// metric: { priority: 'P1' },
// values: []
// }, {
// metric: { priority: 'P2' },
// values: [
// [1645142400000, 0], [1645228800000, 3], [1645315200000, 20], [1645401600000, 0], [1645488000000, 0], [1645574400000, 3], [1645660800000, 20]
// ]
// }, {
// metric: { priority: 'P3' },
// values: [
// [1645142400000, 1], [1645228800000, 3], [1645315200000, 20], [1645401600000, 0], [1645488000000, 0], [1645574400000, 3], [1645660800000, 20]
// ]
// }]
// }],
// resultType: 'matrix'
// },
// time: '2022-02-24 08:41:35'
// }
const alertDaysData = res.data.result ? res.data.result[0].values : [] const alertDaysData = res.data.result ? res.data.result[0].values : []
const newWeekDays = JSON.parse(JSON.stringify(weekDays)) const newWeekDays = JSON.parse(JSON.stringify(weekDays))
alertDaysData.forEach(item => { alertDaysData.forEach(item => {

2
nezha-fronted/src/components/common/popBox/guide.vue
View File

@@ -101,7 +101,7 @@ export default {
}, },
{ {
route: '/monitor/project', route: '/monitor/project',
title: this.$t('guide.monitor'), title: this.$t('overall.monitor'),
icon: 'nz-icon nz-icon-menu-project', icon: 'nz-icon nz-icon-menu-project',
tip: this.$t('guide.monitorTip'), tip: this.$t('guide.monitorTip'),
permissionCode: 'project_view' permissionCode: 'project_view'

3
nezha-fronted/src/components/common/project/popData/assetTable.vue
View File

@@ -170,6 +170,9 @@ export default {
if (this.needAlertDaysData) { if (this.needAlertDaysData) {
response.data.list.forEach(item => { response.data.list.forEach(item => {
item.trendLoading = true item.trendLoading = true
item.left = 0
item.top = 0
item.alertNumtooltipShow = false
item.alertDaysData = [ item.alertDaysData = [
{ {
metric: { priority: 'P1' }, metric: { priority: 'P1' },

3
nezha-fronted/src/components/common/project/popData/endpointTable.vue
View File

@@ -176,6 +176,9 @@ export default {
if (this.needAlertDaysData) { if (this.needAlertDaysData) {
response.data.list.forEach(item => { response.data.list.forEach(item => {
item.trendLoading = true item.trendLoading = true
item.left = 0
item.top = 0
item.alertNumtooltipShow = false
item.alertDaysData = [ item.alertDaysData = [
{ {
metric: { priority: 'P1' }, metric: { priority: 'P1' },

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

@@ -798,6 +798,9 @@ export default {
resolve(this.topoPrevDataS) resolve(this.topoPrevDataS)
} }
this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => { this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
if (!res.data) {
return
}
let data = res.data.topo let data = res.data.topo
if (!res.data.topo || !res.data.topo.pens.length) { if (!res.data.topo || !res.data.topo.pens.length) {
this.showNoData = true this.showNoData = true
@@ -1772,6 +1775,9 @@ export default {
this.imgageLoading = true this.imgageLoading = true
this.$get('monitor/project/topo/icon').then((imageAllId) => { this.$get('monitor/project/topo/icon').then((imageAllId) => {
const promiseArr = [] const promiseArr = []
if (!imageAllId || !imageAllId.data) {
return
}
imgidList.forEach((item, index) => { imgidList.forEach((item, index) => {
if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) { if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`)) promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))

2
nezha-fronted/src/components/common/rightBox/administration/roleBox.vue
View File

@@ -23,7 +23,7 @@
<button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button> <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
<button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button> <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
</div>--> </div>-->
<el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}" :default-checked-keys="[2]" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus"> <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}" :default-checked-keys="[312]" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
<div slot-scope="{ node, data }"> <div slot-scope="{ node, data }">
<span> <span>
<i v-if="data.type == '1'" class="el-icon-menu"></i> <i v-if="data.type == '1'" class="el-icon-menu"></i>

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

@@ -737,8 +737,8 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label') name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
}, },
{ {
id: 'guage', id: 'gauge',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label') name: this.$t('dashboard.panel.chartForm.typeVal.gauge.label')
}, },
{ {
id: 'treemap', id: 'treemap',
@@ -809,8 +809,8 @@ export default {
break break
case 'stat': case 'stat':
case 'hexagon': case 'hexagon':
case 'guage': case 'gauge':
if (this.oldType === 'stat' || this.oldType === 'guage' || this.oldType === 'hexagon') { if (this.oldType === 'stat' || this.oldType === 'gauge' || this.oldType === 'hexagon') {
break break
} }
this.chartConfig.param = { this.chartConfig.param = {

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

@@ -218,7 +218,7 @@ export default {
if (!params.groupId) { if (!params.groupId) {
params.groupId = 0 params.groupId = 0
} }
if (params.type !== 'guage') { if (params.type !== 'gauge') {
delete params.param.min delete params.param.min
delete params.param.max delete params.param.max
} }
@@ -445,7 +445,14 @@ export default {
deep: true, deep: true,
immediate: true, immediate: true,
handler (n) { handler (n) {
this.editChart = JSON.parse(JSON.stringify(n)) const obj = JSON.parse(JSON.stringify(n))
if (obj.param && !obj.param.valueMapping) {
obj.param.valueMapping = []
}
if (obj.param && !obj.param.thresholds) {
obj.param.thresholds = []
}
this.editChart = obj
if (this.editChart.groupId === -1) { if (this.editChart.groupId === -1) {
this.editChart.groupId = '' this.editChart.groupId = ''
} }

12
nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
View File

@@ -53,7 +53,7 @@ export default {
case 'hexagon': case 'hexagon':
case 'bar': case 'bar':
case 'treemap': case 'treemap':
case 'guage': case 'gauge':
case 'pie': case 'pie':
return false return false
default: return false default: return false
@@ -70,7 +70,7 @@ export default {
case 'hexagon': case 'hexagon':
case 'bar': case 'bar':
case 'treemap': case 'treemap':
case 'guage': case 'gauge':
case 'pie': case 'pie':
return true return true
default: return false default: return false
@@ -88,7 +88,7 @@ export default {
case 'table': case 'table':
case 'stat': case 'stat':
case 'hexagon': case 'hexagon':
case 'guage': case 'gauge':
return false return false
default: return false default: return false
} }
@@ -112,7 +112,7 @@ export default {
case 'stat': case 'stat':
case 'hexagon': case 'hexagon':
case 'bar': case 'bar':
case 'guage': case 'gauge':
case 'treemap': case 'treemap':
case 'pie': case 'pie':
return true return true
@@ -127,7 +127,7 @@ export default {
case 'pie': case 'pie':
case 'stat': case 'stat':
case 'hexagon': case 'hexagon':
case 'guage': case 'gauge':
return false return false
case 'line': case 'line':
case 'area': case 'area':
@@ -144,7 +144,7 @@ export default {
case 'pie': case 'pie':
case 'stat': case 'stat':
case 'hexagon': case 'hexagon':
case 'guage': case 'gauge':
return true return true
case 'line': case 'line':
case 'area': case 'area':

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

@@ -90,8 +90,8 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label') name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
}, },
{ {
id: 'guage', id: 'gauge',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label') name: this.$t('dashboard.panel.chartForm.typeVal.gauge.label')
}, },
{ {
id: 'treemap', id: 'treemap',
@@ -133,8 +133,8 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label') name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
}, },
{ {
id: 'guage', id: 'gauge',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label') name: this.$t('dashboard.panel.chartForm.typeVal.gauge.label')
}, },
{ {
id: 'treemap', id: 'treemap',
@@ -422,11 +422,11 @@ export default {
enableChange (type) { enableChange (type) {
switch (type) { switch (type) {
case 'valueMapping': case 'valueMapping':
break; break
case 'legend': case 'legend':
break; break
case '': case '':
break; break
} }
this.change() this.change()
} }

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

@@ -635,8 +635,8 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.pie.label') name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
}, },
{ {
id: 'guage', id: 'gauge',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label') name: this.$t('dashboard.panel.chartForm.typeVal.gauge.label')
}, },
{ {
id: 'treemap', id: 'treemap',
@@ -698,8 +698,8 @@ export default {
switch (type) { switch (type) {
case 'stat': case 'stat':
case 'hexagon': case 'hexagon':
case 'guage': case 'gauge':
if (this.oldType === 'stat' || this.oldType === 'guage' || this.oldType === 'hexagon') { if (this.oldType === 'stat' || this.oldType === 'gauge' || this.oldType === 'hexagon') {
break break
} }
this.chartConfig.param = { this.chartConfig.param = {
@@ -804,12 +804,12 @@ export default {
}, },
systemNameChange (index) { systemNameChange (index) {
if (this.systemNameShow[index].error) { if (this.systemNameShow[index].error) {
this.expressionName[index] = this.systemNameShow[index].oldName this.chartConfig.param.datasource[index].name = this.systemNameShow[index].oldName
this.systemNameShow[index].error = '' this.systemNameShow[index].error = ''
} else if (!this.expressionName[index]) { } else if (!this.chartConfig.param.datasource[index].name) {
this.expressionName[index] = this.systemNameShow[index].oldName this.chartConfig.param.datasource[index].name = this.systemNameShow[index].oldName
} else { } else {
this.systemNameShow[index].oldName = this.expressionName[index] this.systemNameShow[index].oldName = this.chartConfig.param.datasource[index].name
} }
this.change() this.change()
}, },

4
nezha-fronted/src/components/common/rightBox/profileBox.vue
View File

@@ -37,7 +37,7 @@
<el-option v-for="item in langList" :key="item.value" :label="item.name" :value="item.value"></el-option> <el-option v-for="item in langList" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Theme" prop="theme"> <el-form-item label="Theme" prop="theme" style="display: none">
<el-select id="account-input-language" <el-select id="account-input-language"
class="right-box__select" class="right-box__select"
v-model="editProfile.theme" v-model="editProfile.theme"
@@ -68,7 +68,7 @@ import editRigthBox from '@/components/common/mixin/editRigthBox'
import { theme } from '@/components/common/js/constants' import { theme } from '@/components/common/js/constants'
export default { export default {
name: 'modelbox', name: 'profilebox',
components: { components: {
}, },
props: { props: {

292
nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
View File

@@ -1,133 +1,138 @@
<template> <template>
<!--表格--> <div style="height: 100%;">
<el-table <!--表格-->
id="alertMessageTable" <el-table
ref="dataTable" id="alertMessageTable"
:cell-class-name="labelsClassName" ref="dataTable"
:data="tableData" :cell-class-name="labelsClassName"
:height="height" :data="tableData"
border :height="height"
@header-dragend="dragend" border
@sort-change="tableDataSort" :default-sort="orderBy"
@selection-change="selectionChange" @header-dragend="dragend"
@row-dblclick="(row)=>{rowDblclick(row)}" @sort-change="tableDataSort"
> @selection-change="selectionChange"
<el-table-column @row-dblclick="(row)=>{rowDblclick(row)}"
:resizable="false"
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
> >
<template slot-scope="scope" :column="item"> <el-table-column
<template v-if="item.prop === 'alertRule'"> :resizable="false"
<div v-if="scope.row.alertRule&&scope.row.alertRule.name" > align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'alertRule'">
<div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
<span <span
@mouseenter="alertMessageHover(scope.row.alertRule, true, $event)" @mouseenter="alertMessageHover(scope.row, true, $event)"
@mouseleave="alertMessageHover(scope.row.alertRule, false)" @mouseleave="alertMessageHover(scope.row, false)"
>{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span> >{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
<alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo> </div>
</div> <template v-else>-</template>
<template v-else>-</template> </template>
</template> <template v-else-if="item.prop === 'summary'">
<template v-else-if="item.prop === 'summary'"> <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template> <template v-else>-</template>
<template v-else>-</template> </template>
</template> <template v-else-if="item.prop === 'description'">
<template v-else-if="item.prop === 'description'"> <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template> <span v-else>-</span>
<span v-else>-</span> </template>
</template> <template v-else-if="item.prop === 'remark'">
<template v-else-if="item.prop === 'remark'"> <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template> <span v-else>-</span>
<span v-else>-</span> </template>
</template> <span v-else-if="item.prop === 'severityId'&&scope.row['severity']" class="severity">
<span v-else-if="item.prop === 'severityId'&&scope.row['severity']" class="severity">
<i :style="{color:scope.row['severity'].color,'font-size':'12px','margin-right':'5px'}" class="nz-icon nz-icon-circle"></i> {{scope.row['severity'].name}} <i :style="{color:scope.row['severity'].color,'font-size':'12px','margin-right':'5px'}" class="nz-icon nz-icon-circle"></i> {{scope.row['severity'].name}}
</span> </span>
<span v-else-if="item.prop === 'startAt'">{{utcTimeToTimezoneStr(scope.row.startAt)}}</span> <span v-else-if="item.prop === 'startAt'">{{utcTimeToTimezoneStr(scope.row.startAt)}}</span>
<template v-else-if="item.prop === 'duration'"> <span v-else-if="item.prop === 'lastAt'">{{utcTimeToTimezoneStr(scope.row.lastAt)}}</span>
<el-tooltip :disabled="!scope.row.endAt" effect="light" placement="right"> <template v-else-if="item.prop === 'duration'">
<div slot="content"> <el-tooltip :disabled="!scope.row.endAt" effect="light" placement="right">
{{$t('config.terminallog.endTime')}}<br/> <div slot="content">
{{utcTimeToTimezoneStr(scope.row.endAt)}} {{$t('config.terminallog.endTime')}}<br/>
</div> {{utcTimeToTimezoneStr(scope.row.endAt)}}
<span>{{getDuration(scope.row)}}</span> </div>
</el-tooltip> <span>{{getDuration(scope.row)}}</span>
</template> </el-tooltip>
<template v-else-if="item.prop === 'labels'" class="labels"> </template>
<template v-else-if="item.prop === 'labels'" class="labels">
<span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i"> <span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
<span <span
@mouseenter="labelHover(scope.row, item.label, true, $event)" @mouseenter="labelHover(scope.row, item.label, true, true, $event)"
@mouseleave="labelHover(scope.row, item.label, false)"> @mouseleave="labelHover(scope.row, item.label, false, true,)">
<nz-alert-tag <nz-alert-tag
v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'" v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'"
:label="item.label" :label="item.label"
:type="tagType(item.label)" :type="tagType(item.label)"
style="margin: 5px 0 5px 5px;" style="margin: 5px 0 5px 5px;"
> >
{{item.value}} {{item.value}}
</nz-alert-tag> </nz-alert-tag>
</span> </span>
<alertLabel
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project' || item.label === 'dc' ||item.label === 'endpoint' ||item.label === 'cpu' ||item.label === 'user' ||item.label === 'parent_asset') && scope.row[item.label] && scope.row[item.label].loading"
:id="scope.row[item.label].id"
:that="scope.row[item.label]"
:type="item.label"
:alert-table-dialog="chartAlertList"
></alertLabel>
</span> </span>
</template>
<span v-else-if="item.prop === 'state'">
<span class="alert-message-state" :class="{'green-bg': scope.row['state'] == 3, 'red-bg': scope.row['state'] == 1,'yellow-bg': scope.row['state'] == 2}">
{{$t(stateOptions.find(state=>state.value == scope.row['state']).label)}}
</span>
</span>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template> </template>
<span v-else-if="item.prop === 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}"> </el-table-column>
{{scope.row['state'] == 1 ? "Pending" : ""}} <el-table-column
{{scope.row['state'] == 2 ? "Expired" : ""}} v-if="showOption"
</span> :resizable="false"
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span> :width="operationWidth"
<template v-else>-</template> fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown v-has="['alertMessage_expired', 'alertSilence_add']" size="medium" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<!-- <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
<el-dropdown-item v-has="'alertMessage_view'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-table-column>
<template slot="empty">
<div v-if="!loading" class="table-no-data">
<svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use>
</svg>
<div class="table-no-data__title">No results found</div>
</div>
<div v-else>&nbsp;</div>
</template> </template>
</el-table-column> </el-table>
<el-table-column <alertRuleInfo v-if="alertRuleShow" :id="alertRuleId" :severity-data="severityData" :that="alertRuleObj.alertRule" @showText="$emit('showText',alertRuleObj)"></alertRuleInfo>
v-if="showOption" <alertLabel
:resizable="false" v-if="alertLabelShow"
:width="operationWidth" :id="alertLabelId"
fixed="right"> :that="alertLabelObj"
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div> :type="alertLabelType"
<div slot-scope="scope" class="table-operation-items"> :alert-table-dialog="chartAlertList"
<button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button> ></alertLabel>
<el-dropdown v-has="['alertMessage_expired', 'alertSilence_add']" size="medium" trigger="click" @command="tableOperation"> </div>
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<!-- <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
<el-dropdown-item v-has="'alertMessage_view'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-table-column>
<template slot="empty">
<div v-if="!loading" class="table-no-data">
<svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use>
</svg>
<div class="table-no-data__title">No results found</div>
</div>
<div v-else>&nbsp;</div>
</template>
</el-table>
</template> </template>
<script> <script>
@@ -139,6 +144,8 @@ import chartDataFormat from '../../../charts/chartDataFormat'
import alertRuleInfo from '../../alert/alertRuleInfo' import alertRuleInfo from '../../alert/alertRuleInfo'
import alertLabel from '../../alert/alertLabel' import alertLabel from '../../alert/alertLabel'
import { calcDurationByStringTimeB } from '../../js/tools' import { calcDurationByStringTimeB } from '../../js/tools'
import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default { export default {
name: 'alertMessageTable', name: 'alertMessageTable',
components: { components: {
@@ -158,13 +165,13 @@ export default {
loading: Boolean, loading: Boolean,
chartAlertList: Boolean chartAlertList: Boolean
}, },
mixins: [table, bus], mixins: [table, bus, alertLabelMixin],
data () { data () {
return { return {
/* 二级列表相关 */ /* 二级列表相关 */
tabList: [], // 二级列表的标签 tabList: [], // 二级列表的标签
tabDetailList: [], // 多个详情 tabDetailList: [], // 多个详情
stateOptions: alertMessageConstant.states,
// 详情相关 // 详情相关
graphShow: false, graphShow: false,
chartDatas: [], chartDatas: [],
@@ -176,6 +183,7 @@ export default {
chartUnit: 5, chartUnit: 5,
severityData: [], severityData: [],
tableTitle: [ tableTitle: [
{ {
label: 'ID', label: 'ID',
prop: 'id', prop: 'id',
@@ -211,13 +219,27 @@ export default {
prop: 'description', prop: 'description',
show: true, show: true,
minWidth: 200 minWidth: 200
}, {
label: this.$t('alert.list.state'),
prop: 'state',
show: true,
width: 100
// sortable: 'custom'
}, { }, {
label: this.$t('alert.startAt'), label: this.$t('alert.startAt'),
prop: 'startAt', prop: 'startAt',
show: true, show: true,
width: 150, width: 150,
sortable: 'custom' sortable: 'custom'
}, { },
// {
// label: this.$t('alert.lastAt'),
// prop: 'lastAt',
// show: true,
// width: 150,
// sortable: 'custom'
// },
{
label: this.$t('config.terminallog.duration'), label: this.$t('config.terminallog.duration'),
prop: 'duration', prop: 'duration',
show: true, show: true,
@@ -225,7 +247,10 @@ export default {
} }
], ],
viewAssetState: false, viewAssetState: false,
tableDataInitNum: 0 tableDataInitNum: 0,
alertRuleShow: false,
alertRuleId: '',
alertRuleObj: ''
} }
}, },
computed: { computed: {
@@ -544,38 +569,17 @@ export default {
this.$refs.moduleBox.show(false, false) this.$refs.moduleBox.show(false, false)
this.viewAssetState = false this.viewAssetState = false
}, },
// label tooltip是否显示
labelToolTipDis (labelType) {
switch (labelType) {
case 'asset':
case 'module':
case 'endpoint':
case 'project':
case 'dc':
return false
default: return true
}
},
// alertName鼠标划入 // alertName鼠标划入
alertMessageHover (item, loading, e) { alertMessageHover (item, loading, e) {
if (e) { if (e) {
const dom = e.currentTarget const dom = e.currentTarget
const position = dom.getBoundingClientRect() const position = dom.getBoundingClientRect()
this.$set(item, 'position', position) this.$set(item.alertRule, 'position', position)
this.alertRuleId = item.alertRule.id
this.alertRuleObj = item
} }
this.$set(item, 'loading', loading) this.$set(item.alertRule, 'loading', loading)
}, this.alertRuleShow = loading
// label 鼠标划入
labelHover (item, type, loading, e) {
if (this.labelToolTipDis(type)) {
return
}
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item[type], 'position', position)
}
this.$set(item[type], 'loading', loading)
}, },
// Severity Label // Severity Label
returnSeverityLabel (key) { returnSeverityLabel (key) {

1
nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
View File

@@ -6,6 +6,7 @@
:height="height" :height="height"
tooltip-effect="light" tooltip-effect="light"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

287
nezha-fronted/src/components/common/table/asset/assetTable.vue
View File

@@ -1,50 +1,51 @@
<template> <template>
<el-table <div style="height: 100%">
id="roleTable" <el-table
ref="dataTable" id="roleTable"
class="asset-table2" ref="dataTable"
:data="tableData" class="asset-table2"
:height="height" :data="tableData"
:default-sort="orderBy" :height="height"
border :default-sort="orderBy"
@header-dragend="dragend" border
@sort-change="tableDataSort" @header-dragend="dragend"
@selection-change="selectionChange" @sort-change="tableDataSort"
@row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', row)}" @selection-change="selectionChange"
> @row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', row)}"
<el-table-column
:resizable="false"
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
class="data-column"
> >
<template slot="header"> <el-table-column
<span class="data-column__span">{{item.label}} <i class="nz-icon nz-icon-label" v-if="item.type==='label'" style="color: #fa901c"/></span> :resizable="false"
<div class="col-resize-area"></div> align="center"
</template> type="selection"
<template slot-scope="scope" :column="item"> width="55">
<template v-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template> </el-table-column>
<template v-else-if="item.prop === 'state'">{{scope.row.state ? scope.row.state.name : '-'}}</template> <el-table-column
<template v-else-if="item.prop === 'endpointNum'"> v-for="(item, index) in customTableTitle"
<span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span> v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
class="data-column"
>
<template slot="header">
<span class="data-column__span">{{item.label}} <i class="nz-icon nz-icon-label" v-if="item.type==='label'" style="color: #fa901c"/></span>
<div class="col-resize-area"></div>
</template> </template>
<template v-else-if="item.prop === 'alertNum'"> <template slot-scope="scope" :column="item">
<!-- v-my-loading:ldsFacebook="scope.row.trendLoading"--> <template v-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
<span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"> <template v-else-if="item.prop === 'state'">{{scope.row.state ? scope.row.state.name : '-'}}</template>
<template v-else-if="item.prop === 'endpointNum'">
<span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
</template>
<template v-else-if="item.prop === 'alertNum'">
<!-- v-my-loading:ldsFacebook="scope.row.trendLoading"-->
<span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i> <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}"> <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
<div class="tooltip-title">Alert message (active)</div> <div class="tooltip-title">Alert message (active)</div>
@@ -54,113 +55,114 @@
</div> </div>
</div> </div>
<alertDaysInfo <alertDaysInfo
v-show="!scope.row.trendLoading" v-show="!scope.row.trendLoading"
:alertDaysData="scope.row.alertDaysData" :alertDaysData="scope.row.alertDaysData"
/> />
</span> </span>
</template> </template>
<template v-else-if="item.prop === 'dc'">{{scope.row.dc ? scope.row.dc.name : '-'}}</template> <template v-else-if="item.prop === 'dc'">{{scope.row.dc ? scope.row.dc.name : '-'}}</template>
<template v-else-if="item.prop === 'cabinet'"> <template v-else-if="item.prop === 'cabinet'">
<span v-if="scope.row.cabinet && scope.row.cabinet !== '--'">{{scope.row.cabinet.name}}&nbsp;{{returnCabinet( scope.row.cabinetStart, scope.row.cabinetEnd)}}</span> <span v-if="scope.row.cabinet && scope.row.cabinet !== '--'">{{scope.row.cabinet.name}}&nbsp;{{returnCabinet( scope.row.cabinetStart, scope.row.cabinetEnd)}}</span>
<span v-else >-</span> <span v-else >-</span>
</template> </template>
<template v-else-if="item.prop === 'pingInfo'"> <template v-else-if="item.prop === 'pingInfo'">
<div class="ping-info" v-if="scope.row.pingInfo"> <div class="ping-info" v-if="scope.row.pingInfo">
<div :class="{'active-icon green-bg':scope.row.pingInfo.status == 1,'active-icon red-bg':scope.row.pingInfo.status == 0}" style="position: relative"> <div :class="{'active-icon green-bg':scope.row.pingInfo.status == 1,'active-icon red-bg':scope.row.pingInfo.status == 0}" style="position: relative">
</div>
<div class="active-icon-content">{{$t('asset.assetStatPre')+(scope.row.pingInfo.lastUpdate?utcTimeToTimezoneStr(scope.row.pingInfo.lastUpdate):$t('asset.assetStatDown'))}}</div>
{{scope.row.pingInfo.rtt?scope.row.pingInfo.rtt+'ms':''}}
</div> </div>
<div class="active-icon-content">{{$t('asset.assetStatPre')+(scope.row.pingInfo.lastUpdate?utcTimeToTimezoneStr(scope.row.pingInfo.lastUpdate):$t('asset.assetStatDown'))}}</div> </template>
{{scope.row.pingInfo.rtt?scope.row.pingInfo.rtt+'ms':''}} <template v-else-if="item.prop === 'model'">{{scope.row.model ? scope.row.model.name : '-'}}</template>
</div> <template v-else-if="item.prop === 'parent'">
</template>
<template v-else-if="item.prop === 'model'">{{scope.row.model ? scope.row.model.name : '-'}}</template>
<template v-else-if="item.prop === 'parent'">
<span <span
v-if="scope.row.parent" v-if="scope.row.parent"
style="cursor: pointer" style="cursor: pointer"
@mouseenter="labelHover(scope.row, 'asset', true, $event)" @mouseenter="labelHover(scope.row, 'asset', true, false, $event)"
@mouseleave="labelHover(scope.row, 'asset', false)"> @mouseleave="labelHover(scope.row, 'asset', false, false)">
{{scope.row.parent.name}} {{scope.row.parent.name}}
<alertLabel
v-if="scope.row.loading"
:id="scope.row.pid"
:that="scope.row"
:type="'asset'"
></alertLabel>
</span> </span>
<span v-else> - </span> <span v-else> - </span>
</template> </template>
<template v-else-if="item.prop === 'children'"> <template v-else-if="item.prop === 'children'">
<div @click="$emit('showBottomBox', 'assetSubTab', scope.row)" v-if="scope.row.childrenNum" style="cursor: pointer"> <div @click="$emit('showBottomBox', 'assetSubTab', scope.row)" v-if="scope.row.childrenNum" style="cursor: pointer">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
{{scope.row.childrenNum}}</div> {{scope.row.childrenNum}}</div>
<!-- <span v-else-if="scope.row.pid == -1"> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>--> <!-- <span v-else-if="scope.row.pid == -1"> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>-->
<span v-else> - </span> <span v-else> - </span>
</template> </template>
<template v-else-if="item.prop === 'clientState'"> <template v-else-if="item.prop === 'clientState'">
<div v-if="scope.row[item.prop]===1"> <div v-if="scope.row[item.prop]===1">
<div class="active-icon green-bg inline-block"></div> <div class="active-icon green-bg inline-block"></div>
OK OK
</div> </div>
<div v-else-if="scope.row[item.prop]===0"> <div v-else-if="scope.row[item.prop]===0">
<div class="active-icon gray-bg inline-block"></div> {{ $t('config.user.disable') }} <div class="active-icon gray-bg inline-block"></div> {{ $t('config.user.disable') }}
</div> </div>
<div v-else-if="scope.row[item.prop]===2"> <div v-else-if="scope.row[item.prop]===2">
<div class="active-icon red-bg inline-block"></div> {{ $t('asset.connectionTimedOut') }} <div class="active-icon red-bg inline-block"></div> {{ $t('asset.connectionTimedOut') }}
</div> </div>
<div v-else-if="scope.row[item.prop]===3"> <div v-else-if="scope.row[item.prop]===3">
<div class="active-icon red-bg inline-block"></div> {{ $t('overall.AuthenticationFailed') }} <div class="active-icon red-bg inline-block"></div> {{ $t('overall.AuthenticationFailed') }}
</div> </div>
<div v-else-if="scope.row[item.prop]===4"> <div v-else-if="scope.row[item.prop]===4">
<div class="active-icon red-bg inline-block"></div> {{ $t('config.terminallog.statusItem.unknownError') }} <div class="active-icon red-bg inline-block"></div> {{ $t('config.terminallog.statusItem.unknownError') }}
</div> </div>
<template v-else>-</template> <template v-else>-</template>
</template> </template>
<template v-else-if="item.prop === 'brand'">{{scope.row.brand ? scope.row.brand.name : '-'}}</template> <template v-else-if="item.prop === 'brand'">{{scope.row.brand ? scope.row.brand.name : '-'}}</template>
<template v-else-if="item.prop === 'purchaseDate'">{{scope.row.purchaseDate ? scope.row.purchaseDate : '-'}}</template> <template v-else-if="item.prop === 'purchaseDate'">{{scope.row.purchaseDate ? scope.row.purchaseDate : '-'}}</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span> <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
<template v-else> <template v-else>
<span v-if="scope.row.fields&&scope.row.fields.find(field => field.name === item.prop)"> <span v-if="scope.row.fields&&scope.row.fields.find(field => field.name === item.prop)">
{{scope.row.fields.find(field => field.name === item.prop).value.join(',')}} {{scope.row.fields.find(field => field.name === item.prop).value.join(',')}}
</span> </span>
<span v-else> <span v-else>
{{scope.row[item.prop]}} {{scope.row[item.prop]}}
</span> </span>
</template>
</template> </template>
</el-table-column>
<el-table-column
:resizable="false"
v-if="showOption"
:width="operationWidth"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button v-if="assetTab" class="table-operation-item" v-has="'model_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['asset_edit','asset_connect','asset_add','asset_delete', 'alertSilence_add']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-table-column>
<template slot="empty">
<div v-if="!loading" class="table-no-data">
<svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use>
</svg>
<div class="table-no-data__title">No results found</div>
</div>
<div v-else>&nbsp;</div>
</template> </template>
</el-table-column> </el-table>
<el-table-column <alertLabel
:resizable="false" v-if="alertLabelShow"
v-if="showOption" :id="alertLabelId"
:width="operationWidth" :that="alertLabelObj"
fixed="right"> :type="alertLabelType"
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div> ></alertLabel>
<div slot-scope="scope" class="table-operation-items"> </div>
<button v-if="assetTab" class="table-operation-item" v-has="'model_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['asset_edit','asset_connect','asset_add','asset_delete', 'alertSilence_add']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-table-column>
<template slot="empty">
<div v-if="!loading" class="table-no-data">
<svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use>
</svg>
<div class="table-no-data__title">No results found</div>
</div>
<div v-else>&nbsp;</div>
</template>
</el-table>
</template> </template>
<script> <script>
@@ -169,9 +171,10 @@ import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools
// import bus from '@/libs/bus' // import bus from '@/libs/bus'
import alertLabel from '@/components/common/alert/alertLabel' import alertLabel from '@/components/common/alert/alertLabel'
import alertDaysInfo from '@/components/common/alert/alertDaysInfo' import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default { export default {
name: 'assetTable', name: 'assetTable',
mixins: [table], mixins: [table, alertLabelMixin],
components: { components: {
alertLabel: alertLabel, alertLabel: alertLabel,
alertDaysInfo alertDaysInfo
@@ -337,16 +340,6 @@ export default {
this.bottomBox.targetTab = 'endpoint' this.bottomBox.targetTab = 'endpoint'
this.bottomBox.showSubList = true this.bottomBox.showSubList = true
}, },
// label 鼠标划入
labelHover (item, type, loading, e) {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item, 'position', position)
}
this.$set(item, 'loading', loading)
// this.$set(this.tableData,index,item);// 调用父组件
},
returnCabinet (start, end) { // 返回机柜u位信息 returnCabinet (start, end) { // 返回机柜u位信息
if (!start || !end) { if (!start || !end) {
return '' return ''

1
nezha-fronted/src/components/common/table/settings/agentTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/dcTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

280
nezha-fronted/src/components/common/table/settings/endpointTable.vue
View File

@@ -1,94 +1,78 @@
<template> <template>
<el-table <div style="height: 100%">
id="endpointTable" <el-table
ref="dataTable" id="endpointTable"
:data="tableData" ref="dataTable"
:height="height" :data="tableData"
border :height="height"
@header-dragend="dragend" border
@sort-change="tableDataSort" :default-sort="orderBy"
@selection-change="selectionChange" @header-dragend="dragend"
@row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', row)}" @sort-change="tableDataSort"
> @selection-change="selectionChange"
<el-table-column @row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', row)}"
:resizable="false"
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
class="data-column"
> >
<template slot="header"> <el-table-column
<span class="data-column__span">{{item.label}}</span> :resizable="false"
<div class="col-resize-area"></div> align="center"
</template> type="selection"
<template slot-scope="scope" :column="item"> width="55">
<template v-if="item.prop === 'name'"> </el-table-column>
{{scope.row[item.prop]}} <el-table-column
v-for="(item, index) in customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
class="data-column"
>
<template slot="header">
<span class="data-column__span">{{item.label}}</span>
<div class="col-resize-area"></div>
</template> </template>
<template v-else-if="item.prop === 'type'"> <template slot-scope="scope" :column="item">
{{scope.row.module.type}} <template v-if="item.prop === 'name'">
</template> {{scope.row[item.prop]}}
<template v-else-if="item.prop === 'project'"> </template>
<template v-else-if="item.prop === 'type'">
{{scope.row.module.type}}
</template>
<template v-else-if="item.prop === 'project'">
<span <span
class="pointer" class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)" @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)" @mouseleave="labelHover(scope.row, item.prop, false,true)"
> >
{{scope.row[item.prop].name}} {{scope.row[item.prop].name}}
</span> </span>
<alertLabel </template>
v-if="scope.row[item.prop] && scope.row[item.prop].loading" <template v-else-if="item.prop === 'module'">
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'project'"
></alertLabel>
</template>
<template v-else-if="item.prop === 'module'">
<span <span
class="pointer" class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)" @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)" @mouseleave="labelHover(scope.row, item.prop, false,true)"
> >
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/> <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
{{scope.row[item.prop].name}} {{scope.row[item.prop].name}}
</span> </span>
<alertLabel </template>
v-if="scope.row[item.prop] && scope.row[item.prop].loading" <template v-else-if="item.prop === 'asset'">
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'module'"
></alertLabel>
</template>
<template v-else-if="item.prop === 'asset'">
<span <span
class="pointer" class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)" @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)" @mouseleave="labelHover(scope.row, item.prop, false,true)"
> >
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
{{scope.row.asset.name}} {{scope.row.asset.name}}
</span> </span>
<alertLabel </template>
v-if="scope.row[item.prop] && scope.row[item.prop].loading" <template v-else-if="item.prop === 'alerts'">
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'asset'"
></alertLabel>
</template>
<template v-else-if="item.prop === 'alerts'">
<span style="cursor: pointer" @click="showBottomBox('endpointAlertMessage', scope.row)"> <span style="cursor: pointer" @click="showBottomBox('endpointAlertMessage', scope.row)">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i> <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}"> <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
@@ -103,27 +87,27 @@
:alertDaysData="scope.row.alertDaysData" :alertDaysData="scope.row.alertDaysData"
/> />
</span> </span>
</template> </template>
<template v-else-if="item.prop === 'configs'"> <template v-else-if="item.prop === 'configs'">
<span class="configs-endpoint metrics" <span class="configs-endpoint metrics"
@mouseenter="labelHover(scope.row, item.prop, true, $event)" @mouseenter="labelHover1(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false, $event, true)"> @mouseleave="labelHover1(scope.row, item.prop, false, $event, true)">
[{{scope.row.configs[0].enable ? 'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ? 'logs' : ''}}] [{{scope.row.configs[0].enable ? 'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ? 'logs' : ''}}]
</span> </span>
<nz-tooltip :that="scope.row[item.prop]" class="data-column__" v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop"> <nz-tooltip :that="scope.row[item.prop]" class="data-column__" v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop">
<div name="default"> <div name="default">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span> <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span>
<pre class="copy-value-content__pre">{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre> <pre class="copy-value-content__pre">{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
</div> </div>
</nz-tooltip> </nz-tooltip>
</template> </template>
<template v-else-if="item.prop === 'state'"> <template v-else-if="item.prop === 'state'">
<!-- metrics--> <!-- metrics-->
<span style="width: auto;display: inline-block;cursor: pointer" <span style="width: auto;display: inline-block;cursor: pointer"
@mouseenter="labelHoverConfigs(scope.row, 0, true, $event)" @mouseenter="labelHoverConfigs(scope.row, 0, true, $event)"
@mouseleave="labelHoverConfigs(scope.row, 0, false, $event)" @mouseleave="labelHoverConfigs(scope.row, 0, false, $event)"
> >
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span> <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
<span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state"> <span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
<span class="active-icon red-bg inline-block"></span> <span class="active-icon red-bg inline-block"></span>
@@ -135,15 +119,15 @@
<span class="active-icon gray-bg inline-block"></span> <span class="active-icon gray-bg inline-block"></span>
</span> </span>
</span> </span>
<nz-tooltip :that="scope.row.configs[0]" v-if="scope.row.configs[0] && scope.row.configs[0].loading && scope.row.configs[0].state > 1" :type="'configs[0]'"> <nz-tooltip :that="scope.row.configs[0]" v-if="scope.row.configs[0] && scope.row.configs[0].loading && scope.row.configs[0].state > 1" :type="'configs[0]'">
<div name="default"> <div name="default">
<div v-html="suspendedStr(scope.row.configs[0].state)"></div> <div v-html="suspendedStr(scope.row.configs[0].state)"></div>
</div> </div>
</nz-tooltip> </nz-tooltip>
<!-- logs--> <!-- logs-->
<span style="width: auto;display: inline-block;cursor: pointer" <span style="width: auto;display: inline-block;cursor: pointer"
@mouseenter="labelHoverConfigs(scope.row, 1, true, $event)" @mouseenter="labelHoverConfigs(scope.row, 1, true, $event)"
@mouseleave="labelHoverConfigs(scope.row, 1, false, $event)"> @mouseleave="labelHoverConfigs(scope.row, 1, false, $event)">
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span> <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
<span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state"> <span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
<span class="active-icon red-bg inline-block"></span> <span class="active-icon red-bg inline-block"></span>
@@ -155,66 +139,74 @@
<span class="active-icon gray-bg inline-block"></span> <span class="active-icon gray-bg inline-block"></span>
</span> </span>
</span> </span>
<nz-tooltip :that="scope.row.configs[1]" v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'"> <nz-tooltip :that="scope.row.configs[1]" v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'">
<div name="default"> <div name="default">
<div v-html="suspendedStr(scope.row.configs[1].state)"></div> <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
</div>
</nz-tooltip>
</template>
<template v-else-if="item.prop === 'enabled'">
<span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span>
<span v-else>{{$t('project.endpoint.disable')}}</span>
</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
v-if="showOption"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button v-if="endpointTab" class="table-operation-item" v-has="'monitor_endpoint_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete','alertSilence_add']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div> </div>
</nz-tooltip> <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
</template> <!-- <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
<template v-else-if="item.prop === 'enabled'"> <el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span> <el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<span v-else>{{$t('project.endpoint.disable')}}</span> <el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
</template> <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'endpoint']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span> </el-dropdown-menu>
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span> </el-dropdown>
</div>
</el-table-column>
<template slot="empty">
<div v-if="!loading" class="table-no-data">
<svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use>
</svg>
<div class="table-no-data__title">No results found</div>
</div>
<div v-else>&nbsp;</div>
</template> </template>
</el-table-column> </el-table>
<el-table-column <alertLabel
:resizable="false" v-if="alertLabelShow"
:width="operationWidth" :id="alertLabelId"
v-if="showOption" :that="alertLabelObj"
fixed="right"> :type="alertLabelType"
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div> ></alertLabel>
<div slot-scope="scope" class="table-operation-items"> </div>
<button v-if="endpointTab" class="table-operation-item" v-has="'monitor_endpoint_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete','alertSilence_add']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<!-- <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
<el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'endpoint']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-table-column>
<template slot="empty">
<div v-if="!loading" class="table-no-data">
<svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use>
</svg>
<div class="table-no-data__title">No results found</div>
</div>
<div v-else>&nbsp;</div>
</template>
</el-table>
</template> </template>
<script> <script>
import table from '@/components/common/mixin/table' import table from '@/components/common/mixin/table'
import alertLabel from '../../alert/alertLabel' import alertLabel from '../../alert/alertLabel'
import nzTooltip from '../../alert/nzTooltip' import nzTooltip from '../../alert/nzTooltip'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default { export default {
name: 'endpointTable', name: 'endpointTable',
components: { components: {
alertLabel, alertLabel,
nzTooltip nzTooltip
}, },
mixins: [table], mixins: [table, alertLabelMixin],
props: { props: {
showOption: { showOption: {
type: Boolean, type: Boolean,
@@ -324,7 +316,7 @@ export default {
return str return str
}, },
// label 鼠标划入 // label 鼠标划入
labelHover (item, type, loading, e, slow) { labelHover1 (item, type, loading, e, slow) {
if (e) { if (e) {
const dom = e.currentTarget const dom = e.currentTarget
const position = dom.getBoundingClientRect() const position = dom.getBoundingClientRect()

1
nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

4
nezha-fronted/src/components/common/table/settings/mibTable.vue
View File

@@ -40,8 +40,8 @@
</template> </template>
<template v-else-if="item.prop === 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" > <template v-else-if="item.prop === 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
<div style="height: 100%"> <div style="height: 100%">
<div style="height: 100%; overflow: auto;"> <div style="height: 100%; overflow: auto;" v-if="scope.row['modelsDetail']">
<div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content"> <div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content" v-if="n">
<el-popover placement="top" trigger="hover" > <el-popover placement="top" trigger="hover" >
<div> <div>
<div> <div>

1
nezha-fronted/src/components/common/table/settings/modelTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/moduleTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/operationLogTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
class="no-operation" class="no-operation"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"

1
nezha-fronted/src/components/common/table/settings/projectTable.vue
View File

@@ -6,6 +6,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/roleTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

10
nezha-fronted/src/components/common/table/settings/scrapeEndpointTable.vue
View File

@@ -35,7 +35,7 @@
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop === 'endpoint'">{{scope.row.discoveredLabels.endpoint ? scope.row.discoveredLabels.endpoint : '-'}}</template> <template v-if="item.prop === 'endpoint'">{{scope.row.discoveredLabels.endpoint ? scope.row.discoveredLabels.endpoint : '-'}}</template>
<template v-else-if="item.prop === 'lastScrape'">{{scope.row.lastScrape}}</template> <template v-else-if="item.prop === 'lastScrape'">{{time}}</template>
<template v-else-if="item.prop === 'labels'" class="labels"> <template v-else-if="item.prop === 'labels'" class="labels">
<span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i"> <span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
<span> <span>
@@ -137,7 +137,8 @@ export default {
show: true show: true
} }
], ],
exclusiveLabels: ['_id', 'severity', '__name__'] exclusiveLabels: ['_id', 'severity', '__name__'],
time: ''
} }
}, },
computed: { computed: {
@@ -156,8 +157,9 @@ export default {
immediate: true, immediate: true,
deep: true, deep: true,
handler (n) { handler (n) {
n.map(e => { n.forEach(e => {
e.lastScrape = bus.timeFormate(e.lastScrape, this.timeFormatMain) const lastScrape = new Date(e.lastScrape).getTime()
this.time = bus.timeFormate(lastScrape, this.timeFormatMain)
}) })
} }
} }

1
nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
View File

@@ -5,6 +5,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

1
nezha-fronted/src/components/common/table/settings/userTable.vue
View File

@@ -6,6 +6,7 @@
:data="tableData" :data="tableData"
:height="height" :height="height"
border border
:default-sort="orderBy"
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectionChange" @selection-change="selectionChange"

7
nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
View File

@@ -52,11 +52,10 @@
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination> <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</div> </div>
<el-dialog <el-dialog
id="viewGraphDialog"
v-if="graphShow" v-if="graphShow"
:visible.sync="graphShow" :visible.sync="graphShow"
:show-close="false" :show-close="false"
class="nz-dialog chart-fullscreen" class="nz-dialog chart-fullscreen endpoint-query-metrics"
destroy-on-close destroy-on-close
fullscreen fullscreen
:modal-append-to-body="false" :modal-append-to-body="false"
@@ -464,12 +463,12 @@ export default {
/* if (refresh) { /* if (refresh) {
this.getData(this.filter) this.getData(this.filter)
} */ } */
}, }
}, },
computed: { computed: {
chartRightBoxShow () { chartRightBoxShow () {
return this.$store.getters.getShowRightBox return this.$store.getters.getShowRightBox
}, }
}, },
created () { created () {
// this.getPanelData() // this.getPanelData()

1
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -305,6 +305,7 @@ export default {
const showTime = this.timeData.find(item => item.id == n) const showTime = this.timeData.find(item => item.id == n)
if (showTime) { if (showTime) {
this.showTime = Object.assign({}, showTime) this.showTime = Object.assign({}, showTime)
this.searchTime = this.$parent.searchTime
} }
if (this.showEmpty && this.defaultPick === 12) { if (this.showEmpty && this.defaultPick === 12) {
this.searchTime = [] this.searchTime = []

8
nezha-fronted/src/components/layout/home.vue
View File

@@ -40,13 +40,7 @@ export default {
}, },
methods: { methods: {
refresh () { refresh () {
this.containerShow = false this.$store.commit('setIsRouteLive')
new Promise(resolve => {
this.$router.replace({ path: this.$route.path, query: {} })
resolve()
}).then(() => {
this.$nextTick(() => { this.containerShow = true })
})
} }
}, },
destroyed () { destroyed () {

Some files were not shown because too many files have changed in this diff Show More