feat: monitor dev

2 years ago · f97cee2429
parent 561744b506
commit f97cee2429
4 changed files with 241 additions and 46 deletions
--- a/threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue
+++ b/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',
-          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,
--- a/threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js
+++ b/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.$_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);
+    },
+  },
+};
--- a/threadpool/console/src/views/hippo4j/monitor/index.vue
+++ b/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="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>
--- a/threadpool/console/src/views/hippo4j/monitor/index1.vue
+++ b/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>