feat: complete service distribution tab
diff --git a/ui-vue3/src/api/mock/mockServiceDistribution.ts b/ui-vue3/src/api/mock/mockServiceDistribution.ts
index 4a88fa4..23b74aa 100644
--- a/ui-vue3/src/api/mock/mockServiceDistribution.ts
+++ b/ui-vue3/src/api/mock/mockServiceDistribution.ts
@@ -28,67 +28,101 @@
{
applicationName: 'shop-order',
instanceNum: 15,
- instanceIP: [
- '192.168.32.28:8697',
- '192.168.32.26:20880',
- '192.168.32.24:28080',
- '192.168.32.22:20880'
- ]
+ instanceName: 'shop-order0',
+ rpcPort: '172.168.45.89:20888',
+ timeout: '1000ms',
+ retryNum: '2',
+ label: 'region=beijing'
},
{
applicationName: 'shop-order',
instanceNum: 15,
- instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+ instanceName: 'shop-order1',
+ rpcPort: '172.168.45.24:20888',
+ timeout: '500ms',
+ retryNum: '1',
+ label: 'region=wuhan'
},
{
applicationName: 'shop-user',
instanceNum: 12,
- instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+ instanceName: 'shop-order2',
+ rpcPort: '172.161.23.89:20888',
+ timeout: '200ms',
+ retryNum: '1',
+ label: 'region=shanghai'
},
{
applicationName: 'shop-order',
instanceNum: 15,
- instanceIP: [
- '192.168.32.28:8697',
- '192.168.32.26:20880',
- '192.168.32.24:28080',
- '192.168.32.22:20880'
- ]
+ instanceName: 'shop-order3',
+ rpcPort: '172.168.45.89:12423',
+ timeout: '2000ms',
+ retryNum: '2',
+ label: 'region=hangzhou'
},
{
applicationName: 'shop-order',
instanceNum: 15,
- instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+ instanceName: 'shop-order4',
+ rpcPort: '172.168.45.89:20888',
+ timeout: '100ms',
+ retryNum: '0',
+ label: 'region=wuxi'
},
{
applicationName: 'shop-user',
instanceNum: 12,
- instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+ instanceName: 'shop-order5',
+ rpcPort: '172.168.45.89:20888',
+ timeout: '1000ms',
+ retryNum: '2',
+ label: 'region=beijing'
},
{
applicationName: 'shop-order',
instanceNum: 15,
- instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+ instanceName: 'shop-order6',
+ rpcPort: '172.168.45.89:20888',
+ timeout: '1000ms',
+ retryNum: '2',
+ label: 'region=ningbo'
},
{
applicationName: 'shop-user',
instanceNum: 12,
- instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+ instanceName: 'shop-order7',
+ rpcPort: '172.168.45.89:20888',
+ timeout: '1000ms',
+ retryNum: '2',
+ label: 'region=shenzhen'
},
{
applicationName: 'shop-user',
instanceNum: 12,
- instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+ instanceName: 'shop-order8',
+ rpcPort: '172.168.45.89:20888',
+ timeout: '1000ms',
+ retryNum: '2',
+ label: 'region=guangzhou'
},
{
applicationName: 'shop-order',
instanceNum: 15,
- instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+ instanceName: 'shop-order9',
+ rpcPort: '172.168.45.89:20888',
+ timeout: '1000ms',
+ retryNum: '2',
+ label: 'region=nanjing'
},
{
applicationName: 'shop-user',
instanceNum: 12,
- instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+ instanceName: 'shop-order10',
+ rpcPort: '172.168.45.89:20888',
+ timeout: '1000ms',
+ retryNum: '2',
+ label: 'region=beijing'
}
]
}
diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
index b58f79f..43ec98d 100644
--- a/ui-vue3/src/views/resources/services/search.vue
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -22,7 +22,7 @@
<span class="service-link" @click="viewDetail(text)">
<b>
<Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
- <span class="service-link-text">{{ text }}</span>
+ {{ text }}
</b>
</span>
</template>
@@ -136,9 +136,6 @@
padding: 4px 10px 4px 4px;
border-radius: 4px;
color: v-bind('PRIMARY_COLOR');
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
&:hover {
cursor: pointer;
background: rgba(133, 131, 131, 0.13);
diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
index 4b985a2..921f21b 100644
--- a/ui-vue3/src/views/resources/services/tabs/distribution.vue
+++ b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -18,30 +18,17 @@
<div class="__container_services_tabs_distribution">
<a-flex vertical>
<a-flex class="service-filter">
- <a-flex>
- <div>
- <span>版本&分组:</span>
- <a-select
- v-model:value="versionAndGroup"
- :options="versionAndGroupOptions"
- class="service-filter-select"
- @change="debounceSearch"
- ></a-select>
- </div>
- <a-input-search
- v-model:value="searchValue"
- placeholder="搜索应用，ip，支持前缀搜索"
- class="service-filter-input"
- @search="debounceSearch"
- enter-button
- />
- </a-flex>
- <div>
- <a-radio-group v-model:value="type" button-style="solid" @click="debounceSearch">
- <a-radio-button value="producer">生产者</a-radio-button>
- <a-radio-button value="consumer">消费者</a-radio-button>
- </a-radio-group>
- </div>
+ <a-radio-group v-model:value="type" button-style="solid" @click="debounceSearch">
+ <a-radio-button value="producer">生产者</a-radio-button>
+ <a-radio-button value="consumer">消费者</a-radio-button>
+ </a-radio-group>
+ <a-input-search
+ v-model:value="searchValue"
+ placeholder="搜索应用，ip，支持前缀搜索"
+ class="service-filter-input"
+ @search="debounceSearch"
+ enter-button
+ />
</a-flex>
<a-table
:columns="tableColumns"
@@ -51,13 +38,15 @@
>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'applicationName'">
- <a-button type="link">{{ text }}</a-button>
+ <span class="app-link" @click="viewDetail(text)">
+ <b>
+ <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
+ {{ text }}
+ </b>
+ </span>
</template>
- <template v-if="column.dataIndex === 'instanceIP'">
- <a-flex justify="">
- <a-button v-for="ip in text.slice(0, 3)" :key="ip" type="link">{{ ip }}</a-button>
- <a-button v-if="text.length > 3" type="link">更多</a-button>
- </a-flex>
+ <template v-if="column.dataIndex === 'label'">
+ <a-tag :color="PRIMARY_COLOR">{{ text }}</a-tag>
</template>
</template>
</a-table>
@@ -70,7 +59,10 @@
import { ref, reactive, getCurrentInstance } from 'vue'
import { getServiceDistribution } from '@/api/service/service'
import { debounce } from 'lodash'
+import { PRIMARY_COLOR } from '@/base/constants'
+import { Icon } from '@iconify/vue'
+let __null = PRIMARY_COLOR
const {
appContext: {
config: { globalProperties }
@@ -103,20 +95,54 @@
{
title: '应用名',
dataIndex: 'applicationName',
- width: '25%',
- sorter: true
+ width: '20%',
+ customCell: (_, index) => {
+ if (index === 0) {
+ return { rowSpan: tableData.value.length };
+ }
+ else {
+ return { rowSpan: 0 };
+ }
+ }
},
{
title: '实例数',
dataIndex: 'instanceNum',
- width: '25%',
- sorter: true
+ width: '15%',
+ customCell: (_, index) => {
+ if (index === 0) {
+ return { rowSpan: tableData.value.length };
+ }
+ else {
+ return { rowSpan: 0 };
+ }
+ }
},
{
- title: '实例ip',
- dataIndex: 'instanceIP',
- width: '50%'
- }
+ title: '实例名',
+ dataIndex: 'instanceName',
+ width: '15%'
+ },
+ {
+ title: 'RPC端口',
+ dataIndex: 'rpcPort',
+ width: '15%'
+ },
+ {
+ title: '超时时间',
+ dataIndex: 'timeout',
+ width: '10%'
+ },
+ {
+ title: '重试次数',
+ dataIndex: 'retryNum',
+ width: '10%'
+ },
+ {
+ title: '标签',
+ dataIndex: 'label',
+ width: '15%'
+ },
]
const tableData = ref([])
@@ -138,10 +164,10 @@
globalProperties.$t('searchDomain.unit')
}
</script>
+
<style lang="less" scoped>
.__container_services_tabs_distribution {
.service-filter {
- justify-content: space-between;
margin-bottom: 20px;
.service-filter-select {
margin-left: 10px;
@@ -152,5 +178,14 @@
width: 300px;
}
}
+ .app-link {
+ padding: 4px 10px 4px 4px;
+ border-radius: 4px;
+ color: v-bind('PRIMARY_COLOR');
+ &:hover {
+ cursor: pointer;
+ background: rgba(133, 131, 131, 0.13);
+ }
+ }
}
</style>
