feat:tenant style + thread pool query

threadpool/console/src/App.vue

@@ -18,21 +18,23 @@ export default {
       .getCurrentUser(userName)
       .then((response) => {
         const { resources } = response;
-        resources.map((item) => ({
-          ...item,
-          tenantId: item.resource
-        }))
         if (response.role == 'ROLE_ADMIN') {
           resources.unshift({
             action: "rw",
             resource: this.$t('common.allTenant'),
             username: userName,
             tenantId: this.$t('common.allTenant'),
+            index: 0,
           })
         }
-        this.$store.dispatch('tenant/setTenantList', resources)
+        const resourcesRes = resources.map((item, index) => ({
+            ...item,
+            tenantId: item.resource,
+            index: index,
+          }))
+        this.$store.dispatch('tenant/setTenantList', resourcesRes)
         if (!this.tenantInfo.resource) {
-          this.$store.dispatch('tenant/setTenantInfo', resources[0])
+          this.$store.dispatch('tenant/setTenantInfo', resourcesRes[0])
           console.log("ssss", this.tenantInfo)
         }
       })

threadpool/console/src/layout/components/Navbar.vue

@@ -18,12 +18,12 @@
         <!--        </el-tooltip>-->
         
       </template>
-      <el-select class="select-tenant" v-model="tenant.resource" filterable @change="changeTenant">
+      <el-select class="select-tenant" v-model="tenant.index" filterable @change="changeTenant">
         <el-option
           v-for="(item, index) in tenantList"
           :key="index"
           :label="item.resource"
-          :value="index">
+          :value="item.index">
         </el-option>
       </el-select>
       <langChange />
@@ -65,7 +65,7 @@
           action: '',
           resource: '',
           username: ''
-        }
+        },
       }
     },
     components: {
@@ -96,6 +96,7 @@
       },
       async logout() {
         this.$cookie.delete('userName')
+        this.$cookie.delete('tenantInfo')
         await this.$store.dispatch('user/logout')
         this.$router.push(`/login?redirect=${this.$route.fullPath}`)
       },
@@ -105,22 +106,24 @@
         .getCurrentUser(userName)
         .then((response) => {
           const { resources } = response;
-          resources.map((item) => ({
-            ...item,
-            tenantId: item.resource
-          }))
           if (response.role == 'ROLE_ADMIN') {
             resources.unshift({
               action: "rw",
               resource: this.$t('common.allTenant'),
               username: userName,
               tenantId: this.$t('common.allTenant'),
+              index: 0,
             })
           }
-          this.$store.dispatch('tenant/setTenantList', resources)
+          const resourcesRes = resources.map((item, index) => ({
-          this.$store.dispatch('tenant/setTenantInfo', this.tenantInfo || resources[0])
+            ...item,
-          this.tenant = this.tenantInfo || resources[0]
+            tenantId: item.resource,
-          console.log("isResour", resources[0], this.tenant)
+            index: index,
+          }))
+          this.$store.dispatch('tenant/setTenantList', resourcesRes)
+          this.tenant = JSON.parse(this.$cookie.get('tenantInfo')) || resourcesRes[0]
+          this.$store.dispatch('tenant/setTenantInfo', this.tenant || resourcesRes[0])
+          this.$cookie.set('tenantInfo', JSON.stringify(this.tenant));
         })
         .catch(() => {});
         
@@ -130,11 +133,13 @@
         let tenant = {
           tenantId: this.tenantList[index].resource,
           resource: this.tenantList[index].resource,
+          index: this.tenantList[index].index,
           current: 1,
           desc: true,
           size: 10,
         }
         this.$store.dispatch('tenant/setTenantInfo', tenant)
+        this.$cookie.set('tenantInfo', JSON.stringify(tenant));
         let isAllTenant = tenant.tenantId == i18nConfig.messages.zh.common.allTenant || tenant.tenantId == i18nConfig.messages.en.common.allTenant
         tenant.tenantId = isAllTenant ? '' : tenant.tenantId
         await jobProjectApi.list(tenant).then((response) => {
@@ -199,6 +204,7 @@
         width: 150px;
       }
 
+
       .right-menu-item {
         display: inline-block;
         padding: 0 8px;

threadpool/console/src/locale/langChange.vue

@@ -11,7 +11,7 @@
           :key="item.lang"
           :command="item.lang"
         >
-          <span class="dropdown-item-text" :data-active="item.lang === currentLang">{{ item.name }}</span>
+          <span :data-active="item.lang === currentLang" :class="{chooseItem: item.lang === currentLang}" >{{ item.name }}</span>
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
@@ -53,11 +53,6 @@ export default {
       user.getCurrentUser(userName)
       .then((response) => {
         const { resources } = response;
-        resources.map((item) => ({
-          ...item,
-          tenantId: item.resource
-        }))
-
         //change lang =》 change global tenantInfo
         if (response.role == 'ROLE_ADMIN') {
           //判断tenantInfo是否为所有租户选项
@@ -66,20 +61,34 @@ export default {
           let alreadyHasAll = resources[0] == i18nConfig.messages.zh.common.allTenant || resources[0] == i18nConfig.messages.en.common.allTenant        
           if (alreadyHasAll) {
             this.$set(resources[0], 'resource', this.$t('common.allTenant'))
-            this.$store.dispatch('tenant/setTenantList', resources)
+            const resourcesRes = resources.map((item, index) => ({
+              ...item,
+              tenantId: item.resource,
+              index: index,
+            }))
+            this.$store.dispatch('tenant/setTenantList', resourcesRes)
+            if (isAllTenant) {
+              this.$store.dispatch('tenant/setTenantInfo', resources[0])
+            }
           } else {
             resources.unshift({
               action: "rw",
               resource: this.$t('common.allTenant'),
               username: userName,
               tenantId: this.$t('common.allTenant'),
+              index: 0,
             })
-            this.$store.dispatch('tenant/setTenantList', resources)
+            const resourcesRes = resources.map((item, index) => ({
-          }
+              ...item,
+              tenantId: item.resource,
+              index: index,
+            }))
+            this.$store.dispatch('tenant/setTenantList', resourcesRes)
             if (isAllTenant) {
               this.$store.dispatch('tenant/setTenantInfo', resources[0])
             }
           }
+        }
       })
     }
   }
@@ -93,9 +102,17 @@ export default {
       cursor: pointer;
     }
   }
-  .dropdown-item-text{
+  ::v-deep .el-dropdown-menu__item:not(.is-disabled):hover {
-    &[data-active=true] {
+    background: #f5f7fa;
-      color: var(--jjext-color-dropdown-text) !important;
+    color: #606266;
   }
+
+  .el-icon--right {
+    color: #c0c4cc;
+  }
+
+  .chooseItem {
+    font-weight: bold;
+    color: #1890ff;
   }
 </style>

threadpool/console/src/store/modules/tenant.js

@@ -26,17 +26,26 @@ const actions = {
           if (response.role == 'ROLE_ADMIN') {
             resources.unshift({
               action: "rw",
-              resource: "所有租户",
+              resource: this.$t('common.allTenant'),
-              username: userName
+              username: userName,
+              tenantId: this.$t('common.allTenant'),
+              index: 0,
             })
           }
-          commit('SET_TENANT_LIST', resources)
+          const resourcesRes = resources.map((item, index) => ({
+            ...item,
+            tenantId: item.resource,
+            index: index,
+          }))
+          console.log("asasxasxas==========", resourcesRes)
+          commit('SET_TENANT_LIST', resourcesRes)
           if (!state.tenantInfo) {
-            commit('SET_GLOBAL_TENANT', resources[0])
+            commit('SET_GLOBAL_TENANT', resourcesRes[0])
           }
         })
         .catch(() => {});
   },
+  
   setTenantList({commit}, log) {
     commit('SET_TENANT_LIST', log)
   },

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

@@ -10,8 +10,10 @@
       </div>
       <div class="query-monitoring">
         <div class="title">查询监控</div>
-        <el-cascader v-model="selectMonitorValue" class="el-cascader" learable :options="selectMonitor"
+        <!-- <el-cascader v-model="selectMonitorValue" class="el-cascader" learable :options="selectMonitor"
-          :props="{ expandTrigger: 'hover' }" @change="handleChangeMonitorSelect"></el-cascader>
+          :props="{ expandTrigger: 'hover' }" @change="handleChangeMonitorSelect"></el-cascader> -->
+        <el-cascader v-model="itemValue" class="el-cascader" learable :options="itemList"
+          @change="handleChangeMonitorSelect"></el-cascader>
       </div>
       <div class="info-card">
         <div class="info-card-title">{{ selectMonitor[0].label }}数量</div>
@@ -33,7 +35,7 @@
       <el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
         value-format="timestamp" :picker-options="pickerOptions">
       </el-date-picker>
-      <el-button class="button" @click="changeMonitorData">筛选</el-button>
+      <el-button class="button" @click="changeMonitorData" v-loading.fullscreen.lock="fullscreenLoading">筛选</el-button>
     </div>
     <div class="center-chart-wrapper">
       <line-chart title="任务数" :chart-data="lineChartData" :times="times" height="100%" :cus-formatter="true" />
@@ -58,6 +60,7 @@
 import * as threadPoolApi from '@/api/hippo4j-threadPool';
 import * as monitorApi from '@/api/hippo4j-monitor';
 import * as instanceApi from '@/api/hippo4j-instance';
+import * as itemApi from '@/api/hippo4j-item';
 import { mapGetters } from 'vuex';
 import { i18nConfig } from '@/locale/config'
 import LineChart from './components/LineChart.vue';
@@ -81,6 +84,7 @@ export default {
       rangeRejectCountList: [],
       chooseData: {},
       timeValue: new Date(),
+      fullscreenLoading: false,
       pickerOptions: {
         shortcuts: [{
           text: '30 分钟',
@@ -108,21 +112,14 @@ export default {
           text: '今天',
           onClick(picker) {
             const end = new Date();
-            const start = that.getBeforeDate(new Date(), 24 * 6);
+            const start = that.getBeforeDate(new Date(), 24);
-            picker.$emit("pick", [start, end]);
-          }
-        }, {
-          text: '昨天',
-          onClick(picker) {
-            const end = new Date();
-            const start = that.getBeforeDate(new Date(), 24 * 30);
             picker.$emit("pick", [start, end]);
           }
         }, {
           text: '一周内',
           onClick(picker) {
             const end = new Date();
-            const start = that.getBeforeDate(new Date(), 24 * 90);
+            const start = that.getBeforeDate(new Date(), 24 * 7);
             picker.$emit("pick", [start, end]);
           }
         }],
@@ -136,6 +133,7 @@ export default {
           return time.getTime() > this.getDayStartOrEnd(new Date(), "end");
         }
       },
+      itemValue: [],
       selectMonitor: [],
       tableData: [],
       listQuery: {
@@ -148,7 +146,8 @@ export default {
         "instanceId": "",
         startTime:"",
         endTime:""
-      }
+      },
+      rejectCount: 0,
     }
   },
   computed: {
@@ -176,16 +175,63 @@ export default {
   },
   methods: {
     fetchData() {
-      // debugger
+      // next
       this.userName = this.$cookie.get('userName')
       this.listQuery.tenantId = this?.tenantInfo?.tenantId || this.listQuery.tenantId
       let isAllTenant = this.listQuery.tenantId == i18nConfig.messages.zh.common.allTenant || this.listQuery.tenantId == i18nConfig.messages.en.common.allTenant
       this.listQuery.tenantId = isAllTenant ? '' : this.listQuery.tenantId
+
+      //请求项目-线程池-实例
+      itemApi.list(this.listQuery).then((itemRes) => {
+        this.itemList = itemRes.records.map((item) => {
+          this.listQuery.itemId = item.itemId
+          let tpList = []
+
+          threadPoolApi.list(this.listQuery).then((tpRes) => {
+            tpList = tpRes.records.map((tpItem) => {
+              this.listQuery.tpId = tpItem.tpId
+              let itList = []
+
+              instanceApi.list(param).then((instanceRes) => {
+                itList = instanceRes.records.map((itItem) => {
+                  this.listQuery.identify = itItem.identify
+                  this.listQuery.instanceId = itItem.identify
+                  return {
+                    ...itItem,
+                    value: itItem.identify,
+                    label: itItem.identify,
+                  }
+                });
+                return itList
+              });
+
+              return {
+                ...tpItem,
+                value: tpItem.tpId,
+                label: tpItem.tpId,
+                children: itList? itList : [{value: '暂无实例', label: '暂无实例'}]
+              }
+            })
+            return tpList
+          })
+
+          return {
+            ...item,
+            value: item.itemId,
+            label: item.itemId,
+            // children: tpList ? tpList : [{value: '暂无线程池', label: '暂无线程池'}]
+          }
+        })
+
+        console.log('============jjjjjj', this.itemList)
+      })
       threadPoolApi.list(this.listQuery).then((res) => {
         this.listQuery.itemId = res.records[0].itemId
         this.listQuery.tpId = res.records[0].tpId
         this.listQuery.tenantId = res.records[0].tenantId
         this.getSelectMonitor(res.records[0].itemId,res.records[0].tpId)
+
+        //查询租户所有项目
       })
     },
 
@@ -216,27 +262,28 @@ export default {
           name: '线程池',
           label: res.tpId
         }, {
-          name: '核心线程池',
+          name: '核心线程数',
           label: res.coreSize
         }, {
           name: '最大线程数',
           label: res.maxSize
         }, {
           name: '阻塞队列',
-          label: res.queueType
+          label: this.queueFilter(res.queueType)
         }, {
           name: '队列容量',
           label: res.capacity
         }, {
           name: '任务完成数',
-          label: res.allowCoreThreadTimeOut
+          label: this.completedTaskCount
         }, {
           name: '拒绝策略',
-          label: res.rejectedType
+          label: this.rejectedTypeFilter(res.rejectedType)
         }, {
           name: '拒绝次数',
-          label: res.rejectedType
+          label: this.rejectCount
         }]
+        console.log("sssss=========", this.rejectCount)
       });
     },
 
@@ -270,6 +317,11 @@ export default {
               opacity: 0,
             }
           },]
+        this.rejectCount = res?.rejectCountList[res.rejectCountList.length - 1]
+        this.tableData[7].label = res?.rejectCountList[res.rejectCountList.length - 1]
+        this.completedTaskCount = res?.completedTaskCountList[res.completedTaskCountList.length - 1]
+        this.tableData[5].label = res?.completedTaskCountList[res.completedTaskCountList.length - 1]
+        console.log("sssss=========", this.rejectCount)
         this.times = res?.times.map(item => {
           const list = item.split(':')
           list.pop()
@@ -296,10 +348,47 @@ export default {
           data: res?.rangeRejectCountList,
           show: true
         }]
+        this.fullscreenLoading = false
       })
     },
 
     handleChangeMonitorSelect(value) {
+
+      //////////next
+      console.log('asasasasas', value, this.itemList)
+      let tpList = []
+      threadPoolApi.list(this.listQuery).then((tpRes) => {
+      tpList = tpRes.records.map((tpItem) => {
+        this.listQuery.tpId = tpItem.tpId
+        let itList = []
+
+        // instanceApi.list(param).then((instanceRes) => {
+        //   itList = instanceRes.records.map((itItem) => {
+        //     this.listQuery.identify = itItem.identify
+        //     this.listQuery.instanceId = itItem.identify
+        //     return {
+        //       ...itItem,
+        //       value: itItem.identify,
+        //       label: itItem.identify,
+        //     }
+        //   });
+        //   return itList
+        // });
+
+        return {
+          ...tpItem,
+          value: tpItem.tpId,
+          label: tpItem.tpId,
+          // children: itList? itList : [{value: '暂无实例', label: '暂无实例'}]
+        }
+      })
+      return tpList
+    })
+    this.$set(this.itemList[0], 'children', tpList)
+      console.log('asasasasas', value, this.itemList, tpList)
+
+
+
       this.selectMonitor[value[0]].map((item) => {
         if (item.children.label == value[1]) {
           this.listQuery.identify = item.identify || this.listQuery.identify
@@ -312,6 +401,7 @@ export default {
     },
 
     changeMonitorData() {
+      this.fullscreenLoading = true
       console.log('this.timeVqlue:::',this.timeValue)
       this.listQuery.startTime = this.timeValue[0]
       this.listQuery.endTime = this.timeValue[1]
@@ -328,7 +418,43 @@ export default {
       } else {
         return new Date(time).setHours(23, 59, 59, 999);
       }
+    },
+
+
+    rejectedTypeFilter(type) {
+      if ('1' == type) {
+        return 'CallerRunsPolicy';
+      } else if ('2' == type) {
+        return 'AbortPolicy';
+      } else if ('3' == type) {
+        return 'DiscardPolicy';
+      } else if ('4' == type) {
+        return 'DiscardOldestPolicy';
+      } else if ('5' == type) {
+        return 'RunsOldestTaskPolicy';
+      } else if ('6' == type) {
+        return 'SyncPutQueuePolicy';
+      } else {
+        return 'CustomRejectedPolicy_' + type;
+      }
+    },
+    queueFilter(type) {
+      if ('1' == type) {
+        return 'ArrayBlockingQueue';
+      } else if ('2' == type) {
+        return 'LinkedBlockingQueue';
+      } else if ('3' == type) {
+        return 'LinkedBlockingDeque';
+      } else if ('4' == type) {
+        return 'SynchronousQueue';
+      } else if ('5' == type) {
+        return 'LinkedTransferQueue';
+      } else if ('6' == type) {
+        return 'PriorityBlockingQueue';
+      } else if ('9' == type) {
+        return 'ResizableLinkedBlockingQueue';
       }
+    },
   }
 }
 </script>
@@ -441,7 +567,7 @@ export default {
         display: flex;
         justify-content: space-between;
         font-size: 14px;
-        flex-wrap: nowrap;
+        flex-wrap: wrap;
         overflow: hidden;
 
         .tp-label {

threadpool/console/vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     },
     proxy: {
       '/hippo4j/v1/cs': {
-        target: `http://127.0.0.1:6691/hippo4j/v1/cs`,
+        target: `http://console.hippo4j.cn:6691/hippo4j/v1/cs`,
         changOrigin: true,
         secure: false,
         pathRewrite: {