This commit is contained in:
Bruce-Stark 2021-03-04 16:05:10 +08:00
parent 64d72cf2f7
commit 110bba17ff
5 changed files with 379 additions and 13 deletions

22
package-lock.json generated
View File

@ -2640,7 +2640,7 @@
},
"ajv": {
"version": "6.12.5",
"resolved": "https://registry.npm.taobao.org/ajv/download/ajv-6.12.5.tgz?cache=0&sync_timestamp=1600261920612&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv%2Fdownload%2Fajv-6.12.5.tgz",
"resolved": "https://registry.npm.taobao.org/ajv/download/ajv-6.12.5.tgz?cache=0&sync_timestamp=1600887235658&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv%2Fdownload%2Fajv-6.12.5.tgz",
"integrity": "sha1-GbDouuj0duW6ZmMAOHd1+xoApNo=",
"dev": true,
"requires": {
@ -5513,7 +5513,7 @@
},
"css-select": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/css-select/download/css-select-2.1.0.tgz",
"resolved": "https://registry.npm.taobao.org/css-select/download/css-select-2.1.0.tgz?cache=0&sync_timestamp=1600905030784&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-select%2Fdownload%2Fcss-select-2.1.0.tgz",
"integrity": "sha1-ajRlM1ZjWTSoG6ymjQJVQyEF2+8=",
"dev": true,
"requires": {
@ -5753,7 +5753,7 @@
},
"dedent": {
"version": "0.7.0",
"resolved": "https://registry.npm.taobao.org/dedent/download/dedent-0.7.0.tgz",
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
"integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
"dev": true
},
@ -6190,7 +6190,7 @@
},
"domhandler": {
"version": "2.4.2",
"resolved": "https://registry.npm.taobao.org/domhandler/download/domhandler-2.4.2.tgz",
"resolved": "https://registry.npm.taobao.org/domhandler/download/domhandler-2.4.2.tgz?cache=0&sync_timestamp=1600894137496&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomhandler%2Fdownload%2Fdomhandler-2.4.2.tgz",
"integrity": "sha1-iAUJfpM9ZehVRvcm1g9euItE+AM=",
"dev": true,
"requires": {
@ -6205,7 +6205,7 @@
},
"domutils": {
"version": "1.7.0",
"resolved": "https://registry.npm.taobao.org/domutils/download/domutils-1.7.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomutils%2Fdownload%2Fdomutils-1.7.0.tgz",
"resolved": "https://registry.npm.taobao.org/domutils/download/domutils-1.7.0.tgz?cache=0&sync_timestamp=1600892374691&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomutils%2Fdownload%2Fdomutils-1.7.0.tgz",
"integrity": "sha1-Vuo0HoNOBuZ0ivehyyXaZ+qfjCo=",
"dev": true,
"requires": {
@ -8277,7 +8277,7 @@
},
"http-signature": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/http-signature/download/http-signature-1.2.0.tgz?cache=0&sync_timestamp=1585807808622&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-signature%2Fdownload%2Fhttp-signature-1.2.0.tgz",
"resolved": "https://registry.npm.taobao.org/http-signature/download/http-signature-1.2.0.tgz?cache=0&sync_timestamp=1600868441269&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-signature%2Fdownload%2Fhttp-signature-1.2.0.tgz",
"integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
"dev": true,
"requires": {
@ -12665,7 +12665,7 @@
},
"postcss": {
"version": "7.0.34",
"resolved": "https://registry.npm.taobao.org/postcss/download/postcss-7.0.34.tgz?cache=0&sync_timestamp=1600825575756&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-7.0.34.tgz",
"resolved": "https://registry.npm.taobao.org/postcss/download/postcss-7.0.34.tgz?cache=0&sync_timestamp=1600879276844&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-7.0.34.tgz",
"integrity": "sha1-8rr1fDYBDffeQAmUDyFTLBbWXCA=",
"dev": true,
"requires": {
@ -13880,7 +13880,7 @@
},
"css-select": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/css-select/download/css-select-1.2.0.tgz",
"resolved": "https://registry.npm.taobao.org/css-select/download/css-select-1.2.0.tgz?cache=0&sync_timestamp=1600905030784&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-select%2Fdownload%2Fcss-select-1.2.0.tgz",
"integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
"dev": true,
"requires": {
@ -13898,7 +13898,7 @@
},
"domutils": {
"version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/domutils/download/domutils-1.5.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomutils%2Fdownload%2Fdomutils-1.5.1.tgz",
"resolved": "https://registry.npm.taobao.org/domutils/download/domutils-1.5.1.tgz?cache=0&sync_timestamp=1600892374691&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomutils%2Fdownload%2Fdomutils-1.5.1.tgz",
"integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
"dev": true,
"requires": {
@ -14180,7 +14180,7 @@
},
"rxjs": {
"version": "6.6.3",
"resolved": "https://registry.npm.taobao.org/rxjs/download/rxjs-6.6.3.tgz?cache=0&sync_timestamp=1600827269818&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frxjs%2Fdownload%2Frxjs-6.6.3.tgz",
"resolved": "https://registry.npm.taobao.org/rxjs/download/rxjs-6.6.3.tgz",
"integrity": "sha1-jKhGNcTaqQDA05Z6buesYCce5VI=",
"dev": true,
"requires": {
@ -16773,7 +16773,7 @@
},
"vue-loader": {
"version": "15.9.3",
"resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz?cache=0&sync_timestamp=1599639236822&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.3.tgz",
"resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz?cache=0&sync_timestamp=1600850451719&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.3.tgz",
"integrity": "sha1-DeNdnlVdPtU5aVFsrFziVTEpndo=",
"dev": true,
"requires": {

View File

@ -14,6 +14,9 @@ import App from './App'
import store from './store'
import router from './router'
import echarts from 'echarts'
import axios from 'axios'
import './icons' // icon
import './permission' // permission control
import './utils/error-log' // error log
@ -32,6 +35,8 @@ import * as filters from './filters' // global filters
// const { mockXHR } = require('../mock')
// mockXHR()
// }
Vue.prototype.$echarts = echarts
Vue.prototype.$ajax = axios
Vue.use(Element, {
size: Cookies.get('size') || 'small' // set element-ui default size

View File

@ -175,6 +175,19 @@ export const constantRoutes = [
}
]
},
{
path: '/prometheus',
component: Layout,
redirect: 'prometheus',
children: [
{
path: 'prometheus',
component: () => import('@/views/prometheus/index'),
name: 'prometheus',
meta: { title: 'Prom', icon: 'el-icon-s-management', affix: true }
}
]
},
// ],
// },
// {

View File

@ -0,0 +1,348 @@
<template>
<div class="serviceInfo">
<el-card class="chartCard" style="height:100px">
<h4>
Prometheus
</h4>
</el-card>
<el-row>
<el-col :span="12">
<el-card style="width: 600px;height: 360px">
<div id="node_load1_chart" style="width: 560px;height:300px;" />
</el-card>
</el-col>
<el-col :span="12">
<el-card style="width: 600px;height: 360px">
<div id="avg_node_load1_chart" style="width: 560px;height:300px;" />
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-card style="width: 600px;height: 360px">
<div id="process_cpu_seconds_total_chart" style="width: 560px;height:300px;" />
</el-card>
</el-col>
<el-col :span="12">
<el-card style="width: 600px;height: 360px">
<div id="avg_process_cpu_seconds_total_chart" style="width: 560px;height:300px;" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'Chart',
props: {
refresh_interval: null
},
data() {
return {
avg_node_load1_data: {},
node_load1_data: {},
process_cpu_seconds_total_data: {},
avg_process_cpu_seconds_total_data: {},
timer: null,
interval: 1000
}
},
beforeDestroy() {
clearInterval(this.timer)
},
created: function() {
},
mounted: function() {
this.avg_node_load1()
this.node_load1()
this.process_cpu_seconds_total()
this.avg_process_cpu_seconds_total()
},
methods: {
avg_node_load1() {
const myChart = this.$echarts.init(document.getElementById('avg_node_load1_chart'))
let localtime = Math.round(new Date().getTime() / 1000)
let url = 'http://192.168.0.86:9090/api/v1/query_range?query=avg%28node_load1%7B%7D%29%0A%0A&start=' + (localtime - 3600).toString() + '&end=' + localtime + '&step=14'
this.$ajax.get(url).then(response => {
this.avg_node_load1_data = response.data.data.result[0].values
this.avg_node_load1_data.forEach(function(el) {
el[0] = new Date(el[0] * 1000)
})
const option = {
title: {
text: '服务器内存平均负载情况'
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: [{
data: this.avg_node_load1_data,
type: 'line',
symbol: 'none',
smooth: true
}]
}
myChart.setOption(option)
}).catch(function(error) {
alert(error)
})
this.timer = setInterval(() => {
localtime = Math.round(new Date().getTime() / 1000)
url = 'http://192.168.0.86:9090/api/v1/query_range?query=avg%28node_load1%7B%7D%29%0A%0A&start=' + (localtime - 3600).toString() + '&end=' + localtime + '&step=14'
this.$ajax.get(url).then(response => {
this.avg_node_load1_data = response.data.data.result[0].values
this.avg_node_load1_data.forEach(function(el) {
el[0] = new Date(el[0] * 1000)
})
const option = {
title: {
text: '服务器内存平均负载情况'
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: [{
data: this.avg_node_load1_data,
type: 'line',
symbol: 'none',
smooth: true
}]
}
myChart.setOption(option)
}).catch(function(error) {
alert(error)
})
}, this.interval)
},
node_load1() {
const myChart = this.$echarts.init(document.getElementById('node_load1_chart'))
let localtime = Math.round(new Date().getTime() / 1000)
let url = 'http://192.168.0.86:9090/api/v1/query_range?query=node_load1%7B%7D&start=' + (localtime - 3600).toString() + '&end=' + localtime + '&step=14'
this.$ajax.get(url).then(response => {
this.node_load1_data = response.data.data.result
const series = []
this.node_load1_data.forEach(function(el) {
el.values.forEach(function(temp) {
temp[0] = new Date(temp[0] * 1000)
})
series.push({
data: el.values,
type: 'line',
symbol: 'none',
smooth: true
})
})
const option = {
title: {
text: '服务器内存所有负载情况'
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: series
}
myChart.setOption(option)
}).catch(function(error) {
alert(error)
})
this.timer = setInterval(() => {
localtime = Math.round(new Date().getTime() / 1000)
url = 'http://192.168.0.86:9090/api/v1/query_range?query=node_load1%7B%7D&start=' + (localtime - 3600).toString() + '&end=' + localtime + '&step=14'
this.$ajax.get(url).then(response => {
this.node_load1_data = response.data.data.result
const series = []
this.node_load1_data.forEach(function(el) {
el.values.forEach(function(temp) {
temp[0] = new Date(temp[0] * 1000)
})
series.push({
data: el.values,
type: 'line',
symbol: 'none',
smooth: true
})
})
const option = {
title: {
text: '服务器内存所有负载情况'
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: series
}
myChart.setOption(option)
}).catch(function(error) {
alert(error)
})
}, this.interval)
},
process_cpu_seconds_total() {
const myChart = this.$echarts.init(document.getElementById('process_cpu_seconds_total_chart'))
let localtime = Math.round(new Date().getTime() / 1000)
let url = 'http://192.168.0.86:9090/api/v1/query_range?query=%281+-+avg%28rate%28node_cpu_seconds_total%7Bmode%3D%22idle%22%7D%5B1m%5D%29%29+by+%28instance%29%29*100&start=' + (localtime - 3600).toString() + '&end=' + localtime + '&step=14'
this.$ajax.get(url).then(response => {
this.process_cpu_seconds_total_data = response.data.data.result
const series = []
this.process_cpu_seconds_total_data.forEach(function(el) {
el.values.forEach(function(temp) {
temp[0] = new Date(temp[0] * 1000)
})
series.push({
data: el.values,
type: 'line',
symbol: 'none',
smooth: true
})
})
const option = {
title: {
text: '服务器CPU所有负载情况'
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: series
}
myChart.setOption(option)
}).catch(function(error) {
alert(error)
})
this.timer = setInterval(() => {
localtime = Math.round(new Date().getTime() / 1000)
url = 'http://192.168.0.86:9090/api/v1/query_range?query=%281+-+avg%28rate%28node_cpu_seconds_total%7Bmode%3D%22idle%22%7D%5B1m%5D%29%29+by+%28instance%29%29*100&start=' + (localtime - 3600).toString() + '&end=' + localtime + '&step=14'
this.$ajax.get(url).then(response => {
this.process_cpu_seconds_total_data = response.data.data.result
const series = []
this.process_cpu_seconds_total_data.forEach(function(el) {
el.values.forEach(function(temp) {
temp[0] = new Date(temp[0] * 1000)
})
series.push({
data: el.values,
type: 'line',
symbol: 'none',
smooth: true
})
})
const option = {
title: {
text: '服务器CPU所有负载情况'
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: series
}
myChart.setOption(option)
}).catch(function(error) {
alert(error)
})
}, this.interval)
},
avg_process_cpu_seconds_total() {
const myChart = this.$echarts.init(document.getElementById('avg_process_cpu_seconds_total_chart'))
let localtime = Math.round(new Date().getTime() / 1000)
let url = 'http://192.168.0.86:9090/api/v1/query_range?query=avg%281+-+avg%28rate%28node_cpu_seconds_total%7Bmode%3D%22idle%22%7D%5B1m%5D%29%29+by+%28instance%29%29+*+100%0A&start=' + (localtime - 3600).toString() + '&end=' + localtime + '&step=14'
this.$ajax.get(url).then(response => {
this.avg_process_cpu_seconds_total_data = response.data.data.result
const series = []
this.avg_process_cpu_seconds_total_data.forEach(function(el) {
el.values.forEach(function(temp) {
temp[0] = new Date(temp[0] * 1000)
})
series.push({
data: el.values,
type: 'line',
symbol: 'none',
smooth: true
})
})
const option = {
title: {
text: '服务器CPU平均负载情况'
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: series
}
myChart.setOption(option)
}).catch(function(error) {
alert(error)
})
this.timer = setInterval(() => {
localtime = Math.round(new Date().getTime() / 1000)
url = 'http://192.168.0.86:9090/api/v1/query_range?query=avg%281+-+avg%28rate%28node_cpu_seconds_total%7Bmode%3D%22idle%22%7D%5B1m%5D%29%29+by+%28instance%29%29+*+100%0A&start=' + (localtime - 3600).toString() + '&end=' + localtime + '&step=14'
this.$ajax.get(url).then(response => {
this.avg_process_cpu_seconds_total_data = response.data.data.result
const series = []
this.avg_process_cpu_seconds_total_data.forEach(function(el) {
el.values.forEach(function(temp) {
temp[0] = new Date(temp[0] * 1000)
})
series.push({
data: el.values,
type: 'line',
symbol: 'none',
smooth: true
})
})
const option = {
title: {
text: '服务器CPU平均负载情况'
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: series
}
myChart.setOption(option)
}).catch(function(error) {
alert(error)
})
}, this.interval)
}
}
}
</script>
<style scoped>
</style>

View File

@ -40,9 +40,9 @@ module.exports = {
'/': {
ws: false,
// zhangjie
target: 'http://192.168.0.250:30881/',
// target: 'http://192.168.0.250:30881/',
// tansheng
// target: 'http://192.168.0.86:30881/',
target: 'http://192.168.0.86:30881/',
// target: 'http://192.168.0.121:30881/',
// changeOrigin: true,
},