From 28d861a67a58e7842e141ebc7b1ce77de4720c7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B9=E6=B3=A1=E6=B3=A1=E7=9A=84=E5=9B=A2=E5=AD=90?= Date: Thu, 26 Oct 2023 02:42:01 +0800 Subject: [PATCH] feat:tenant style + thread pool query --- threadpool/console/src/App.vue | 14 +- .../console/src/layout/components/Navbar.vue | 28 +-- threadpool/console/src/locale/langChange.vue | 47 +++-- .../console/src/store/modules/tenant.js | 17 +- .../src/views/hippo4j/monitor/index.vue | 168 +++++++++++++++--- threadpool/console/vue.config.js | 2 +- 6 files changed, 218 insertions(+), 58 deletions(-) diff --git a/threadpool/console/src/App.vue b/threadpool/console/src/App.vue index f9c769d6..0ec05356 100755 --- a/threadpool/console/src/App.vue +++ b/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) } }) diff --git a/threadpool/console/src/layout/components/Navbar.vue b/threadpool/console/src/layout/components/Navbar.vue index 086375bd..e3033c5f 100755 --- a/threadpool/console/src/layout/components/Navbar.vue +++ b/threadpool/console/src/layout/components/Navbar.vue @@ -18,12 +18,12 @@ - + + :value="item.index"> @@ -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) - this.$store.dispatch('tenant/setTenantInfo', this.tenantInfo || resources[0]) - this.tenant = this.tenantInfo || resources[0] - console.log("isResour", resources[0], this.tenant) + const resourcesRes = resources.map((item, index) => ({ + ...item, + tenantId: item.resource, + 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; diff --git a/threadpool/console/src/locale/langChange.vue b/threadpool/console/src/locale/langChange.vue index 34c50251..a051c092 100644 --- a/threadpool/console/src/locale/langChange.vue +++ b/threadpool/console/src/locale/langChange.vue @@ -11,7 +11,7 @@ :key="item.lang" :command="item.lang" > - {{ item.name }} + {{ item.name }} @@ -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,18 +61,32 @@ 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) - } - if (isAllTenant) { - this.$store.dispatch('tenant/setTenantInfo', resources[0]) + 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{ - &[data-active=true] { - color: var(--jjext-color-dropdown-text) !important; - } + ::v-deep .el-dropdown-menu__item:not(.is-disabled):hover { + background: #f5f7fa; + color: #606266; + } + + .el-icon--right { + color: #c0c4cc; + } + + .chooseItem { + font-weight: bold; + color: #1890ff; } diff --git a/threadpool/console/src/store/modules/tenant.js b/threadpool/console/src/store/modules/tenant.js index 574645f2..5170f6df 100644 --- a/threadpool/console/src/store/modules/tenant.js +++ b/threadpool/console/src/store/modules/tenant.js @@ -26,17 +26,26 @@ const actions = { if (response.role == 'ROLE_ADMIN') { resources.unshift({ action: "rw", - resource: "所有租户", - username: userName + resource: this.$t('common.allTenant'), + 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) }, diff --git a/threadpool/console/src/views/hippo4j/monitor/index.vue b/threadpool/console/src/views/hippo4j/monitor/index.vue index 595171c7..d105c412 100644 --- a/threadpool/console/src/views/hippo4j/monitor/index.vue +++ b/threadpool/console/src/views/hippo4j/monitor/index.vue @@ -10,8 +10,10 @@
查询监控
- + +
{{ selectMonitor[0].label }}数量
@@ -33,7 +35,7 @@ - 筛选 + 筛选
@@ -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); - picker.$emit("pick", [start, end]); - } - }, { - text: '昨天', - onClick(picker) { - const end = new Date(); - const start = that.getBeforeDate(new Date(), 24 * 30); + 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 * 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'; + } + }, } } @@ -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 { diff --git a/threadpool/console/vue.config.js b/threadpool/console/vue.config.js index e8c52a02..cc65b92b 100755 --- a/threadpool/console/vue.config.js +++ b/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: {