运行监控
This commit is contained in:
851673013@qq.com
parent
ecdc04930d
commit
e093ab7aab
|
|
@ -91,16 +91,23 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import * as moment from 'moment'
|
||||
export default {
|
||||
components: {},
|
||||
props: {},
|
||||
props: {
|
||||
callTheTrendData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
endAndstartTime: {},
|
||||
requestOverviewData: [
|
||||
{ name: '请求次数', tatol: '99999' },
|
||||
{ name: '请求成功次数', tatol: '99999' },
|
||||
{ name: '请求失败次数', tatol: '99999' },
|
||||
{ name: '平均时延', tatol: '99999' }
|
||||
{ name: '平均时延', tatol: '0' }
|
||||
], // 请求概况初始化数据
|
||||
requestOverviewBg: [
|
||||
{
|
||||
|
|
@ -134,6 +141,14 @@ export default {
|
|||
labalColor: '#1182fb'
|
||||
}
|
||||
],
|
||||
qingQiuQuShiTime: [],
|
||||
qingQiuQuShiValue: [],
|
||||
qingQiuQuShiValue2: [],
|
||||
shuJuLiuLiang: {
|
||||
time: [],
|
||||
chuvalue: [],
|
||||
ruvalue: []
|
||||
},
|
||||
abilityListTabData: ['请求次数', '请求失败次数', '平均延时'], // 能力排行榜tab切换
|
||||
newTab: '请求次数',
|
||||
abilityListData: [
|
||||
|
|
@ -180,7 +195,235 @@ export default {
|
|||
] // 能力排行数据初始化
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
watch: {
|
||||
callTheTrendData: {
|
||||
deep: true,
|
||||
handler () {
|
||||
this.endAndstartTime = this.callTheTrendData
|
||||
if (this.endAndstartTime.end != this.endAndstartTime.start) {
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query?' +
|
||||
'query=sum(increase(apigateway_http_status[1d]))&start=' +
|
||||
this.endAndstartTime.start +
|
||||
'&end=' +
|
||||
this.endAndstartTime.end +
|
||||
'&step=' +
|
||||
this.endAndstartTime.end +
|
||||
')'
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.data.result[0]) {
|
||||
this.requestOverviewData[0].tatol = parseInt(
|
||||
res.data.data.result[0].value[1]
|
||||
)
|
||||
} else {
|
||||
this.requestOverviewData[0].tatol = 0
|
||||
}
|
||||
})
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query?query=sum(apigateway_http_status{code=~"^4..|^5.."} offset ' +
|
||||
this.endAndstartTime.start +
|
||||
' - apigateway_http_status{code=~"^4..|^5.."} offset ' +
|
||||
this.endAndstartTime.end +
|
||||
')&time=' +
|
||||
this.endAndstartTime.end
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
this.requestOverviewData[1].tatol = parseInt(
|
||||
res.data.data.result[0].value[1]
|
||||
)
|
||||
} else {
|
||||
this.requestOverviewData[1].tatol = 0
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=' +
|
||||
this.endAndstartTime.end
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.data.result[0]) {
|
||||
this.requestOverviewData[0].tatol = parseInt(
|
||||
res.data.data.result[0].value[1]
|
||||
)
|
||||
} else {
|
||||
this.requestOverviewData[0].tatol = 0
|
||||
}
|
||||
})
|
||||
// 请求成功
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query?query=sum(apigateway_http_status%7Bcode%3D~%22%5E2..%22%7D)&time=' +
|
||||
this.endAndstartTime.end
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.data.result.length != 0) {
|
||||
this.requestOverviewData[1].tatol = parseInt(
|
||||
res.data.data.result[0].value[1]
|
||||
)
|
||||
this.requestOverviewData[2].tatol =
|
||||
this.requestOverviewData[0].tatol -
|
||||
this.requestOverviewData[1].tatol
|
||||
} else {
|
||||
this.requestOverviewData[1].tatol = 0
|
||||
this.requestOverviewData[2].tatol = 0
|
||||
}
|
||||
})
|
||||
// 平均时延
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query?query=histogram_quantile(0.99, sum(rate(apigateway_http_latency_bucket%5B1d%5D))%20by%20(le))&time=' +
|
||||
this.endAndstartTime.end -
|
||||
24 * 60 * 60
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.data.result[0]) {
|
||||
debugger
|
||||
this.requestOverviewData[3].tatol = parseInt(
|
||||
res.data.data.result[0].value[1]
|
||||
)
|
||||
} else {
|
||||
this.requestOverviewData[3].tatol = 0
|
||||
}
|
||||
})
|
||||
// 趋势接口
|
||||
const starttime = parseInt(
|
||||
(Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
|
||||
)
|
||||
// 失败
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%7Bcode%3D~%22%5E4..%7C%5E5..%22%7D%5B1d%5D))&start=' +
|
||||
starttime +
|
||||
'&end=' +
|
||||
this.endAndstartTime.end +
|
||||
'&step=86400'
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.data.result[0]) {
|
||||
res.data.data.result[0].values.map((item) => {
|
||||
this.qingQiuQuShiValue2.push(parseInt(item[1]))
|
||||
console.log(this.qingQiuQuShiTime)
|
||||
})
|
||||
this.myCharts1()
|
||||
this.myCharts3()
|
||||
} else {
|
||||
this.requestOverviewData[0].tatol = 0
|
||||
}
|
||||
})
|
||||
// 成功
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' +
|
||||
starttime +
|
||||
'&end=' +
|
||||
this.endAndstartTime.end +
|
||||
'&step=' +
|
||||
86400
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.data.result[0]) {
|
||||
this.qingQiuQuShiTime = []
|
||||
res.data.data.result[0].values.map((item, index) => {
|
||||
this.qingQiuQuShiTime.push(
|
||||
moment(item[0] * 1000).format('MM-DD')
|
||||
)
|
||||
this.qingQiuQuShiValue.push(
|
||||
parseInt(item[1]) - this.qingQiuQuShiValue2[index]
|
||||
)
|
||||
console.log(this.qingQiuQuShiTime)
|
||||
})
|
||||
this.myCharts1()
|
||||
this.myCharts3()
|
||||
} else {
|
||||
this.requestOverviewData[0].tatol = 0
|
||||
}
|
||||
})
|
||||
// 数据流量出口
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query_range?query=sum(increase(apigateway_bandwidth%7Btype%3D%22egress%22%7D%5B1d%5D))&start=' +
|
||||
starttime +
|
||||
'&end=' +
|
||||
this.endAndstartTime.end +
|
||||
'&step=' +
|
||||
86400
|
||||
)
|
||||
.then((res) => {
|
||||
this.shuJuLiuLiang.chuvalue = []
|
||||
this.shuJuLiuLiang.time = []
|
||||
if (res.data.data.result[0]) {
|
||||
res.data.data.result[0].values.map((item, index) => {
|
||||
this.shuJuLiuLiang.time.push(
|
||||
moment(item[0] * 1000).format('MM-DD')
|
||||
)
|
||||
this.shuJuLiuLiang.chuvalue.push(
|
||||
parseInt(item[1]) - this.qingQiuQuShiValue2[index]
|
||||
)
|
||||
console.log(this.qingQiuQuShiTime)
|
||||
})
|
||||
this.myCharts2()
|
||||
} else {
|
||||
this.requestOverviewData[0].tatol = 0
|
||||
}
|
||||
})
|
||||
// 数据流量入口
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query_range?query=sum(increase(apigateway_bandwidth%7Btype%3D%22ingress%22%7D%5B1d%5D))&start=' +
|
||||
starttime +
|
||||
'&end=' +
|
||||
this.endAndstartTime.end +
|
||||
'&step=' +
|
||||
86400
|
||||
)
|
||||
.then((res) => {
|
||||
this.shuJuLiuLiang.ruvalue = []
|
||||
if (res.data.data.result[0]) {
|
||||
res.data.data.result[0].values.map((item, index) => {
|
||||
this.shuJuLiuLiang.ruvalue.push(
|
||||
parseInt(item[1]) - this.qingQiuQuShiValue2[index]
|
||||
)
|
||||
console.log(this.qingQiuQuShiTime)
|
||||
})
|
||||
this.myCharts2()
|
||||
} else {
|
||||
this.requestOverviewData[0].tatol = 0
|
||||
}
|
||||
})
|
||||
// 时延
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query_range?query=histogram_quantile(0.99, sum(rate(apigateway_http_latency_bucket%7Btype%3D%22request%22%7D%5B1d%5D)) by (le))&start=' +
|
||||
starttime +
|
||||
'&end=' +
|
||||
this.endAndstartTime.end +
|
||||
'&step=' +
|
||||
86400
|
||||
)
|
||||
.then((res) => {
|
||||
debugger
|
||||
if (res.data.data.result[0]) {
|
||||
res.data.data.result[0].values.map((item, index) => {
|
||||
this.shuJuLiuLiang.ruvalue.push(
|
||||
parseInt(item[1]) - this.qingQiuQuShiValue2[index]
|
||||
)
|
||||
console.log(this.qingQiuQuShiTime)
|
||||
})
|
||||
this.myCharts2()
|
||||
} else {
|
||||
this.requestOverviewData[0].tatol = 0
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log('this.endAndstartTime', this.endAndstartTime)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// echarts通用方法
|
||||
|
|
@ -236,7 +479,7 @@ export default {
|
|||
color: '#ebebeb'
|
||||
}
|
||||
},
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8']
|
||||
data: this.qingQiuQuShiTime
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -313,7 +556,7 @@ export default {
|
|||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [20, 82, 91, 34, 50, 20, 10, 25]
|
||||
data: this.qingQiuQuShiValue
|
||||
},
|
||||
{
|
||||
name: '失败次数',
|
||||
|
|
@ -357,7 +600,7 @@ export default {
|
|||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [20, 10, 25, 45, 22, 65, 22, 20]
|
||||
data: this.qingQiuQuShiValue2
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -415,7 +658,7 @@ export default {
|
|||
color: '#ebebeb'
|
||||
}
|
||||
},
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8']
|
||||
data: this.shuJuLiuLiang.time
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -492,7 +735,7 @@ export default {
|
|||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [20, 82, 91, 34, 50, 20, 10, 25]
|
||||
data: this.shuJuLiuLiang.chuvalue
|
||||
},
|
||||
{
|
||||
name: '入口流量',
|
||||
|
|
@ -536,7 +779,7 @@ export default {
|
|||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [20, 10, 25, 45, 22, 65, 22, 20]
|
||||
data: this.shuJuLiuLiang.ruvalue
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -594,7 +837,7 @@ export default {
|
|||
color: '#ebebeb'
|
||||
}
|
||||
},
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8']
|
||||
data: this.qingQiuQuShiTime
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -671,7 +914,7 @@ export default {
|
|||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [20, 10, 25, 45, 22, 65, 22, 20]
|
||||
data: this.qingQiuQuShiValue2
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,40 @@
|
|||
<h1 class="topTitle">能力运行平台</h1>
|
||||
<div class="topNav">
|
||||
<div class="topTab">
|
||||
<div @click="timeSwitch('日')" :class="timeSwitchindex == '日' ? 'timeDown' : ''">当天</div>
|
||||
<div @click="timeSwitch('周')" :class="timeSwitchindex == '周' ? 'timeDown' : ''">最近一周</div>
|
||||
<div @click="timeSwitch('月')" :class="timeSwitchindex == '月' ? 'timeDown' : ''">最近一月</div>
|
||||
<div
|
||||
@click="timeSwitch('日')"
|
||||
:class="timeSwitchindex == '日' ? 'timeDown' : ''"
|
||||
>
|
||||
当天
|
||||
</div>
|
||||
<div
|
||||
@click="timeSwitch('周')"
|
||||
:class="timeSwitchindex == '周' ? 'timeDown' : ''"
|
||||
>
|
||||
最近一周
|
||||
</div>
|
||||
<div
|
||||
@click="timeSwitch('月')"
|
||||
:class="timeSwitchindex == '月' ? 'timeDown' : ''"
|
||||
>
|
||||
最近一月
|
||||
</div>
|
||||
</div>
|
||||
<div class="topTimme">
|
||||
<span>选择时间段</span>
|
||||
<el-date-picker v-model="timeStart" type="date" placeholder="请选择起始时间" :picker-options="pickerOptions0">
|
||||
<el-date-picker
|
||||
v-model="timeStart"
|
||||
type="date"
|
||||
placeholder="请选择起始时间"
|
||||
:picker-options="pickerOptions0"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="timeEnd" type="date" placeholder="请选择结束时间" :picker-options="pickerOptions1">
|
||||
<el-date-picker
|
||||
v-model="timeEnd"
|
||||
type="date"
|
||||
placeholder="请选择结束时间"
|
||||
:picker-options="pickerOptions1"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" round>确定</el-button>
|
||||
</div>
|
||||
|
|
@ -23,7 +48,9 @@
|
|||
<abnormal-situation></abnormal-situation>
|
||||
</div>
|
||||
<div class="capability-operation-monitoring-bottom">
|
||||
<analysis-of-the-request></analysis-of-the-request>
|
||||
<analysis-of-the-request
|
||||
:callTheTrendData="callTheTrendData"
|
||||
></analysis-of-the-request>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -31,7 +58,6 @@
|
|||
<script>
|
||||
import AbnormalSituation from './components/AbnormalSituation.vue'
|
||||
import AnalysisOfTheRequest from './components/AnalysisOfTheRequest.vue'
|
||||
import * as moment from 'moment'
|
||||
export default {
|
||||
components: {
|
||||
AbnormalSituation,
|
||||
|
|
@ -55,7 +81,10 @@ export default {
|
|||
return time.getTime() < this.timeStart
|
||||
}
|
||||
},
|
||||
callTheTrendData: []
|
||||
callTheTrendData: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
|
|
@ -63,27 +92,27 @@ export default {
|
|||
methods: {
|
||||
timeSwitch (name) {
|
||||
this.timeSwitchindex = name
|
||||
this.callTheTrendData = []
|
||||
if (name == '周') {
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const time = moment()
|
||||
.subtract('days', 6 - i)
|
||||
.format('MM-DD')
|
||||
this.callTheTrendData.push(time)
|
||||
} console.log('time', this.callTheTrendData, name)
|
||||
// callTheTrend(callTheTrendData.value)
|
||||
const start = parseInt(
|
||||
(Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
|
||||
)
|
||||
this.callTheTrendData.start = start
|
||||
console.log(
|
||||
'this.callTheTrendData',
|
||||
parseInt((Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000)
|
||||
)
|
||||
} else if (name == '月') {
|
||||
for (let i = 0; i < 31; i++) {
|
||||
const time = moment()
|
||||
.subtract('days', 30 - i)
|
||||
.format('MM-DD')
|
||||
this.callTheTrendData.push(time)
|
||||
} console.log('time', this.callTheTrendData, name)
|
||||
// callTheTrend(callTheTrendData.value)
|
||||
const start = parseInt(
|
||||
(Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
|
||||
)
|
||||
this.callTheTrendData.start = start
|
||||
console.log(
|
||||
'this.callTheTrendData',
|
||||
parseInt((Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000)
|
||||
)
|
||||
} else {
|
||||
const time = moment().startOf('day').format('YYYY-MM-DD 23:59:59')
|
||||
this.callTheTrendData.push(time)
|
||||
console.log(time, this.callTheTrendData)
|
||||
this.callTheTrendData.start = Date.parse(new Date()) / 1000
|
||||
this.callTheTrendData.end = Date.parse(new Date()) / 1000
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -161,7 +190,6 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue