forked from JointCloud/JCC-RIP
3.4
This commit is contained in:
parent
64d72cf2f7
commit
110bba17ff
|
@ -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": {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 }
|
||||
}
|
||||
]
|
||||
},
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
|
|
|
@ -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>
|
|
@ -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,
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue