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>
<meta charset="utf-8">
<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"/>
<title>Nezha</title>

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

@@ -15,9 +15,6 @@ export default {
browserWindowZoom
},
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('/')
if (herfSpiltArr[3] !== '#') {
herfSpiltArr[3] = '#'
@@ -28,6 +25,7 @@ export default {
const result = await this.$http.get(url)
this.$axios.defaults.baseURL = result.body.baseUrl
const version = result.body.version
const defaultWindowWidth = result.body.width || 1024
if (version !== localStorage.getItem('nz-version')) {
localStorage.clear()
localStorage.clear()
@@ -35,6 +33,9 @@ export default {
herfSpiltArr[2] = herfSpiltArr[2] + '?t=' + new Date().getTime()
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>

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

@@ -73,6 +73,9 @@
.green-bg {
background-color:$--color-success !important;
}
.yellow-bg {
background-color:$--color-silence !important;
}
.gray-bg {
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 {
.el-dialog__header{
display: none;

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

@@ -20,5 +20,6 @@
}
.chart-unit .el-input__inner {
border-top-left-radius: 0 !important;
border-color: $--border-color-base;
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;
line-height: 30px;
display: flex;
justify-content: space-around;
justify-content: space-between;
.license-info {
margin-bottom: 10px;
color: white;

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

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

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

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

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

@@ -46,6 +46,12 @@
display: flex;
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{
padding: 0 4px;
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{
height: 108px !important;
}
.alert-message-state{
padding: 3px 5px;
border-radius: 4px;
color: $--color-text-primary;
}

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

@@ -39,16 +39,21 @@
}
.panel {
.right-box.right-box-chart-temp {
.el-table {
border-radius: 5px;
border-left: 1px solid $--border-color-light;
border-top: 1px solid $--border-color-light;
.el-table__body-wrapper {
height: calc(100% - 65px) !important;
height: calc(100% - 40px) !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;
}
@@ -65,6 +70,10 @@
.el-table--border::after {
background-color: $--border-color-light;
}
.el-table::before {
display: none;
}
}
}
/* begin-chart list*/
.table-list {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -151,8 +151,8 @@ export default {
this.tooltip.show = false
},
getLayout () {
this.boxWidth = this.$refs['chart-stat-box'].offsetWidth - 2 * this.boxPadding
this.boxHeight = this.$refs['chart-stat-box'].offsetHeight - 2 * this.boxPadding
this.boxWidth = this.$refs['chart-stat-box'].offsetWidth - 3 * this.boxPadding
this.boxHeight = this.$refs['chart-stat-box'].offsetHeight - 3 * this.boxPadding
return new Promise(resolve => {
let rateMax = 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.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]) {
this.valueMapping[item.column].push(item)
} else {
@@ -94,7 +94,7 @@ export default {
initTableData (chartInfo, originalDatas) {
let colorIndex = 0
const returnData = {}
const arr = chartInfo.param.indexs.split(',')
const arr = chartInfo.param.indexs ? chartInfo.param.indexs.split(',') : []
const tableInitialData = lodash.cloneDeep(originalDatas)
tableInitialData.forEach((originalData, expressionIndex) => {
let key = expressionIndex
@@ -107,7 +107,7 @@ export default {
originalData.forEach((data, dataIndex) => {
this.isNoData = false
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 mapping = this.selectTableMapping(value, chartInfo.param.valueMapping)
data.$value = value

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

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

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

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

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

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

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

@@ -15,10 +15,10 @@
* });
* ```
*/
import extend from "../utils/extend.js";
import { addEdges } from "../utils/rect.js";
import Modification from "./Modification.js";
import { makeModifier } from "./base.js";
import extend from '../utils/extend.js'
import { addEdges } from '../utils/rect.js'
import Modification from './Modification.js'
import { makeModifier } from './base.js'
const aspectRatio = {
start (arg) {
const {
@@ -26,46 +26,45 @@ const aspectRatio = {
rect,
edges: originalEdges,
pageCoords: coords
} = arg;
} = arg
let {
ratio
} = state.options;
} = state.options
const {
equalDelta,
modifiers
} = state.options;
} = state.options
if (ratio === 'preserve') {
ratio = rect.width / rect.height;
ratio = rect.width / rect.height
}
state.startCoords = extend({}, coords);
state.startRect = extend({}, rect);
state.ratio = ratio;
state.equalDelta = equalDelta;
state.startCoords = extend({}, coords)
state.startRect = extend({}, rect)
state.ratio = ratio
state.equalDelta = equalDelta
const linkedEdges = state.linkedEdges = {
top: originalEdges.top || originalEdges.left && !originalEdges.bottom,
left: originalEdges.left || originalEdges.top && !originalEdges.right,
bottom: originalEdges.bottom || originalEdges.right && !originalEdges.top,
right: originalEdges.right || originalEdges.bottom && !originalEdges.left
};
state.xIsPrimaryAxis = !!(originalEdges.left || originalEdges.right);
}
state.xIsPrimaryAxis = !!(originalEdges.left || originalEdges.right)
if (state.equalDelta) {
state.edgeSign = (linkedEdges.left ? 1 : -1) * (linkedEdges.top ? 1 : -1);
state.edgeSign = (linkedEdges.left ? 1 : -1) * (linkedEdges.top ? 1 : -1)
} else {
const negativeSecondaryEdge = state.xIsPrimaryAxis ? linkedEdges.top : linkedEdges.left;
state.edgeSign = negativeSecondaryEdge ? -1 : 1;
const negativeSecondaryEdge = state.xIsPrimaryAxis ? linkedEdges.top : linkedEdges.left
state.edgeSign = negativeSecondaryEdge ? -1 : 1
}
extend(arg.edges, linkedEdges);
if (!modifiers || !modifiers.length) return;
const subModification = new Modification(arg.interaction);
subModification.copyFrom(arg.interaction.modification);
subModification.prepareStates(modifiers);
state.subModification = subModification;
subModification.startAll({ ...arg
});
extend(arg.edges, linkedEdges)
if (!modifiers || !modifiers.length) return
const subModification = new Modification(arg.interaction)
subModification.copyFrom(arg.interaction.modification)
subModification.prepareStates(modifiers)
state.subModification = subModification
subModification.startAll({ ...arg })
},
set (arg) {
@@ -73,39 +72,40 @@ const aspectRatio = {
state,
rect,
coords
} = arg;
const initialCoords = extend({}, coords);
const aspectMethod = state.equalDelta ? setEqualDelta : setRatio;
aspectMethod(state, state.xIsPrimaryAxis, coords, rect);
} = arg
const initialCoords = extend({}, coords)
const aspectMethod = state.equalDelta ? setEqualDelta : setRatio
aspectMethod(state, state.xIsPrimaryAxis, coords, rect)
if (!state.subModification) {
return null;
return null
}
const correctedRect = extend({}, rect);
const correctedRect = extend({}, rect)
addEdges(state.linkedEdges, correctedRect, {
x: coords.x - initialCoords.x,
y: coords.y - initialCoords.y
});
const result = state.subModification.setAll({ ...arg,
})
const result = state.subModification.setAll({
...arg,
rect: correctedRect,
edges: state.linkedEdges,
pageCoords: coords,
prevCoords: coords,
prevRect: correctedRect
});
})
const {
delta
} = result;
} = result
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);
extend(coords, result.coords);
aspectMethod(state, xIsCriticalAxis, result.coords, result.rect)
extend(coords, result.coords)
}
return result.eventProps;
return result.eventProps
},
defaults: {
@@ -114,16 +114,16 @@ const aspectRatio = {
modifiers: [],
enabled: false
}
};
}
function setEqualDelta ({
startCoords,
edgeSign
}, xIsPrimaryAxis, coords) {
if (xIsPrimaryAxis) {
coords.y = startCoords.y + (coords.x - startCoords.x) * edgeSign;
coords.y = startCoords.y + (coords.x - startCoords.x) * edgeSign
} else {
coords.x = startCoords.x + (coords.y - startCoords.y) * edgeSign;
coords.x = startCoords.x + (coords.y - startCoords.y) * edgeSign
}
}
@@ -134,14 +134,14 @@ function setRatio({
edgeSign
}, xIsPrimaryAxis, coords, rect) {
if (xIsPrimaryAxis) {
const newHeight = rect.width / ratio;
coords.y = startCoords.y + (newHeight - startRect.height) * edgeSign;
const newHeight = rect.width / ratio
coords.y = startCoords.y + (newHeight - startRect.height) * edgeSign
} else {
const newWidth = rect.height * ratio;
coords.x = startCoords.x + (newWidth - startRect.width) * edgeSign;
const newWidth = rect.height * ratio
coords.x = startCoords.x + (newWidth - startRect.width) * edgeSign
}
}
export default makeModifier(aspectRatio, 'aspectRatio');
export { aspectRatio };
export default makeModifier(aspectRatio, 'aspectRatio')
export { aspectRatio }
// # sourceMappingURL=aspectRatio.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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>
</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">
<span class="nz-dialog-title">{{data.name}}</span>
<div class="float-right panel-calendar dialog-tool">
@@ -126,7 +126,6 @@
:visible.sync="graphShow"
width="90%"
:append-to-body="true"
id="viewGraphDialog"
@close="dialogClose" :modal-append-to-body="false">
<div slot="title">
{{$t("project.endpoint.dialogTitle")}}

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 (filterType === 'refresh') {
this.$get('visual/panel/chart/' + chartItem.id).then(res => {
const data = res.data.data
const data = res.data
data.param = JSON.parse(data.param)
this.$refs['editChart' + chartItem.id][0].setData(data, 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.$get('monitor/project/topo/icon').then((imageAllId) => {
const promiseArr = []
if (!imageAllId || !imageAllId.data) {
return
}
imgidList.forEach((item, index) => {
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`))

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

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

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

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

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

@@ -1,5 +1,5 @@
<template>
<div class="sub-box bottom-box">
<div class="sub-box bottom-box" :style="{height: isFullScreen ? '100%' : ''}">
<div class="resize-modal">
<div class="sub-list-resize-copy">一</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: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-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 v-slot>
<alertMessageTable
ref="dataTable"
:api="url"
:orderByFa="orderBy"
:loading="tools.loading"
:custom-table-title="tools.customTableTitle"
:height="subTableHeight"
@@ -155,6 +156,14 @@ export default {
this.getTableData()
}
}
},
orderBy: {
immediate: true,
handler (n) {
if (n) {
// console.log(n)
}
}
}
},
data () {
@@ -230,7 +239,7 @@ export default {
sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
legend: [],
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(),
currentMsg: {},
chartUnit: 5,
@@ -293,22 +302,24 @@ export default {
}
if (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, 'pageSize', this.pageObj.pageSize)
this.$set(this.searchLabel, 'state', this.state)
if (this.searchTimeHeader && this.searchTimeHeader.length > 1) {
this.$set(this.searchLabel, 'startAt', this.timezoneToUtcTimeStr(this.searchTimeHeader[0]))
this.$set(this.searchLabel, 'endAt', this.timezoneToUtcTimeStr(this.searchTimeHeader[1]))
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', bus.timeFormate(this.timezoneToUtcTime(bus.formateTimeToTime(this.searchTimeHeader[1])), 'YYYY-MM-DD HH:mm:ss'))
} else {
delete this.searchLabel.startAt
delete this.searchLabel.endAt
}
this.tools.loading = true
if (state) {
delete this.searchLabel.startAt
delete this.searchLabel.endAt
}
// if (state) {
// delete this.searchLabel.startAt
// delete this.searchLabel.endAt
// }
if (this.from === fromRoute.module) {
this.searchLabel.moduleIds = this.obj.id
} else if (this.from === fromRoute.endpoint) {
@@ -327,6 +338,8 @@ export default {
this.tableData = response.data.list
this.deleteBox.ids = ''
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.$nextTick(() => {
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()
})
})
@@ -597,7 +619,7 @@ export default {
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.unit = this.currentMsg.unit
this.showFullscreen(true, chartInfo)

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

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

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

@@ -18,6 +18,7 @@
<asset-table
ref="dataTable"
:api="url"
:orderByFa="'id'"
v-loading="tools.loading"
:loading="tools.loading"
:custom-table-title="tools.customTableTitle"
@@ -121,7 +122,9 @@ export default {
typeData: [],
dcData: [],
snmpCredentialData: [],
fieldGroupData: []
fieldGroupData: [],
needAlertDaysData: true,
trendKey: 'assetId'
}
},
methods: {
@@ -223,6 +226,8 @@ export default {
}
if (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, 'pageSize', this.pageObj.pageSize)
@@ -234,9 +239,31 @@ export default {
for (let i = 0; i < response.data.list.length; i++) {
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.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)

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

@@ -18,6 +18,7 @@
<asset-table
ref="dataTable"
:api="url"
:orderByFa="'id'"
v-loading="tools.loading"
:loading="tools.loading"
:custom-table-title="tools.customTableTitle"
@@ -226,6 +227,8 @@ export default {
}
if (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, 'pageSize', this.pageObj.pageSize)
@@ -244,6 +247,9 @@ export default {
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' },
@@ -262,7 +268,7 @@ export default {
}
this.tableData = response.data.list
this.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)

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

@@ -18,6 +18,7 @@
<template v-slot>
<cabinet-table
ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading"
:loading="tools.loading"
:api="url"
@@ -135,6 +136,8 @@ export default {
}
if (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, 'pageSize', this.pageObj.pageSize)
@@ -151,6 +154,9 @@ export default {
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' },
@@ -169,7 +175,7 @@ export default {
}
this.tableData = response.data.list
this.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)

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

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

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

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

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

@@ -17,6 +17,7 @@
<template v-slot>
<endpoint-table
ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading"
:loading="tools.loading"
:api="url"
@@ -119,6 +120,8 @@ export default {
getTableData () {
if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
}
const params = {
...this.searchLabel,
@@ -141,6 +144,9 @@ export default {
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' },
@@ -160,7 +166,7 @@ export default {
this.tableData = response.data.list
this.nowTime = this.utcTimeToTimezoneStr(response.time)
this.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)

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

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

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

@@ -15,6 +15,7 @@
<template v-slot>
<operation-log-table
ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading"
:loading="tools.loading"
:api="url"
@@ -125,6 +126,8 @@ export default {
}
if (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, 'pageSize', this.pageObj.pageSize)
@@ -140,7 +143,7 @@ export default {
}
this.tableData = response.data.list
this.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
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-remove-chart="delChart"
@on-add-group-item-chart="addGroupItem"
@refreshPanel="refreshPanel"
:loading="chartListLoading"
:chart-detail-info="chartDetailInfo"
></chart-list>
@@ -274,6 +275,9 @@ export default {
refresh () {
this.getTableData(this.obj.id)
},
refreshPanel () {
this.getData(this.filter)
},
refreshTime (st, et) {
const startTime = bus.timeFormate(st, '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.rightBox.loading = false
if (res.code === 200) {
const chartData = res.data.data
const chartData = res.data
this.chart = JSON.parse(JSON.stringify(chartData))
this.chart.panelId = this.showPanel.id
this.chart.panelName = this.showPanel.name
@@ -682,7 +686,13 @@ export default {
},
chartBySync () {
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
if (res.code === 200) {
this.getTableData(this.obj.id)
@@ -714,6 +724,7 @@ export default {
}
},
mounted () {
bus.$on('refreshPanel', this.refreshPanel)
this.scrollbarWrap = this.$refs.dashboardScrollbar
this.onScroll()
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('mouseleave', this.tableListLeave)
this.scrollbarWrap && this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
this.$store.dispatch('dispatchPanelLock', { flag: true })
}
}
</script>

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

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

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

@@ -15,6 +15,7 @@
<template v-slot>
<terminal-log-table
ref="dataTable"
:orderByFa="'id'"
v-loading="tools.loading"
:loading="tools.loading"
:api="url"
@@ -129,6 +130,8 @@ export default {
}
if (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, 'pageSize', this.pageObj.pageSize)
@@ -144,7 +147,7 @@ export default {
}
this.tableData = response.data.list
this.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
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>
<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>
<div v-if="showLayout.indexOf('pagination') > -1" class="nz-detail-view-pagination">
<slot name="pagination"></slot>
</div>
</div>
<div v-else class="no-data">
<div v-if="!dataLength" class="no-data">
<svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use>
</svg>

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

@@ -118,7 +118,7 @@ export default {
this.metaList.push(meta)
this.$emit('metaList')
} else {
let self = this
const self = this
const newCondition = Object.assign({}, self.meta)
newCondition.nameIsEditing = true
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
this.$get('/stat/alertMessage/trend', params).then((res) => {
if (!res.data) {
return
}
const alertDaysData = res.data.result ? res.data.result[0].values : []
const newWeekDays = JSON.parse(JSON.stringify(weekDays))
alertDaysData.forEach(item => {
@@ -552,7 +555,7 @@ export default {
arr.unshift(obj)
}
return arr
},
}
}
}
</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') }
],
states: [
{ value: '', label: i18n.t('overall.all') },
{ value: '1', label: i18n.t('overall.active') },
{ value: '2', label: i18n.t('overall.silence') },
{ value: '3', label: i18n.t('alert.list.expired') }
@@ -395,7 +396,7 @@ export const chartType = {
bar: 'bar',
table: 'table',
stat: 'stat',
guage: 'guage',
gauge: 'gauge',
pie: 'pie',
treemap: 'treemap',
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) {
// eslint-disable-next-line no-control-regex
const charReg = /^\w[\u0000-\uFFFF]*$/
const charReg = /^\S[\u0000-\uFFFF]*$/
/// ^\S[\u0000-\uFFFF]*$/
setTimeout(() => {
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-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 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 class="license-upload" v-if="!license.valid">
<el-upload
@@ -270,13 +270,17 @@ export default {
},
downloadLogin () {
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) {
// 兼容ie11
const blobObject = new Blob([res])
const blobObject = new Blob([res.data])
window.navigator.msSaveOrOpenBlob(blobObject, fileName)
} else {
const url = URL.createObjectURL(new Blob([res]))
const url = URL.createObjectURL(new Blob([res.data]))
const a = document.createElement('a')
document.body.appendChild(a) // 此处增加了将创建的添加到body当中
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
}
}
}
}

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

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

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

@@ -2,7 +2,7 @@ export default {
props: {},
data () {
return {
detailType: 'list',
detailType: localStorage.getItem('detail-view-' + this.tableId) || 'list',
detailViewRightObj: '',
detailViewLoading: false,
detailTimer: ''
@@ -16,10 +16,10 @@ export default {
if (this.detailType === flag) {
return
}
this.$refs.dataList.bottomBox.showSubList = false
if (this.orderBy) {
this.detailViewRightObj = ''
}
// this.$refs.dataList.bottomBox.showSubList = false
// if (this.orderBy) {
// this.detailViewRightObj = ''
// }
this.detailType = flag
let dataList = ''
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)
}
})
if (this.orderBy && this.$refs.dataTable.$refs.dataTable) {
if (this.orderBy) {
const index = this.orderBy.indexOf('-')
let orderBy = ''
let orderType = ''
@@ -78,8 +78,10 @@ export default {
orderBy = this.orderBy
orderType = 'ascending'
}
if (this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$refs.dataTable.$refs.dataTable.sort(orderBy, orderType)
}
}
}, 100)
},
detailViewRightShow (item) {

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

@@ -5,11 +5,12 @@ export default {
type: Array
},
targetTab: String,
from: String
from: String,
},
data () {
return {
subTableHeight: this.$tableHeight.openSubList.subList
subTableHeight: this.$tableHeight.openSubList.subList,
isSubList: true
}
},
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('timezoneOffset', moment.tz(param.timezone).format('Z'))
localStorage.setItem('nz-default-dateFormat', param.date_format)
this.$store.commit('setTimeFormatMain', param.date_format)
}
this.dateFormatTimer()
setTimeout(() => {

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

@@ -26,7 +26,7 @@ export default {
data () {
return {
operationWidth: '165', // 操作列宽
orderBy: {},
orderBy: null,
severityDataWeight: this.$store.getters.severityDataWeight
}
},
@@ -131,10 +131,11 @@ export default {
if (n) {
const index = n.indexOf('-')
if (index !== -1) {
this.orderBy[n.slice(index + 1)] = 'descending'
this.orderBy = { prop: n.slice(index + 1), order: 'descending' }
} 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
setTimeout(() => {
this.$get('/stat/alertMessage/trend', params).then((res) => {
// res = {
// msg: 'success',
// 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'
// }
if (!res.data) {
return
}
const alertDaysData = res.data.result ? res.data.result[0].values : []
const newWeekDays = JSON.parse(JSON.stringify(weekDays))
alertDaysData.forEach(item => {

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

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

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

@@ -170,6 +170,9 @@ export default {
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' },

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

@@ -176,6 +176,9 @@ export default {
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' },

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

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

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" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
</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 }">
<span>
<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')
},
{
id: 'guage',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
id: 'gauge',
name: this.$t('dashboard.panel.chartForm.typeVal.gauge.label')
},
{
id: 'treemap',
@@ -809,8 +809,8 @@ export default {
break
case 'stat':
case 'hexagon':
case 'guage':
if (this.oldType === 'stat' || this.oldType === 'guage' || this.oldType === 'hexagon') {
case 'gauge':
if (this.oldType === 'stat' || this.oldType === 'gauge' || this.oldType === 'hexagon') {
break
}
this.chartConfig.param = {

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

@@ -218,7 +218,7 @@ export default {
if (!params.groupId) {
params.groupId = 0
}
if (params.type !== 'guage') {
if (params.type !== 'gauge') {
delete params.param.min
delete params.param.max
}
@@ -445,7 +445,14 @@ export default {
deep: true,
immediate: true,
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) {
this.editChart.groupId = ''
}

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

@@ -53,7 +53,7 @@ export default {
case 'hexagon':
case 'bar':
case 'treemap':
case 'guage':
case 'gauge':
case 'pie':
return false
default: return false
@@ -70,7 +70,7 @@ export default {
case 'hexagon':
case 'bar':
case 'treemap':
case 'guage':
case 'gauge':
case 'pie':
return true
default: return false
@@ -88,7 +88,7 @@ export default {
case 'table':
case 'stat':
case 'hexagon':
case 'guage':
case 'gauge':
return false
default: return false
}
@@ -112,7 +112,7 @@ export default {
case 'stat':
case 'hexagon':
case 'bar':
case 'guage':
case 'gauge':
case 'treemap':
case 'pie':
return true
@@ -127,7 +127,7 @@ export default {
case 'pie':
case 'stat':
case 'hexagon':
case 'guage':
case 'gauge':
return false
case 'line':
case 'area':
@@ -144,7 +144,7 @@ export default {
case 'pie':
case 'stat':
case 'hexagon':
case 'guage':
case 'gauge':
return true
case 'line':
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')
},
{
id: 'guage',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
id: 'gauge',
name: this.$t('dashboard.panel.chartForm.typeVal.gauge.label')
},
{
id: 'treemap',
@@ -133,8 +133,8 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
},
{
id: 'guage',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
id: 'gauge',
name: this.$t('dashboard.panel.chartForm.typeVal.gauge.label')
},
{
id: 'treemap',
@@ -422,11 +422,11 @@ export default {
enableChange (type) {
switch (type) {
case 'valueMapping':
break;
break
case 'legend':
break;
break
case '':
break;
break
}
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')
},
{
id: 'guage',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
id: 'gauge',
name: this.$t('dashboard.panel.chartForm.typeVal.gauge.label')
},
{
id: 'treemap',
@@ -698,8 +698,8 @@ export default {
switch (type) {
case 'stat':
case 'hexagon':
case 'guage':
if (this.oldType === 'stat' || this.oldType === 'guage' || this.oldType === 'hexagon') {
case 'gauge':
if (this.oldType === 'stat' || this.oldType === 'gauge' || this.oldType === 'hexagon') {
break
}
this.chartConfig.param = {
@@ -804,12 +804,12 @@ export default {
},
systemNameChange (index) {
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 = ''
} else if (!this.expressionName[index]) {
this.expressionName[index] = this.systemNameShow[index].oldName
} else if (!this.chartConfig.param.datasource[index].name) {
this.chartConfig.param.datasource[index].name = this.systemNameShow[index].oldName
} else {
this.systemNameShow[index].oldName = this.expressionName[index]
this.systemNameShow[index].oldName = this.chartConfig.param.datasource[index].name
}
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-select>
</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"
class="right-box__select"
v-model="editProfile.theme"
@@ -68,7 +68,7 @@ import editRigthBox from '@/components/common/mixin/editRigthBox'
import { theme } from '@/components/common/js/constants'
export default {
name: 'modelbox',
name: 'profilebox',
components: {
},
props: {

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

@@ -1,4 +1,5 @@
<template>
<div style="height: 100%;">
<!--表格-->
<el-table
id="alertMessageTable"
@@ -7,6 +8,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
@@ -35,10 +37,9 @@
<template v-if="item.prop === 'alertRule'">
<div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
<span
@mouseenter="alertMessageHover(scope.row.alertRule, true, $event)"
@mouseleave="alertMessageHover(scope.row.alertRule, false)"
@mouseenter="alertMessageHover(scope.row, true, $event)"
@mouseleave="alertMessageHover(scope.row, false)"
>{{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>
<template v-else>-</template>
</template>
@@ -58,6 +59,7 @@
<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 v-else-if="item.prop === 'startAt'">{{utcTimeToTimezoneStr(scope.row.startAt)}}</span>
<span v-else-if="item.prop === 'lastAt'">{{utcTimeToTimezoneStr(scope.row.lastAt)}}</span>
<template v-else-if="item.prop === 'duration'">
<el-tooltip :disabled="!scope.row.endAt" effect="light" placement="right">
<div slot="content">
@@ -70,8 +72,8 @@
<template v-else-if="item.prop === 'labels'" class="labels">
<span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
<span
@mouseenter="labelHover(scope.row, item.label, true, $event)"
@mouseleave="labelHover(scope.row, item.label, false)">
@mouseenter="labelHover(scope.row, item.label, true, true, $event)"
@mouseleave="labelHover(scope.row, item.label, false, true,)">
<nz-alert-tag
v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'"
:label="item.label"
@@ -81,18 +83,12 @@
{{item.value}}
</nz-alert-tag>
</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>
</template>
<span v-else-if="item.prop === 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
{{scope.row['state'] == 1 ? "Pending" : ""}}
{{scope.row['state'] == 2 ? "Expired" : ""}}
<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>
@@ -128,6 +124,15 @@
<div v-else>&nbsp;</div>
</template>
</el-table>
<alertRuleInfo v-if="alertRuleShow" :id="alertRuleId" :severity-data="severityData" :that="alertRuleObj.alertRule" @showText="$emit('showText',alertRuleObj)"></alertRuleInfo>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
:alert-table-dialog="chartAlertList"
></alertLabel>
</div>
</template>
<script>
@@ -139,6 +144,8 @@ import chartDataFormat from '../../../charts/chartDataFormat'
import alertRuleInfo from '../../alert/alertRuleInfo'
import alertLabel from '../../alert/alertLabel'
import { calcDurationByStringTimeB } from '../../js/tools'
import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default {
name: 'alertMessageTable',
components: {
@@ -158,13 +165,13 @@ export default {
loading: Boolean,
chartAlertList: Boolean
},
mixins: [table, bus],
mixins: [table, bus, alertLabelMixin],
data () {
return {
/* 二级列表相关 */
tabList: [], // 二级列表的标签
tabDetailList: [], // 多个详情
stateOptions: alertMessageConstant.states,
// 详情相关
graphShow: false,
chartDatas: [],
@@ -176,6 +183,7 @@ export default {
chartUnit: 5,
severityData: [],
tableTitle: [
{
label: 'ID',
prop: 'id',
@@ -211,13 +219,27 @@ export default {
prop: 'description',
show: true,
minWidth: 200
}, {
label: this.$t('alert.list.state'),
prop: 'state',
show: true,
width: 100
// sortable: 'custom'
}, {
label: this.$t('alert.startAt'),
prop: 'startAt',
show: true,
width: 150,
sortable: 'custom'
}, {
},
// {
// label: this.$t('alert.lastAt'),
// prop: 'lastAt',
// show: true,
// width: 150,
// sortable: 'custom'
// },
{
label: this.$t('config.terminallog.duration'),
prop: 'duration',
show: true,
@@ -225,7 +247,10 @@ export default {
}
],
viewAssetState: false,
tableDataInitNum: 0
tableDataInitNum: 0,
alertRuleShow: false,
alertRuleId: '',
alertRuleObj: ''
}
},
computed: {
@@ -544,38 +569,17 @@ export default {
this.$refs.moduleBox.show(false, 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鼠标划入
alertMessageHover (item, loading, e) {
if (e) {
const dom = e.currentTarget
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)
},
// 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)
this.$set(item.alertRule, 'loading', loading)
this.alertRuleShow = loading
},
// Severity Label
returnSeverityLabel (key) {

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
<template>
<div style="height: 100%">
<el-table
id="roleTable"
ref="dataTable"
@@ -77,15 +78,9 @@
<span
v-if="scope.row.parent"
style="cursor: pointer"
@mouseenter="labelHover(scope.row, 'asset', true, $event)"
@mouseleave="labelHover(scope.row, 'asset', false)">
@mouseenter="labelHover(scope.row, 'asset', true, false, $event)"
@mouseleave="labelHover(scope.row, 'asset', false, false)">
{{scope.row.parent.name}}
<alertLabel
v-if="scope.row.loading"
:id="scope.row.pid"
:that="scope.row"
:type="'asset'"
></alertLabel>
</span>
<span v-else> - </span>
</template>
@@ -161,6 +156,13 @@
<div v-else>&nbsp;</div>
</template>
</el-table>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
></alertLabel>
</div>
</template>
<script>
@@ -169,9 +171,10 @@ import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools
// import bus from '@/libs/bus'
import alertLabel from '@/components/common/alert/alertLabel'
import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default {
name: 'assetTable',
mixins: [table],
mixins: [table, alertLabelMixin],
components: {
alertLabel: alertLabel,
alertDaysInfo
@@ -337,16 +340,6 @@ export default {
this.bottomBox.targetTab = 'endpoint'
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位信息
if (!start || !end) {
return ''

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

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

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

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

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

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

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

@@ -1,10 +1,12 @@
<template>
<div style="height: 100%">
<el-table
id="endpointTable"
ref="dataTable"
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
@@ -44,49 +46,31 @@
<template v-else-if="item.prop === 'project'">
<span
class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)"
>
{{scope.row[item.prop].name}}
</span>
<alertLabel
v-if="scope.row[item.prop] && scope.row[item.prop].loading"
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'project'"
></alertLabel>
</template>
<template v-else-if="item.prop === 'module'">
<span
class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)"
>
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
{{scope.row[item.prop].name}}
</span>
<alertLabel
v-if="scope.row[item.prop] && scope.row[item.prop].loading"
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'module'"
></alertLabel>
</template>
<template v-else-if="item.prop === 'asset'">
<span
class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)"
>
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
{{scope.row.asset.name}}
</span>
<alertLabel
v-if="scope.row[item.prop] && scope.row[item.prop].loading"
: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)">
@@ -106,8 +90,8 @@
</template>
<template v-else-if="item.prop === 'configs'">
<span class="configs-endpoint metrics"
@mouseenter="labelHover(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false, $event, true)">
@mouseenter="labelHover1(scope.row, item.prop, true, $event)"
@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' : ''}}]
</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">
@@ -202,19 +186,27 @@
<div v-else>&nbsp;</div>
</template>
</el-table>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
></alertLabel>
</div>
</template>
<script>
import table from '@/components/common/mixin/table'
import alertLabel from '../../alert/alertLabel'
import nzTooltip from '../../alert/nzTooltip'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default {
name: 'endpointTable',
components: {
alertLabel,
nzTooltip
},
mixins: [table],
mixins: [table, alertLabelMixin],
props: {
showOption: {
type: Boolean,
@@ -324,7 +316,7 @@ export default {
return str
},
// label 鼠标划入
labelHover (item, type, loading, e, slow) {
labelHover1 (item, type, loading, e, slow) {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -35,7 +35,7 @@
</template>
<template slot-scope="scope" :column="item">
<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">
<span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
<span>
@@ -137,7 +137,8 @@ export default {
show: true
}
],
exclusiveLabels: ['_id', 'severity', '__name__']
exclusiveLabels: ['_id', 'severity', '__name__'],
time: ''
}
},
computed: {
@@ -156,8 +157,9 @@ export default {
immediate: true,
deep: true,
handler (n) {
n.map(e => {
e.lastScrape = bus.timeFormate(e.lastScrape, this.timeFormatMain)
n.forEach(e => {
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"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"

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

@@ -6,6 +6,7 @@
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@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>
</div>
<el-dialog
id="viewGraphDialog"
v-if="graphShow"
:visible.sync="graphShow"
:show-close="false"
class="nz-dialog chart-fullscreen"
class="nz-dialog chart-fullscreen endpoint-query-metrics"
destroy-on-close
fullscreen
:modal-append-to-body="false"
@@ -464,12 +463,12 @@ export default {
/* if (refresh) {
this.getData(this.filter)
} */
},
}
},
computed: {
chartRightBoxShow () {
return this.$store.getters.getShowRightBox
},
}
},
created () {
// 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)
if (showTime) {
this.showTime = Object.assign({}, showTime)
this.searchTime = this.$parent.searchTime
}
if (this.showEmpty && this.defaultPick === 12) {
this.searchTime = []

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

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

73
nezha-fronted/src/components/page/alert/alertMessage.vue
View File

@@ -12,13 +12,13 @@
v-loading="tools.loading"
>
<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">
<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-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
</el-select>
<button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
<i class="nz-icon nz-icon-funnel"></i>
</button>
<pick-time v-model="searchTime" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
<pick-time v-model="searchTime" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
<button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
type="button" @click="showExportDialog">
<i class="nz-icon-download1 nz-icon"></i>
@@ -31,6 +31,7 @@
<template v-slot:default="slotProps">
<alert-message-table
ref="dataTable"
:orderByFa="orderBy"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
@@ -103,6 +104,7 @@
</el-dialog>
</div>
<el-dialog
id="viewGraphDialog"
v-if="graphShow"
:visible.sync="graphShow"
:show-close="false"
@@ -192,7 +194,7 @@ export default {
chartDatas: [],
sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
legend: [],
searchTime: [],
searchTime: [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())))],
searchTimeDialog: [],
searchTimeSelect: bus.getTimezontDateRange(),
currentMsg: {},
@@ -560,6 +562,15 @@ export default {
this.currentMsg = { ...row, alertRule: { ...res.data } }
this.$nextTick(() => {
this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
this.$store.dispatch('dispatchPanelTime', {
time: this.searchTimeDialog,
nowTimeType: {
id: 4,
text: this.$t('dashboard.panel.lastOneHour'),
type: 'hour',
value: 1
}
})
this.queryDate()
})
})
@@ -582,7 +593,7 @@ export default {
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.unit = this.currentMsg.unit
this.showFullscreen(true, chartInfo)
@@ -728,6 +739,8 @@ export default {
}
if (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, 'pageSize', this.pageObj.pageSize)
@@ -745,10 +758,10 @@ export default {
delete this.searchLabel.statistics
} */
this.tools.loading = true
if (state) {
delete this.searchLabel.startAt
delete this.searchLabel.endAt
}
// if (state) {
// delete this.searchLabel.startAt
// delete this.searchLabel.endAt
// }
const param = {
...this.searchLabel,
...this.searchCheckBox
@@ -761,43 +774,25 @@ export default {
this.tools.loading = false
if (response.code == 200) {
this.nowTime = this.utcTimeToTimezoneStr(response.time)
response.data.list.forEach((item) => {
const labels = JSON.parse(item.labels)
if (labels) {
Object.keys(labels).forEach((key) => {
if (item[key] && item[key].id) {
item.position = {}
item.loading = false
}
})
}
})
this.tableData = response.data.list
if (response.statistics && this.$route.path === '/alertMessage') {
this.setSearchData(response.statistics)
}
/* const axiosAll = []
this.$nextTick(() => {
this.tableData.forEach((item) => {
item.labels = JSON.parse(item.labels)
if (!this.isBuildIn(item.alertRule)) {
const paramStr = JSON.stringify(this.promQueryParamConvert(item))
axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
} else {
axiosAll.push('')
}
})
axios.all(axiosAll).then(res => {
res.forEach((item, index) => {
let current = []
const response2 = item.data
if (response2.data && response2.data.result && response2.data.result.length > 0) {
current = response2.data.result[0].value.map((item, i) => {
if (i == 0) {
return bus.computeTimezone(item)
} else {
return parseFloat(item).toFixed(2)
}
})
} else {
current = [null, null]
}
this.tableData[index].current = current
})
this.$set(this.tableData, [...this.tableData])
})
}) */
this.deleteBox.ids = ''
this.pageObj.total = response.data.total
} else {
this.$message.error(response.msg)
}
})
},

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