Merge branch 'dev-3.2' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3
This commit is contained in:
zhangyu
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.props-box label {
|
||||
line-height: 32px;
|
||||
width: 100px;
|
||||
width: 120px;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -69,6 +69,8 @@ $--color-info: #999998;
|
||||
$--color-suspended: #9e9c98;
|
||||
// 监控色
|
||||
$--color-monitor: #98AEC5;
|
||||
// silence
|
||||
$--color-silence: #FFC107;
|
||||
|
||||
/* 6.table */
|
||||
// 表头字色
|
||||
|
||||
@@ -69,6 +69,8 @@ $--color-info: #999998;
|
||||
$--color-suspended: #9e9c98;
|
||||
// 监控色
|
||||
$--color-monitor: #98AEC5;
|
||||
// sliences
|
||||
$--color-silence: #FFC107;
|
||||
|
||||
/* 6.table */
|
||||
// 表头字色
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
return {
|
||||
...item,
|
||||
// hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
|
||||
loaded: true
|
||||
loaded: false
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
@@ -108,7 +111,7 @@ export default {
|
||||
let seriesIndex = 0
|
||||
originalDatas.forEach((originalData, expressionIndex) => {
|
||||
originalData.forEach((data, dataIndex) => {
|
||||
if (seriesIndex >= this.series.length) {// 只取跟series 一样长度作比较
|
||||
if (seriesIndex >= this.series.length) { // 只取跟series 一样长度作比较
|
||||
return
|
||||
}
|
||||
seriesIndex++
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -6,20 +6,20 @@
|
||||
<style>
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: "TestElement",
|
||||
export default {
|
||||
name: 'TestElement',
|
||||
props: {
|
||||
text : {
|
||||
text: {
|
||||
type: String,
|
||||
default: "x",
|
||||
default: 'x'
|
||||
}
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
console.log("### " + this.text + " ready!");
|
||||
},
|
||||
mounted: function () {
|
||||
console.log('### ' + this.text + ' ready!')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -15,97 +15,97 @@
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
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) {
|
||||
start (arg) {
|
||||
const {
|
||||
state,
|
||||
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) {
|
||||
set (arg) {
|
||||
const {
|
||||
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,34 +114,34 @@ const aspectRatio = {
|
||||
modifiers: [],
|
||||
enabled: false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function setEqualDelta({
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
function setRatio({
|
||||
function setRatio ({
|
||||
startRect,
|
||||
startCoords,
|
||||
ratio,
|
||||
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 };
|
||||
//# sourceMappingURL=aspectRatio.js.map
|
||||
export default makeModifier(aspectRatio, 'aspectRatio')
|
||||
export { aspectRatio }
|
||||
// # sourceMappingURL=aspectRatio.js.map
|
||||
|
||||
@@ -19,7 +19,7 @@ const chartTreemapOption = {
|
||||
return [
|
||||
'<div class="tooltip-title">' +
|
||||
formatUtil.encodeHTML(treePath.join('/')) +
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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")}}
|
||||
|
||||
@@ -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, '')
|
||||
|
||||
@@ -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`))
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -81,4 +81,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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: '|=',
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
<template v-slot>
|
||||
<scrape-endpoint-table
|
||||
ref="dataTable"
|
||||
:orderByFa="'id'"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<!-- <div v-if="!license.valid" class="license-info">INSTALLATION ID: {{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
52
nezha-fronted/src/components/common/mixin/alertLabelMixin.js
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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,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: {
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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' },
|
||||
|
||||
@@ -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' },
|
||||
|
||||
@@ -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`))
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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 = ''
|
||||
}
|
||||
|
||||
@@ -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':
|
||||
|
||||
@@ -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()
|
||||
}
|
||||
|
||||
@@ -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()
|
||||
},
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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>
|
||||
@@ -111,7 +107,7 @@
|
||||
<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 :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>
|
||||
@@ -128,6 +124,15 @@
|
||||
<div v-else> </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) {
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
:height="height"
|
||||
tooltip-effect="light"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<el-table
|
||||
id="roleTable"
|
||||
ref="dataTable"
|
||||
@@ -43,7 +44,7 @@
|
||||
<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"-->
|
||||
<!-- 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>
|
||||
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
|
||||
@@ -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>
|
||||
@@ -93,7 +88,7 @@
|
||||
<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>
|
||||
{{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>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'clientState'">
|
||||
@@ -161,6 +156,13 @@
|
||||
<div v-else> </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 ''
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -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">
|
||||
@@ -183,7 +167,7 @@
|
||||
<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" :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>
|
||||
@@ -202,19 +186,27 @@
|
||||
<div v-else> </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()
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
class="no-operation"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
:default-sort="orderBy"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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 = []
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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
Reference in New Issue
Block a user