msb-public
/
hippo4j
mirror of https://github.com/longtai-cn/hippo4j
1
0
Code Issues Projects Releases Wiki Activity

feat: monitor dev

Browse Source
pull/1486/head
yikai 2 years ago
parent 561744b506
commit f97cee2429
4 changed files with 241 additions and 46 deletions
Show Stats Download Patch File Download Diff File

92
threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue
Unescape View File

@ -32,6 +32,14 @@ export default {
type: Array,
required: true,
},
title: {
type: String,
default: '标题'
},
cusFormatter: {
type: Boolean,
default: false
}
},
data() {
return {
@ -43,6 +51,7 @@ export default {
chartData: {
deep: true,
handler(val) {
console.log('val:::', val)
this.setOptions(val);
},
},
@ -67,11 +76,19 @@ export default {
},
setOptions() {
const series = this.chartData.map((item) => {
const other = !item.show ? {
symbolSize: 0,
showSymbol: false,
lineStyle: {
width: 0,
color: 'rgba(0, 0, 0, 0)'
}
} : {}
return {
name: item.name,
type: 'line',
stack: 'Total',
areaStyle: {},
// stack: 'Total',
// areaStyle: {},
label: {
position: 'top',
},
@ -82,40 +99,81 @@ export default {
smooth: true,
data: item.data,
showSymbol: false,
...other
};
});
let numbers = this.chartData && this.chartData[0]?.data;
let maxNumber = Math.max(...numbers);
const cusFormatterObj = this.cusFormatter ? {
formatter: (params) => {
const taskAll = params.find(item => item.seriesName === '任务总数')
const taskCom = params.find(item => item.seriesName === '区间任务完成数')
const taskReject = params.find(item => item.seriesName === '拒绝总数')
return `<div>
<div style="padding: 6px 0;font-weight: bolder;">${taskCom?.seriesName}：${taskCom?.value}</div>
<div style="width: 100%,height: 0px;border-bottom: 1px dashed #ddd;padding: 6px 0;"></div>
<div style="padding: 6px 0;">${taskAll?.seriesName}：${taskAll?.value}</div>
<div style="padding: 6px 0;">${taskReject?.seriesName}：${taskReject?.value}</div>
</div>`
}
} : {};
this.chart.setOption({
title: {
text: this.title,
textStyle: {
fontSize: '16px'
},
left: 0,
right: 0,
top: 0,
bottom: 0,
padding: 0,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
...cusFormatterObj
},
legend: {
data: this.chartData,
icon: 'circle',
top: 0,
},
toolbox: {
feature: {},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
left: 0,
right: 0,
top: '18%',
bottom: '0',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: this.times,
xAxis: {
type: 'category',
boundaryGap: false,
data: this.times,
nameTextStyle: {
width: '20px'
},
],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: true,
lineStyle: {
color: '#ddd'
}
},
},
yAxis: [
{
type: 'value',
max: maxNumber,
},
],
series: series,

46
threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js
Unescape View File

@ -1,28 +1,28 @@
import { debounce } from '@/utils'
import { debounce } from '@/utils';
export default {
data() {
return {
$_sidebarElm: null
}
$_sidebarElm: null,
};
},
mounted() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
this.$_initResizeEvent();
this.$_initSidebarResizeEvent();
},
beforeDestroy() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
this.$_destroyResizeEvent();
this.$_destroySidebarResizeEvent();
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
this.$_initResizeEvent();
this.$_initSidebarResizeEvent();
},
deactivated() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
this.$_destroyResizeEvent();
this.$_destroySidebarResizeEvent();
},
methods: {
// use $_ for mixins properties
@ -30,27 +30,29 @@ export default {
$_resizeHandler() {
return debounce(() => {
if (this.chart) {
this.chart.resize()
this.chart.resize();
}
}, 100)()
}, 100)();
},
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
window.addEventListener('resize', this.$_resizeHandler);
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
window.removeEventListener('resize', this.$_resizeHandler);
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
this.$_resizeHandler();
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
this.$_sidebarElm &&
this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}
}
}
this.$_sidebarElm &&
this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
},
},
};

145
threadpool/console/src/views/hippo4j/monitor/index.vue
Unescape View File

@ -3,40 +3,175 @@
<div class="monitor-wrapper">
<div class="info-wrapper"></div>
<div class="search-wrapper"></div>
<div class="center-chart-wrapper"></div>
<div class="bottom-chart-wraper"></div>
<div class="center-chart-wrapper">
<line-chart title="任务" :chart-data="lineChartData" :times="times" height="100%" :cus-formatter="true" />
</div>
<div class="bottom-chart-wraper">
<div class="inner-chart">
<line-chart title="活跃线程数" :chart-data="activeSizeList" :times="times" height="100%" />
</div>
<div class="inner-chart">
<line-chart title="活跃线程数" :chart-data="poolSizeList" :times="times" height="100%" />
</div>
<div class="inner-chart">
<line-chart title="活跃线程数" :chart-data="queueSizeList" :times="times" height="100%" />
</div>
<div class="inner-chart">
<line-chart title="活跃线程数" :chart-data="rangeRejectCountList" :times="times" height="100%" />
</div>
</div>
</div>
</template>
<script></script>
<script>
import * as threadPoolApi from '@/api/hippo4j-threadPool';
import * as monitorApi from '@/api/hippo4j-monitor';
import LineChart from './components/LineChart.vue';
const params = {
"current": 1,
"size": 10,
"itemId": "dynamic-threadpool-example",
"tpId": "message-produce",
"tenantId": "prescription",
"identify": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662",
"instanceId": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662"
}
export default {
name: 'Monitor',
components: {
LineChart,
},
data() {
return {
lineChartData: [],
times: [],
activeSizeList: [],
poolSizeList: [],
queueSizeList: [],
rangeRejectCountList: []
}
},
created() {
this.fetchData()
this.fetchChartData()
},
methods: {
fetchData() {
threadPoolApi.info(params).then((res) => {
this.temp = res;
});
},
fetchChartData() {
monitorApi.active(params).then(res => {
this.lineChartData = [
{
name: '区间任务完成数',
data: res?.rangeCompletedTaskCountList,
show: true
}, {
name: '拒绝总数',
data: res?.rejectCountList,
show: false,
itemStyle: {
opacity: 0,
},
textStyle: {
opacity: 0,
}
}, {
name: '任务总数',
data: res?.completedTaskCountList,
show: false,
itemStyle: {
opacity: 0,
},
textStyle: {
opacity: 0,
}
},]
this.times = res?.times.map(item => {
const list = item.split(':')
list.pop()
return list.join(':')
})
this.activeSizeList = [{
name: '活跃线程数',
data: res?.activeSizeList,
show: true
}]
this.poolSizeList = [{
name: '线程数',
data: res?.poolSizeList,
show: true
}]
this.queueSizeList = [{
name: '队列元素数',
data: res?.queueSizeList,
show: true
}]
this.rangeRejectCountList = [{
name: '拒绝数',
data: res?.rangeRejectCountList,
show: true
}]
})
}
}
}
</script>
<style lang="scss" scoped>
.monitor-wrapper {
width: 100%;
min-height: calc(100vh - 50px);
height: calc(100vh - 50px);
display: grid;
grid-template-rows: 60px 1fr 2fr;
grid-template-columns: 300px 2fr 1fr;
background-color: #ebebf3;
gap: 10px;
padding: 10px;
> div {
box-sizing: border-box;
>div {
border-radius: 8px;
background-color: #fff;
padding: 12px;
}
.chart-title {
font-size: 16px;
font-weight: bolder;
margin: 0;
}
.info-wrapper {
grid-row: 1 / 4;
grid-column: 1 / 2;
}
.search-wrapper {
grid-row: 1 / 2;
grid-column: 2 / 4;
}
.center-chart-wrapper {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
.bottom-chart-wraper {
grid-row: 3 / 4;
grid-column: 2 / 4;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
.inner-chart {
grid-column: span 1;
grid-row: span 1;
}
}
}
</style>

4
threadpool/console/src/views/hippo4j/monitor/index1.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<div class="dashboard-editor-container">
<!-- <div class="filter-container">
<div class="filter-container">
<el-select
v-model="listQuery.tenantId"
:placeholder="$t('tenantManage.tenantRequired')"
@ -144,7 +144,7 @@
</el-card>
</el-col>
</el-row>
</section> -->
</section>
</div>
</template>

Write Preview
Loading…
Cancel
Save