feat: monitor dev

threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue

@@ -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',
+          // stack: 'Total',
-          areaStyle: {},
+          // 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({
-        tooltip: {
+        title: {
-          trigger: 'axis',
+          text: this.title,
-          axisPointer: {
+          textStyle: {
-            type: 'cross',
+            fontSize: '16px'
-            label: {
-              backgroundColor: '#6a7985',
           },
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          padding: 0,
         },
+        tooltip: {
+          trigger: 'axis',
+          ...cusFormatterObj
         },
         legend: {
           data: this.chartData,
+          icon: 'circle',
+          top: 0,
         },
         toolbox: {
           feature: {},
         },
         grid: {
-          left: '3%',
+          left: 0,
-          right: '4%',
+          right: 0,
-          bottom: '3%',
+          top: '18%',
+          bottom: '0',
           containLabel: true,
         },
-        xAxis: [
+        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,

threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js

@@ -1,28 +1,28 @@
-import { debounce } from '@/utils'
+import { debounce } from '@/utils';
 
 export default {
   data() {
     return {
-      $_sidebarElm: null
+      $_sidebarElm: null,
-    }
+    };
   },
   mounted() {
-    this.$_initResizeEvent()
+    this.$_initResizeEvent();
-    this.$_initSidebarResizeEvent()
+    this.$_initSidebarResizeEvent();
   },
   beforeDestroy() {
-    this.$_destroyResizeEvent()
+    this.$_destroyResizeEvent();
-    this.$_destroySidebarResizeEvent()
+    this.$_destroySidebarResizeEvent();
   },
   // to fixed bug when cached by keep-alive
   // https://github.com/PanJiaChen/vue-element-admin/issues/2116
   activated() {
-    this.$_initResizeEvent()
+    this.$_initResizeEvent();
-    this.$_initSidebarResizeEvent()
+    this.$_initSidebarResizeEvent();
   },
   deactivated() {
-    this.$_destroyResizeEvent()
+    this.$_destroyResizeEvent();
-    this.$_destroySidebarResizeEvent()
+    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 = document.getElementsByClassName('sidebar-container')[0];
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+      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);
-  }
+    },
-}
+  },
+};

threadpool/console/src/views/hippo4j/monitor/index.vue

@@ -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="center-chart-wrapper">
-    <div class="bottom-chart-wraper"></div>
+
+      <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;
+  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>

threadpool/console/src/views/hippo4j/monitor/index1.vue

@@ -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>