feat: complete service details tab
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index 4a624e0..4939f65 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -61,6 +61,9 @@
labels: 'Labels',
startTime_k8s: 'StartTime(k8s)'
},
+ serviceDomain: {
+ name: 'Name'
+ },
appServiceTimeout: 'Adjusting the timeout for application service provision',
enableAppInstanceLogs: 'Enable access logs for all instances of this application',
appServiceLoadBalance: 'Adjusting the load balancing strategy for application service provision',
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index c02622d..bada3f9 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -61,6 +61,9 @@
creationTime_k8s: '创建时间(k8s)',
startTime_k8s: '启动时间(k8s)'
},
+ serviceDomain: {
+ name: '服务名'
+ },
service: '服务',
versionGroup: '版本&分组',
avgQPS: '近1min QPS',
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index d67c200..be5332a 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -20,6 +20,7 @@
import LayoutTab from '../layout/tab/layout_tab.vue'
import _ from 'lodash'
import AppTabHeaderSlot from '@/views/resources/applications/slots/AppTabHeaderSlot.vue'
+import ServiceTabHeaderSlot from '@/views/resources/services/slots/ServiceTabHeaderSlot.vue'
export declare type RouteRecordType = RouteRecordRaw & {
key?: string
@@ -208,7 +209,10 @@
redirect: 'search',
component: LayoutTab,
meta: {
- tab_parent: true
+ tab_parent: true,
+ slots: {
+ header: ServiceTabHeaderSlot
+ }
},
children: [
{
@@ -220,7 +224,7 @@
}
},
{
- path: '/detail/:serviceName',
+ path: '/detail/:pathId',
name: 'detail',
component: () => import('../views/resources/services/tabs/detail.vue'),
meta: {
@@ -228,7 +232,7 @@
}
},
{
- path: '/debug/:serviceName',
+ path: '/debug/:pathId',
name: 'debug',
component: () => import('../views/resources/services/tabs/debug.vue'),
meta: {
@@ -236,7 +240,7 @@
}
},
{
- path: '/distribution/:serviceName',
+ path: '/distribution/:pathId',
name: 'distribution',
component: () => import('../views/resources/services/tabs/distribution.vue'),
meta: {
@@ -244,7 +248,7 @@
}
},
{
- path: '/monitor/:serviceName',
+ path: '/monitor/:pathId',
name: 'monitor',
component: () => import('../views/resources/services/tabs/monitor.vue'),
meta: {
@@ -252,7 +256,7 @@
}
},
{
- path: '/tracing/:serviceName',
+ path: '/tracing/:pathId',
name: 'tracing',
component: () => import('../views/resources/services/tabs/tracing.vue'),
meta: {
@@ -260,7 +264,7 @@
}
},
{
- path: '/event/:serviceName',
+ path: '/event/:pathId',
name: 'event',
component: () => import('../views/resources/services/tabs/event.vue'),
meta: {
diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
index dee9260..b58f79f 100644
--- a/ui-vue3/src/views/resources/services/search.vue
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -125,7 +125,7 @@
searchDomain.onSearch(handleResult)
const viewDetail = (serviceName: string) => {
- router.push({ name: 'detail', params: { serviceName } })
+ router.push({ name: 'detail', params: { pathId: serviceName } })
}
provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
diff --git a/ui-vue3/src/views/resources/services/slots/ServiceTabHeaderSlot.vue b/ui-vue3/src/views/resources/services/slots/ServiceTabHeaderSlot.vue
new file mode 100644
index 0000000..477d164
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/slots/ServiceTabHeaderSlot.vue
@@ -0,0 +1,48 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+-->
+<template>
+ <!-- example like blow-->
+ <div class="__container_ServiceTabHeaderSlot">
+ <span class="header-desc"
+ >{{ $t('serviceDomain.name') }}: {{ route.params?.pathId }}</span
+ >
+ <!-- <a-select
+ v-model:value="versionGroupSelect.versionGroupValue"
+ :bordered="false"
+ style="width: 80%"
+ >
+ <a-select-option v-for="(item, index) in versionGroupSelect.versionGroupArr" :value="item" :key="index">
+ {{ item }}
+ </a-select-option>
+ </a-select> -->
+ </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useRoute } from 'vue-router'
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+const route = useRoute()
+</script>
+<style lang="less" scoped>
+.__container_ServiceTabHeaderSlot {
+ .header-desc {
+ line-height: 30px;
+ vertical-align: center;
+ }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/services/tabs/detail.vue b/ui-vue3/src/views/resources/services/tabs/detail.vue
index 9420d9c..ffd22e3 100644
--- a/ui-vue3/src/views/resources/services/tabs/detail.vue
+++ b/ui-vue3/src/views/resources/services/tabs/detail.vue
@@ -16,45 +16,57 @@
-->
<template>
<div class="__container_services_tabs_detail">
+ <a-card-grid>
+ <a-card title="生产者详情">
+ <a-flex>
+ <a-descriptions class="description-column" :column="1" layout="vertical">
+ <a-descriptions-item label="超时时间">
+ <p class="description-item-content">{{ serviceDetail.timeOut }}</p>
+ </a-descriptions-item>
+ <a-descriptions-item label="重试次数">
+ <p class="description-item-content">{{ serviceDetail.retry }}</p>
+ </a-descriptions-item>
+ <a-descriptions-item label="是否过时">
+ <p class="description-item-content">{{ serviceDetail.obsolete }}</p>
+ </a-descriptions-item>
+ </a-descriptions>
+ <a-descriptions class="description-column" :column="1" layout="vertical">
+ <a-descriptions-item label="RPC协议">
+ <p class="description-item-content">{{ serviceDetail.protocol }}</p>
+ </a-descriptions-item>
+ <a-descriptions-item label="延迟注册时间">
+ <p class="description-item-content">{{ serviceDetail.delay }}</p>
+ </a-descriptions-item>
+ </a-descriptions>
+ </a-flex>
+ </a-card>
+ <a-card title="消费者详情" style="margin-top: 10px">
+ <a-flex>
+ <a-descriptions class="description-column" :column="1" layout="vertical">
+ <a-descriptions-item label="超时时间">
+ <p class="description-item-content">{{ serviceDetail.timeOut }}</p>
+ </a-descriptions-item>
+ <a-descriptions-item label="重试次数">
+ <p class="description-item-content">{{ serviceDetail.retry }}</p>
+ </a-descriptions-item>
+ <a-descriptions-item label="是否过时">
+ <p class="description-item-content">{{ serviceDetail.obsolete }}</p>
+ </a-descriptions-item>
+ </a-descriptions>
+ <a-descriptions class="description-column" :column="1" layout="vertical">
+ <a-descriptions-item label="RPC协议">
+ <p class="description-item-content">{{ serviceDetail.protocol }}</p>
+ </a-descriptions-item>
+ <a-descriptions-item label="延迟注册时间">
+ <p class="description-item-content">{{ serviceDetail.delay }}</p>
+ </a-descriptions-item>
+ </a-descriptions>
+ </a-flex>
+ </a-card>
+ </a-card-grid>
<a-flex>
- <a-descriptions class="description-column" :column="1" layout="vertical">
- <a-descriptions-item label="服务名">
- <p class="description-item-content">{{ serviceDetail.serviceName }}</p>
- </a-descriptions-item>
- <a-descriptions-item label="服务版本&分组">
- <div class="description-item-content">
- <a-tag color="cyan" v-for="item in serviceDetail.versionGroup" :key="item">{{
- item
- }}</a-tag>
- </div>
- </a-descriptions-item>
- <a-descriptions-item label="RPC协议">
- <p class="description-item-content">{{ serviceDetail.protocol }}</p>
- </a-descriptions-item>
- <a-descriptions-item label="延迟注册时间">
- <p class="description-item-content">{{ serviceDetail.delay }}</p>
- </a-descriptions-item>
- <a-descriptions-item label="超时时间">
- <p class="description-item-content">{{ serviceDetail.timeOut }}</p>
- </a-descriptions-item>
- <a-descriptions-item label="重试次数">
- <p class="description-item-content">{{ serviceDetail.retry }}</p>
- </a-descriptions-item>
- </a-descriptions>
- <a-descriptions class="description-column" :column="1" layout="vertical">
- <a-descriptions-item label="请求总量(1min)">
- <p class="description-item-content">{{ serviceDetail.requestTotal }}</p>
- </a-descriptions-item>
- <a-descriptions-item label="平均RT(1min)">
- <p class="description-item-content">{{ serviceDetail.avgRT }}</p>
- </a-descriptions-item>
- <a-descriptions-item label="平均qps(1min)">
- <p class="description-item-content">{{ serviceDetail.avgQPS }}</p>
- </a-descriptions-item>
- <a-descriptions-item label="是否过时">
- <p class="description-item-content">{{ serviceDetail.obsolete }}</p>
- </a-descriptions-item>
- </a-descriptions>
+
+
</a-flex>
</div>
</template>
