From 67515502c07cd699d5863abf817722da2a88786e Mon Sep 17 00:00:00 2001
From: jianyi-gronk <jianyi_gronk@163.com>
Date: Sun, 14 Jan 2024 12:38:45 +0800
Subject: [PATCH 1/8] feat: add service page

---
 ui-vue3/src/base/i18n/en.ts                   |   9 +-
 ui-vue3/src/base/i18n/zh.ts                   |   9 +-
 ui-vue3/src/router/defaultRoutes.ts           |  48 +++++-
 ui-vue3/src/views/service/event.vue           |  28 ++++
 ui-vue3/src/views/service/index.vue           |   8 +-
 ui-vue3/src/views/service/monitor.vue         |   0
 ui-vue3/src/views/service/serviceDebug.vue    |  28 ++++
 ui-vue3/src/views/service/serviceDetail.vue   |  28 ++++
 .../src/views/service/serviceDistribution.vue |  28 ++++
 ui-vue3/src/views/service/serviceSearch.vue   | 142 ++++++++++++++++++
 ui-vue3/src/views/service/serviceTab.vue      |  56 +++++++
 ui-vue3/src/views/service/tracing.vue         |   0
 12 files changed, 376 insertions(+), 8 deletions(-)
 create mode 100644 ui-vue3/src/views/service/event.vue
 create mode 100644 ui-vue3/src/views/service/monitor.vue
 create mode 100644 ui-vue3/src/views/service/serviceDebug.vue
 create mode 100644 ui-vue3/src/views/service/serviceDetail.vue
 create mode 100644 ui-vue3/src/views/service/serviceDistribution.vue
 create mode 100644 ui-vue3/src/views/service/serviceSearch.vue
 create mode 100644 ui-vue3/src/views/service/serviceTab.vue
 create mode 100644 ui-vue3/src/views/service/tracing.vue

diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index db547cb54..961603ff2 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -255,5 +255,12 @@ export default {
   trafficAccesslog: 'Accesslog',
   trafficHost: 'Host',
   homePage: 'Cluster Overview',
-  serviceManagement: 'Dev & Test'
+  serviceManagement: 'Dev & Test',
+
+  serviceDetails: 'Service Details',
+  serviceDebug: 'Service Debug',
+  serviceDistribution: 'Service Distribution',
+  monitor: 'Monitor',
+  tracing: 'Tracing',
+  event: 'Event'
 }
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index aaea77290..0ff8ea0e4 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -253,5 +253,12 @@ export default {
   serviceManagement: '开发测试',
 
   groupInputPrompt: '请输入服务group(可选)',
-  versionInputPrompt: '请输入服务version(可选)'
+  versionInputPrompt: '请输入服务version(可选)',
+
+  serviceDetails: '服务详情',
+  serviceDebug: '服务调试',
+  serviceDistribution: '服务分布',
+  monitor: '监控',
+  tracing: '链路追踪',
+  event: '事件'
 }
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index b827e6726..406c33eb4 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -45,11 +45,55 @@ export const routes: Readonly<RouteRecordType[]> = [
       },
       {
         path: '/service',
-        name: 'serviceSearch',
+        name: 'service',
         component: () => import('../views/service/index.vue'),
         meta: {
           icon: 'material-symbols-light:screen-search-desktop-outline-rounded'
-        }
+        },
+        children: [
+          {
+            path: '/service',
+            name: 'serviceSearch',
+            component: () => import('../views/service/serviceSearch.vue')
+          },
+          {
+            path: '/serviceTab',
+            name: 'serviceTab',
+            component: () => import('../views/service/serviceTab.vue'),
+            children: [
+              {
+                path: '/serviceDetail',
+                name: 'serviceDetail',
+                component: () => import('../views/service/serviceDetail.vue')
+              },
+              {
+                path: '/serviceDebug',
+                name: 'serviceDebug',
+                component: () => import('../views/service/serviceDebug.vue')
+              },
+              {
+                path: '/serviceDistribution',
+                name: 'serviceDistribution',
+                component: () => import('../views/service/serviceDistribution.vue')
+              },
+              {
+                path: '/monitor',
+                name: 'monitor',
+                component: () => import('../views/service/monitor.vue')
+              },
+              {
+                path: '/tracing',
+                name: 'tracing',
+                component: () => import('../views/service/tracing.vue')
+              },
+              {
+                path: '/event',
+                name: 'event',
+                component: () => import('../views/service/event.vue')
+              }
+            ]
+          }
+        ]
       },
       {
         path: '/traffic',
diff --git a/ui-vue3/src/views/service/event.vue b/ui-vue3/src/views/service/event.vue
new file mode 100644
index 000000000..512a182d1
--- /dev/null
+++ b/ui-vue3/src/views/service/event.vue
@@ -0,0 +1,28 @@
+<!--
+  ~ 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>
+  <div class="__container_home_index">
+    <h1>{{ $t(routeName) }}</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {useRoute} from "vue-router";
+const routeName = <string>useRoute().name
+
+</script>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/index.vue b/ui-vue3/src/views/service/index.vue
index 72b402ab0..621b4eb7c 100644
--- a/ui-vue3/src/views/service/index.vue
+++ b/ui-vue3/src/views/service/index.vue
@@ -16,14 +16,14 @@
 -->
 <template>
   <div class="__container_home_index">
-    <h1>{{ $t(routeName) }}</h1>
+    <RouterView />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
-
 import {useRoute} from "vue-router";
-const  routeName = <string>useRoute().name
+import { RouterView } from 'vue-router';
+const routeName = <string>useRoute().name
+
 </script>
 <style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/monitor.vue b/ui-vue3/src/views/service/monitor.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui-vue3/src/views/service/serviceDebug.vue b/ui-vue3/src/views/service/serviceDebug.vue
new file mode 100644
index 000000000..512a182d1
--- /dev/null
+++ b/ui-vue3/src/views/service/serviceDebug.vue
@@ -0,0 +1,28 @@
+<!--
+  ~ 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>
+  <div class="__container_home_index">
+    <h1>{{ $t(routeName) }}</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {useRoute} from "vue-router";
+const routeName = <string>useRoute().name
+
+</script>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/serviceDetail.vue b/ui-vue3/src/views/service/serviceDetail.vue
new file mode 100644
index 000000000..512a182d1
--- /dev/null
+++ b/ui-vue3/src/views/service/serviceDetail.vue
@@ -0,0 +1,28 @@
+<!--
+  ~ 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>
+  <div class="__container_home_index">
+    <h1>{{ $t(routeName) }}</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {useRoute} from "vue-router";
+const routeName = <string>useRoute().name
+
+</script>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/serviceDistribution.vue b/ui-vue3/src/views/service/serviceDistribution.vue
new file mode 100644
index 000000000..512a182d1
--- /dev/null
+++ b/ui-vue3/src/views/service/serviceDistribution.vue
@@ -0,0 +1,28 @@
+<!--
+  ~ 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>
+  <div class="__container_home_index">
+    <h1>{{ $t(routeName) }}</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {useRoute} from "vue-router";
+const routeName = <string>useRoute().name
+
+</script>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/serviceSearch.vue b/ui-vue3/src/views/service/serviceSearch.vue
new file mode 100644
index 000000000..6c05f21e1
--- /dev/null
+++ b/ui-vue3/src/views/service/serviceSearch.vue
@@ -0,0 +1,142 @@
+<!--
+  ~ 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>
+  <div class="__container_home_index">
+    <a-table :columns="columns" :data-source="dataSource">
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.dataIndex === 'service'">
+          <a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
+        </template>
+      </template>
+      <template
+        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
+      >
+        <div style="padding: 8px">
+          <a-input
+            ref="searchInput"
+            :placeholder="`Search ${column.dataIndex}`"
+            :value="selectedKeys[0]"
+            style="width: 188px; margin-bottom: 8px; display: block"
+            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+          />
+          <a-button
+            type="primary"
+            size="small"
+            style="width: 90px; margin-right: 8px"
+            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
+          >
+            <template #icon><SearchOutlined /></template>
+            Search
+          </a-button>
+          <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
+            Reset
+          </a-button>
+        </div>
+      </template>
+      <template #customFilterIcon="{ filtered }">
+        <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { SearchOutlined } from '@ant-design/icons-vue';
+import { reactive, ref } from 'vue';
+
+const router = useRouter()
+const searchInput = ref();
+const columns = [
+  {
+    title: '服务',
+    dataIndex: 'service',
+    sorter: true,
+    width: '30%',
+    customFilterDropdown: true,
+    onFilter: (value: string, record: string) => record.toString().toLowerCase().includes(value.toLowerCase()),
+    onFilterDropdownOpenChange: visible => {
+      if (visible) {
+        setTimeout(() => {
+          searchInput.value.focus();
+        }, 100);
+      }
+    },
+  },
+  {
+    title: '接口数',
+    dataIndex: 'interfaceNumber',
+    width: '10%'
+  },
+  {
+    title: '生产者/消费者实例',
+    dataIndex: 'instance',
+    width: '15%'
+  },
+  {
+    title: '近 1min QPS',
+    dataIndex: 'QPS',
+    sorter: true,
+    width: '15%'
+  },
+  {
+    title: '近 1min RT',
+    dataIndex: 'RT',
+    sorter: true,
+    width: '15%'
+  },
+  {
+    title: '近 1min 请求总量',
+    dataIndex: 'requestTotal',
+    sorter: true,
+    width: '15%'
+  }
+]
+
+const state = reactive({
+  searchText: '',
+  searchedColumn: '',
+});
+
+const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  confirm();
+  state.searchText = selectedKeys[0];
+  state.searchedColumn = dataIndex;
+};
+
+const handleReset = clearFilters => {
+  clearFilters({ confirm: true });
+  state.searchText = '';
+};
+
+const dataSource = [
+  {},
+  {},
+  {
+    service: '123123'
+  },
+  {},
+  {},
+  {}
+]
+
+const viewDetail = (service: string) => {
+  router.push('/serviceDetail');
+}
+</script>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/serviceTab.vue b/ui-vue3/src/views/service/serviceTab.vue
new file mode 100644
index 000000000..97e43bcfb
--- /dev/null
+++ b/ui-vue3/src/views/service/serviceTab.vue
@@ -0,0 +1,56 @@
+<!--
+  ~ 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>
+  <div class="__container_home_index">
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane v-for="tab in tabs" :key="tab.title" :tab="tab.title" @click="() => {
+        console.log(123)
+        router.push(tab.title)
+      }">
+        <router-view/>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+  const tabs = [
+  {
+    title: 'serviceDetails'
+  },
+  {
+    title: 'serviceDebug'
+  },
+  {
+    title: 'serviceDistribution',
+  },
+  {
+    title: 'monitor',
+  },
+  {
+    title: 'tracing',
+  },
+  {
+    title: 'event',
+  }
+]
+</script>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/tracing.vue b/ui-vue3/src/views/service/tracing.vue
new file mode 100644
index 000000000..e69de29bb

From 4707ff6d7a4addcfd3ccd20ee8e5cd4c4f012a33 Mon Sep 17 00:00:00 2001
From: jianyi-gronk <jianyi_gronk@163.com>
Date: Tue, 16 Jan 2024 01:09:01 +0800
Subject: [PATCH 2/8] Implement service related UI

---
 ui-vue3/src/base/i18n/en.ts                   |  11 +-
 ui-vue3/src/base/i18n/zh.ts                   |  11 +-
 ui-vue3/src/router/defaultRoutes.ts           |  63 ++++++-
 .../src/views/resources/services/index.vue    |  26 ++-
 .../src/views/resources/services/search.vue   | 166 ++++++++++++++++++
 .../views/resources/services/tabs/debug.vue   | 108 ++++++++++++
 .../views/resources/services/tabs/detail.vue  |  59 +++++++
 .../resources/services/tabs/distribution.vue  |  98 +++++++++++
 .../services/tabs}/event.vue                  |  10 +-
 .../services/tabs/monitor.vue}                |   9 +-
 .../services/tabs/tracing.vue}                |  10 +-
 ui-vue3/src/views/service/monitor.vue         |   0
 ui-vue3/src/views/service/serviceDebug.vue    |  28 ---
 ui-vue3/src/views/service/serviceDetail.vue   |  28 ---
 ui-vue3/src/views/service/serviceSearch.vue   | 142 ---------------
 ui-vue3/src/views/service/serviceTab.vue      |  56 ------
 ui-vue3/src/views/service/tracing.vue         |   0
 17 files changed, 536 insertions(+), 289 deletions(-)
 create mode 100644 ui-vue3/src/views/resources/services/search.vue
 create mode 100644 ui-vue3/src/views/resources/services/tabs/debug.vue
 create mode 100644 ui-vue3/src/views/resources/services/tabs/detail.vue
 create mode 100644 ui-vue3/src/views/resources/services/tabs/distribution.vue
 rename ui-vue3/src/views/{service => resources/services/tabs}/event.vue (81%)
 rename ui-vue3/src/views/{service/index.vue => resources/services/tabs/monitor.vue} (85%)
 rename ui-vue3/src/views/{service/serviceDistribution.vue => resources/services/tabs/tracing.vue} (81%)
 delete mode 100644 ui-vue3/src/views/service/monitor.vue
 delete mode 100644 ui-vue3/src/views/service/serviceDebug.vue
 delete mode 100644 ui-vue3/src/views/service/serviceDetail.vue
 delete mode 100644 ui-vue3/src/views/service/serviceSearch.vue
 delete mode 100644 ui-vue3/src/views/service/serviceTab.vue
 delete mode 100644 ui-vue3/src/views/service/tracing.vue

diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index dd9406a45..2e73699d3 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -264,12 +264,15 @@ const words: I18nType = {
   applications: 'Applications',
   instances: 'Instances',
 
-  serviceDetails: 'Service Details',
-  serviceDebug: 'Service Debug',
-  serviceDistribution: 'Service Distribution',
+  details: 'Details',
+  debug: 'Debug',
+  distribution: 'Distribution',
   monitor: 'Monitor',
   tracing: 'Tracing',
-  event: 'Event'
+  event: 'Event',
+
+  provideService: 'Provide Service',
+  dependentService: 'Dependent Service'
 }
 
 export default words
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index fa66cb69b..c2ffffe5c 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -262,12 +262,15 @@ const words: I18nType = {
   applications: '应用',
   instances: '实例',
 
-  serviceDetails: '服务详情',
-  serviceDebug: '服务调试',
-  serviceDistribution: '服务分布',
+  details: '详情',
+  debug: '调试',
+  distribution: '分布',
   monitor: '监控',
   tracing: '链路追踪',
-  event: '事件'
+  event: '事件',
+
+  provideService: '提供服务',
+  dependentService: '依赖服务'
 }
 
 export default words
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index a36f9e526..1b08a4a7a 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -96,8 +96,69 @@ export const routes: Readonly<RouteRecordType[]> = [
           {
             path: '/services',
             name: 'services',
+            redirect: 'search',
             component: () => import('../views/resources/services/index.vue'),
-            meta: {}
+            meta: {
+              tab_parent: true
+            },
+            children: [
+              {
+                path: '/search',
+                name: 'search',
+                component: () => import('../views/resources/services/search.vue'),
+                meta: {
+                  hidden: true
+                }
+              },
+              {
+                path: '/detail/:serviceName',
+                name: 'detail',
+                component: () => import('../views/resources/services/tabs/detail.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/debug/:serviceName',
+                name: 'debug',
+                component: () => import('../views/resources/services/tabs/debug.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/distribution/:serviceName',
+                name: 'distribution',
+                component: () => import('../views/resources/services/tabs/distribution.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/monitor/:serviceName',
+                name: 'monitor',
+                component: () => import('../views/resources/services/tabs/monitor.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/tracing/:serviceName',
+                name: 'tracing',
+                component: () => import('../views/resources/services/tabs/tracing.vue'),
+                meta: {
+                  tab: true
+                }
+              },
+              {
+                path: '/event/:serviceName',
+                name: 'event',
+                component: () => import('../views/resources/services/tabs/event.vue'),
+                meta: {
+                  tab: true
+                }
+              }
+            ]
           }
         ]
       },
diff --git a/ui-vue3/src/views/resources/services/index.vue b/ui-vue3/src/views/resources/services/index.vue
index d7a299942..ddab54a61 100644
--- a/ui-vue3/src/views/resources/services/index.vue
+++ b/ui-vue3/src/views/resources/services/index.vue
@@ -15,8 +15,28 @@
   ~ limitations under the License.
 -->
 <template>
-  <div class="__container_resources_services_index">服务</div>
+  <div class="__container_services">
+    <Icon icon="material-symbols:arrow-back-ios-new-rounded" v-if="route.name !== 'search'" @click="backSearch" class="icon-back"/>
+    <LayoutTab></LayoutTab>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<script setup lang="ts">
+import LayoutTab from '@/layout/tab/layout_tab.vue'
+import { Icon } from '@iconify/vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute();
+const router = useRouter();
+
+const backSearch = () => {
+  router.push({ name: 'search' });
+}
+</script>
+<style lang="less" scoped>
+.__container_services {
+  .icon-back:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
new file mode 100644
index 000000000..ddffcc549
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -0,0 +1,166 @@
+<!--
+  ~ 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>
+  <div class="__container_services_index">
+    <a-flex vertical>
+      <a-flex class="service-filter">
+        <a-radio-group v-model:value="serviceType" button-style="solid">
+          <a-radio-button value="provide">{{ $t('provideService') }}</a-radio-button>
+          <a-radio-button value="dependent">{{ $t('dependentService') }}</a-radio-button>
+        </a-radio-group>
+        <a-input-search
+          v-model:value="serviceName"
+          placeholder="请输入"
+          class="service-name-input"
+          @search="onSearch"
+          enter-button
+        />
+      </a-flex>
+      <a-table :columns="columns" :data-source="dataSource" :pagination="{ pageSize: 5 }">
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex === 'serviceName'">
+            <a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
+          </template>
+        </template>
+        <template #customFilterIcon="{ filtered }">
+          <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
+        </template>
+      </a-table>
+    </a-flex>
+    
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { SearchOutlined } from '@ant-design/icons-vue'
+import { ref } from 'vue'
+
+const serviceType = ref('provide');
+const serviceName = ref('');
+
+const onSearch = () => {};
+
+const router = useRouter();
+const columns = [
+  {
+    title: '服务',
+    dataIndex: 'serviceName',
+    sorter: true,
+    width: '30%'
+  },
+  {
+    title: '接口数',
+    dataIndex: 'interfaceNum',
+    sorter: true,
+    width: '10%'
+  },
+  {
+    title: '近 1min QPS',
+    dataIndex: 'QPS',
+    sorter: true,
+    width: '15%'
+  },
+  {
+    title: '近 1min RT',
+    dataIndex: 'RT',
+    sorter: true,
+    width: '15%'
+  },
+  {
+    title: '近 1min 请求总量',
+    dataIndex: 'requestTotal',
+    sorter: true,
+    width: '15%'
+  }
+]
+
+const dataSource = [
+  {
+    serviceName: 'org.apache.dubbo.samples.UserService',
+    interfaceNum: 4,
+    QPS: 6,
+    RT: '194ms',
+    requestTotal: 200
+  },
+  {
+    serviceName: 'org.apache.dubbo.samples.OrderService',
+    interfaceNum: 12,
+    QPS: 13,
+    RT: '189ms',
+    requestTotal: 164
+  },
+  {
+    serviceName: 'org.apache.dubbo.samples.DetailService',
+    interfaceNum: 14,
+    QPS: 0.5,
+    RT: '268ms',
+    requestTotal: 1324
+  },
+  {
+    serviceName: 'org.apache.dubbo.samples.PayService',
+    interfaceNum: 8,
+    QPS: 9,
+    RT: '346ms',
+    requestTotal: 189
+  },
+  {
+    serviceName: 'org.apache.dubbo.samples.CommentService',
+    interfaceNum: 9,
+    QPS: 8,
+    RT: '936ms',
+    requestTotal: 200
+  },
+  {
+    serviceName: 'org.apache.dubbo.samples.RepayService',
+    interfaceNum: 16,
+    QPS: 17,
+    RT: '240ms',
+    requestTotal: 146
+  },
+  {
+    serviceName: 'org.apche.dubbo.samples.TransportService',
+    interfaceNum: 5,
+    QPS: 43,
+    RT: '89ms',
+    requestTotal: 367
+  },
+  {
+    serviceName: 'org.apche.dubbo.samples.DistributionService',
+    interfaceNum: 5,
+    QPS: 4,
+    RT: '78ms',
+    requestTotal: 145
+  }
+]
+
+const viewDetail = (serviceName: string) => {
+  router.push({ name: 'detail', params: { serviceName }});
+}
+</script>
+<style lang="less" scoped>
+.__container_services_index {
+  .service-filter {
+    margin-bottom: 20px;
+    .service-name-input {
+      width: 500px;
+      margin-left: 100px;
+    }
+  }
+}
+
+</style>
diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
new file mode 100644
index 000000000..d4f45dd85
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -0,0 +1,108 @@
+<!--
+  ~ 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>
+  <div class="__container_services_tabs_debug">
+    <a-tabs v-model:activeKey="activeKey" tab-position="left" :style="{ height: '800px' }" :tabBarStyle="{ width: '200px' }">
+      <a-tab-pane v-for="i in 100" :key="i" :tab="`Tab-${i}`">
+        <a-flex vertical>
+          <a-flex>
+            <div class="div-column">
+              <a-card title="接口" class="card-content">
+                <p>org.apache.dubbo.samples.UserService:getPermissions</p>
+              </a-card>
+            </div>
+            <div class="div-column">
+              <a-card title="接口" class="card-content">
+                <a-select v-model:value="value" size="large" :options="options" style="width: 100%;"></a-select>
+              </a-card>
+            </div>
+          </a-flex>
+          <a-flex>
+            <div class="div-column">
+              <a-card title="入参类型" class="card-content">
+                <a-textarea v-model:value="responseValue" placeholder="请输入" :rows="4" />
+              </a-card>
+            </div>
+            <div class="div-column">
+              <a-card title="实例IP" class="card-content">
+                <a-textarea v-model:value="responseValue" placeholder="请输入" :rows="4" />
+              </a-card>
+            </div>
+          </a-flex>
+          <a-flex>
+            <div class="div-column">
+              <a-card class="card-content">
+                <a-textarea v-model:value="requestValue" placeholder="请输入" :rows="4" />
+                <template #title>
+                  <a-flex class="request-card-title">
+                    <span>请求</span>
+                    <span>选择生产者：<a-select v-model:value="value" :options="options" style="width: 200px;"></a-select></span>
+                  </a-flex>
+                </template>
+              </a-card>
+            </div>
+            <div class="div-column">
+              <a-card title="响应" class="card-content">
+                <a-textarea v-model:value="responseValue" placeholder="请输入" :rows="4" />
+              </a-card>
+            </div>
+          </a-flex>
+        </a-flex>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+const activeKey = ref(1)
+
+const options = reactive([
+  {
+    value: 'version=,group='
+  },
+  {
+    value: 'version=1.0.0,group='
+  },
+  {
+    value: 'version=,group=group1'
+  },
+  {
+    value: 'version=1.0.0,group=group1'
+  }
+])
+
+const value = ref(options[0].value)
+
+const requestValue = ref('');
+const responseValue = ref('');
+</script>
+<style lang="less" scoped>
+.__container_services_tabs_debug {
+  width: 100%;
+  .div-column {
+    width: 50%;
+    .card-content {
+      width: 80%;
+      .request-card-title{
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/services/tabs/detail.vue b/ui-vue3/src/views/resources/services/tabs/detail.vue
new file mode 100644
index 000000000..757070588
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/tabs/detail.vue
@@ -0,0 +1,59 @@
+<!--
+  ~ 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>
+  <div class="__container_services_tabs_detail">
+    <a-flex horizontal>
+      <a-flex class="flex-column" gap="middle" vertical>
+        <a-card title="服务名：" class="card-content">
+          <p>org.apache.dubbo.samples.UserService</p>
+        </a-card>
+        <a-card title="服务版本&分组：" class="card-content">
+          <div>
+            <a-tag color="cyan">version=v1</a-tag>
+            <a-tag color="cyan">version=2.0,group=group1</a-tag>
+          </div>
+        </a-card>
+        <a-card title="自定义参数：" class="card-content">
+          <p>test</p>
+        </a-card>
+      </a-flex>
+      <a-flex class="flex-column" gap="middle" vertical>
+        <a-card title="近1min请求量：" class="card-content">
+          <p>test</p>
+        </a-card>
+        <a-card title="近1min RT：" class="card-content">
+          <p>test</p>
+        </a-card>
+        <a-card title="近1min QPS：" class="card-content">
+          <p>test</p>
+        </a-card>
+      </a-flex>
+    </a-flex>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped>
+.__container_services_tabs_detail {
+  .flex-column {
+    width: 50%;
+    .card-content {
+      width: 80%;
+    }
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
new file mode 100644
index 000000000..58fe634cb
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -0,0 +1,98 @@
+<!--
+  ~ 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>
+  <div class="__container_services_tabs_distribution">
+    <a-flex vertical>
+      <a-flex class="service-filter">
+        <a-flex>
+          <div>
+            <span>版本&分组：</span>
+            <a-select v-model:value="value" :options="options" class="service-filter-select"></a-select>
+          </div>
+          <div>
+            <a-radio-group v-model:value="value1" button-style="solid" class="service-filter-radios">
+              <a-radio-button value="producer">生产者</a-radio-button>
+              <a-radio-button value="consumer">消费者</a-radio-button>
+            </a-radio-group>
+          </div>
+        </a-flex>
+        <a-input-search
+          v-model:value="searchValue"
+          placeholder="请输入"
+          style="width: 300px"
+          @search="()=>{}"
+          enter-button
+        />
+      </a-flex>
+      <a-table :columns="tableColumns" :data-source="dataSource"></a-table>
+    </a-flex>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+
+const searchValue = ref('');
+const options = reactive([
+  {
+    value: 'version=,group='
+  },
+  {
+    value: 'version=1.0.0,group='
+  },
+  {
+    value: 'version=,group=group1'
+  },
+  {
+    value: 'version=1.0.0,group=group1'
+  }
+])
+const value = ref(options[0].value)
+const value1 = ref('producer')
+const tableColumns = [
+  {
+    title: '应用名',
+    dataIndex: 'applicationName',
+    width: '25%'
+  },
+  {
+    title: '实例数',
+    dataIndex: 'instanceNum',
+    width: '25%'
+  },
+  {
+    title: '实例ip',
+    dataIndex: 'instanceIP',
+    width: '50%'
+  }
+]
+const dataSource = reactive([])
+</script>
+<style lang="less" scoped>
+.__container_services_tabs_distribution {
+  .service-filter {
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .service-filter-select {
+      width: 300px;
+    }
+    .service-filter-radios {
+      margin-left: 50px;
+    }
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/service/event.vue b/ui-vue3/src/views/resources/services/tabs/event.vue
similarity index 81%
rename from ui-vue3/src/views/service/event.vue
rename to ui-vue3/src/views/resources/services/tabs/event.vue
index 512a182d1..d9a86c051 100644
--- a/ui-vue3/src/views/service/event.vue
+++ b/ui-vue3/src/views/resources/services/tabs/event.vue
@@ -15,14 +15,8 @@
   ~ limitations under the License.
 -->
 <template>
-  <div class="__container_home_index">
-    <h1>{{ $t(routeName) }}</h1>
-  </div>
+  <div class="__container_services_tabs_event">事件todo</div>
 </template>
 
-<script setup lang="ts">
-import {useRoute} from "vue-router";
-const routeName = <string>useRoute().name
-
-</script>
+<script setup lang="ts"></script>
 <style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/index.vue b/ui-vue3/src/views/resources/services/tabs/monitor.vue
similarity index 85%
rename from ui-vue3/src/views/service/index.vue
rename to ui-vue3/src/views/resources/services/tabs/monitor.vue
index abdbfc115..baa40c4ab 100644
--- a/ui-vue3/src/views/service/index.vue
+++ b/ui-vue3/src/views/resources/services/tabs/monitor.vue
@@ -15,13 +15,8 @@
   ~ limitations under the License.
 -->
 <template>
-  <div class="__container_home_index">
-    <RouterView />
-  </div>
+  <div class="__container_services_tabs_monitor">监控todo</div>
 </template>
 
-<script setup lang="ts">
-import { RouterView } from 'vue-router';
-
-</script>
+<script setup lang="ts"></script>
 <style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/serviceDistribution.vue b/ui-vue3/src/views/resources/services/tabs/tracing.vue
similarity index 81%
rename from ui-vue3/src/views/service/serviceDistribution.vue
rename to ui-vue3/src/views/resources/services/tabs/tracing.vue
index 512a182d1..ca3bc5119 100644
--- a/ui-vue3/src/views/service/serviceDistribution.vue
+++ b/ui-vue3/src/views/resources/services/tabs/tracing.vue
@@ -15,14 +15,8 @@
   ~ limitations under the License.
 -->
 <template>
-  <div class="__container_home_index">
-    <h1>{{ $t(routeName) }}</h1>
-  </div>
+  <div class="__container_services_tabs_tracing">链路todo</div>
 </template>
 
-<script setup lang="ts">
-import {useRoute} from "vue-router";
-const routeName = <string>useRoute().name
-
-</script>
+<script setup lang="ts"></script>
 <style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/monitor.vue b/ui-vue3/src/views/service/monitor.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui-vue3/src/views/service/serviceDebug.vue b/ui-vue3/src/views/service/serviceDebug.vue
deleted file mode 100644
index 512a182d1..000000000
--- a/ui-vue3/src/views/service/serviceDebug.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
-  ~ 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>
-  <div class="__container_home_index">
-    <h1>{{ $t(routeName) }}</h1>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {useRoute} from "vue-router";
-const routeName = <string>useRoute().name
-
-</script>
-<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/serviceDetail.vue b/ui-vue3/src/views/service/serviceDetail.vue
deleted file mode 100644
index 512a182d1..000000000
--- a/ui-vue3/src/views/service/serviceDetail.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
-  ~ 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>
-  <div class="__container_home_index">
-    <h1>{{ $t(routeName) }}</h1>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {useRoute} from "vue-router";
-const routeName = <string>useRoute().name
-
-</script>
-<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/serviceSearch.vue b/ui-vue3/src/views/service/serviceSearch.vue
deleted file mode 100644
index 6c05f21e1..000000000
--- a/ui-vue3/src/views/service/serviceSearch.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--
-  ~ 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>
-  <div class="__container_home_index">
-    <a-table :columns="columns" :data-source="dataSource">
-      <template #bodyCell="{ column, text }">
-        <template v-if="column.dataIndex === 'service'">
-          <a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
-        </template>
-      </template>
-      <template
-        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
-      >
-        <div style="padding: 8px">
-          <a-input
-            ref="searchInput"
-            :placeholder="`Search ${column.dataIndex}`"
-            :value="selectedKeys[0]"
-            style="width: 188px; margin-bottom: 8px; display: block"
-            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
-            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
-          />
-          <a-button
-            type="primary"
-            size="small"
-            style="width: 90px; margin-right: 8px"
-            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
-          >
-            <template #icon><SearchOutlined /></template>
-            Search
-          </a-button>
-          <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
-            Reset
-          </a-button>
-        </div>
-      </template>
-      <template #customFilterIcon="{ filtered }">
-        <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
-      </template>
-    </a-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { SearchOutlined } from '@ant-design/icons-vue';
-import { reactive, ref } from 'vue';
-
-const router = useRouter()
-const searchInput = ref();
-const columns = [
-  {
-    title: '服务',
-    dataIndex: 'service',
-    sorter: true,
-    width: '30%',
-    customFilterDropdown: true,
-    onFilter: (value: string, record: string) => record.toString().toLowerCase().includes(value.toLowerCase()),
-    onFilterDropdownOpenChange: visible => {
-      if (visible) {
-        setTimeout(() => {
-          searchInput.value.focus();
-        }, 100);
-      }
-    },
-  },
-  {
-    title: '接口数',
-    dataIndex: 'interfaceNumber',
-    width: '10%'
-  },
-  {
-    title: '生产者/消费者实例',
-    dataIndex: 'instance',
-    width: '15%'
-  },
-  {
-    title: '近 1min QPS',
-    dataIndex: 'QPS',
-    sorter: true,
-    width: '15%'
-  },
-  {
-    title: '近 1min RT',
-    dataIndex: 'RT',
-    sorter: true,
-    width: '15%'
-  },
-  {
-    title: '近 1min 请求总量',
-    dataIndex: 'requestTotal',
-    sorter: true,
-    width: '15%'
-  }
-]
-
-const state = reactive({
-  searchText: '',
-  searchedColumn: '',
-});
-
-const handleSearch = (selectedKeys, confirm, dataIndex) => {
-  confirm();
-  state.searchText = selectedKeys[0];
-  state.searchedColumn = dataIndex;
-};
-
-const handleReset = clearFilters => {
-  clearFilters({ confirm: true });
-  state.searchText = '';
-};
-
-const dataSource = [
-  {},
-  {},
-  {
-    service: '123123'
-  },
-  {},
-  {},
-  {}
-]
-
-const viewDetail = (service: string) => {
-  router.push('/serviceDetail');
-}
-</script>
-<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/serviceTab.vue b/ui-vue3/src/views/service/serviceTab.vue
deleted file mode 100644
index 97e43bcfb..000000000
--- a/ui-vue3/src/views/service/serviceTab.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<!--
-  ~ 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>
-  <div class="__container_home_index">
-    <a-tabs v-model:activeKey="activeKey">
-      <a-tab-pane v-for="tab in tabs" :key="tab.title" :tab="tab.title" @click="() => {
-        console.log(123)
-        router.push(tab.title)
-      }">
-        <router-view/>
-      </a-tab-pane>
-    </a-tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-
-  const tabs = [
-  {
-    title: 'serviceDetails'
-  },
-  {
-    title: 'serviceDebug'
-  },
-  {
-    title: 'serviceDistribution',
-  },
-  {
-    title: 'monitor',
-  },
-  {
-    title: 'tracing',
-  },
-  {
-    title: 'event',
-  }
-]
-</script>
-<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/service/tracing.vue b/ui-vue3/src/views/service/tracing.vue
deleted file mode 100644
index e69de29bb..000000000

From 5190f94cd5f8abff176f0e2bbb71d4cc37b41836 Mon Sep 17 00:00:00 2001
From: jianyi-gronk <jianyi_gronk@163.com>
Date: Fri, 19 Jan 2024 23:35:54 +0800
Subject: [PATCH 3/8] update style version from 0.0.7 to 0.0.8

---
 .../src/views/resources/services/index.vue    |  13 +-
 .../src/views/resources/services/search.vue   |  16 +-
 .../views/resources/services/tabs/debug.vue   | 149 ++++++++++++++----
 .../views/resources/services/tabs/detail.vue  |  41 +++--
 .../resources/services/tabs/distribution.vue  | 101 ++++++++----
 5 files changed, 225 insertions(+), 95 deletions(-)

diff --git a/ui-vue3/src/views/resources/services/index.vue b/ui-vue3/src/views/resources/services/index.vue
index ddab54a61..2764e2a15 100644
--- a/ui-vue3/src/views/resources/services/index.vue
+++ b/ui-vue3/src/views/resources/services/index.vue
@@ -16,7 +16,12 @@
 -->
 <template>
   <div class="__container_services">
-    <Icon icon="material-symbols:arrow-back-ios-new-rounded" v-if="route.name !== 'search'" @click="backSearch" class="icon-back"/>
+    <Icon
+      icon="material-symbols:arrow-back-ios-new-rounded"
+      v-if="route.name !== 'search'"
+      @click="backSearch"
+      class="icon-back"
+    />
     <LayoutTab></LayoutTab>
   </div>
 </template>
@@ -26,11 +31,11 @@ import LayoutTab from '@/layout/tab/layout_tab.vue'
 import { Icon } from '@iconify/vue'
 import { useRoute, useRouter } from 'vue-router'
 
-const route = useRoute();
-const router = useRouter();
+const route = useRoute()
+const router = useRouter()
 
 const backSearch = () => {
-  router.push({ name: 'search' });
+  router.push({ name: 'search' })
 }
 </script>
 <style lang="less" scoped>
diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
index ddffcc549..8ea77ff8f 100644
--- a/ui-vue3/src/views/resources/services/search.vue
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -18,10 +18,6 @@
   <div class="__container_services_index">
     <a-flex vertical>
       <a-flex class="service-filter">
-        <a-radio-group v-model:value="serviceType" button-style="solid">
-          <a-radio-button value="provide">{{ $t('provideService') }}</a-radio-button>
-          <a-radio-button value="dependent">{{ $t('dependentService') }}</a-radio-button>
-        </a-radio-group>
         <a-input-search
           v-model:value="serviceName"
           placeholder="请输入"
@@ -41,7 +37,6 @@
         </template>
       </a-table>
     </a-flex>
-    
   </div>
 </template>
 
@@ -50,12 +45,11 @@ import { useRouter } from 'vue-router'
 import { SearchOutlined } from '@ant-design/icons-vue'
 import { ref } from 'vue'
 
-const serviceType = ref('provide');
-const serviceName = ref('');
+const serviceName = ref('')
 
-const onSearch = () => {};
+const onSearch = () => {}
 
-const router = useRouter();
+const router = useRouter()
 const columns = [
   {
     title: '服务',
@@ -149,7 +143,7 @@ const dataSource = [
 ]
 
 const viewDetail = (serviceName: string) => {
-  router.push({ name: 'detail', params: { serviceName }});
+  router.push({ name: 'detail', params: { serviceName } })
 }
 </script>
 <style lang="less" scoped>
@@ -158,9 +152,7 @@ const viewDetail = (serviceName: string) => {
     margin-bottom: 20px;
     .service-name-input {
       width: 500px;
-      margin-left: 100px;
     }
   }
 }
-
 </style>
diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
index d4f45dd85..d2f557622 100644
--- a/ui-vue3/src/views/resources/services/tabs/debug.vue
+++ b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -16,52 +16,70 @@
 -->
 <template>
   <div class="__container_services_tabs_debug">
-    <a-tabs v-model:activeKey="activeKey" tab-position="left" :style="{ height: '800px' }" :tabBarStyle="{ width: '200px' }">
-      <a-tab-pane v-for="i in 100" :key="i" :tab="`Tab-${i}`">
+    <div class="tabs-title">方法列表</div>
+    <a-tabs
+      v-model:activeKey="activeKey"
+      tab-position="left"
+      :style="{ height: '800px' }"
+      :tabBarStyle="{ width: '200px' }"
+    >
+      <a-tab-pane v-for="tabName in methodTabs" :key="tabName" :tab="`${tabName}`">
         <a-flex vertical>
           <a-flex>
             <div class="div-column">
-              <a-card title="接口" class="card-content">
+              <a-card title="接口:" class="card-content" size="small">
                 <p>org.apache.dubbo.samples.UserService:getPermissions</p>
               </a-card>
             </div>
-            <div class="div-column">
-              <a-card title="接口" class="card-content">
-                <a-select v-model:value="value" size="large" :options="options" style="width: 100%;"></a-select>
-              </a-card>
-            </div>
+            <a-flex class="div-column">
+              <div class="div-column">
+                <a-card title="版本&分组:" class="card-content" size="small">
+                  <a-select
+                    v-model:value="versionAndGroup"
+                    size="large"
+                    :options="versionAndGroupOptions"
+                    style="width: 100%"
+                  ></a-select>
+                </a-card>
+              </div>
+              <div class="div-column">
+                <a-card title="指定生产者:" class="card-content" size="small">
+                  <a-select
+                    v-model:value="versionAndGroup"
+                    size="large"
+                    :options="versionAndGroupOptions"
+                    style="width: 100%"
+                  ></a-select>
+                </a-card>
+              </div>
+            </a-flex>
           </a-flex>
           <a-flex>
             <div class="div-column">
-              <a-card title="入参类型" class="card-content">
-                <a-textarea v-model:value="responseValue" placeholder="请输入" :rows="4" />
+              <a-card title="入参类型:" class="card-content" size="small">
+                <a-tree block-node :tree-data="enterParamType" />
               </a-card>
             </div>
             <div class="div-column">
-              <a-card title="实例IP" class="card-content">
-                <a-textarea v-model:value="responseValue" placeholder="请输入" :rows="4" />
+              <a-card title="出参类型:" class="card-content" size="small">
+                <a-tree block-node :tree-data="outputParamType" />
               </a-card>
             </div>
           </a-flex>
           <a-flex>
             <div class="div-column">
-              <a-card class="card-content">
+              <a-card title="请求:" class="card-content" size="small">
                 <a-textarea v-model:value="requestValue" placeholder="请输入" :rows="4" />
-                <template #title>
-                  <a-flex class="request-card-title">
-                    <span>请求</span>
-                    <span>选择生产者：<a-select v-model:value="value" :options="options" style="width: 200px;"></a-select></span>
-                  </a-flex>
-                </template>
               </a-card>
             </div>
             <div class="div-column">
-              <a-card title="响应" class="card-content">
+              <a-card title="响应:" class="card-content" size="small">
                 <a-textarea v-model:value="responseValue" placeholder="请输入" :rows="4" />
               </a-card>
             </div>
           </a-flex>
         </a-flex>
+        <a-button type="primary">发送请求</a-button>
       </a-tab-pane>
     </a-tabs>
   </div>
@@ -69,39 +87,100 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-const activeKey = ref(1)
 
-const options = reactive([
-  {
-    value: 'version=,group='
-  },
+const methodTabs = reactive([
+  'login',
+  'register',
+  'logout',
+  'query',
+  'suspend',
+  'updateInfo',
+  'getPermissions',
+  'auth',
+  'comment'
+])
+
+const activeKey = ref(methodTabs[0])
+
+const versionAndGroupOptions = reactive([
   {
-    value: 'version=1.0.0,group='
+    value: 'version=1.0.0'
   },
   {
-    value: 'version=,group=group1'
+    value: 'group=group1'
   },
   {
     value: 'version=1.0.0,group=group1'
   }
 ])
 
-const value = ref(options[0].value)
+const versionAndGroup = ref(versionAndGroupOptions[0].value)
+
+const enterParamType = [
+  {
+    title: 'param0: java.lang.String',
+    key: '0'
+  },
+  {
+    title: 'param1: org.apache.dubbo.samples.api.User',
+    key: '1',
+    children: [
+      {
+        title: 'name: java.lang.String',
+        key: '1-0'
+      },
+      {
+        title: 'id: java.lang.Long',
+        key: '1-1'
+      },
+      {
+        title: 'createTime: java.Date.DateTime',
+        key: '1-2'
+      }
+    ]
+  }
+]
 
-const requestValue = ref('');
-const responseValue = ref('');
+const outputParamType = [
+  {
+    title: 'param0: org.apache.dubbo.samples.api.Response',
+    key: '0',
+    children: [
+      {
+        title: 'success: boolean',
+        key: '0-0'
+      },
+      {
+        title: 'phone: java.lang.String',
+        key: '0-1'
+      },
+      {
+        title: 'lastLoginTime: java.Date.LocalDateTime',
+        key: '0-2'
+      },
+      {
+        title: 'follows: java.util.List',
+        key: '0-3'
+      }
+    ]
+  }
+]
+
+const requestValue = ref('')
+const responseValue = ref('')
 </script>
 <style lang="less" scoped>
 .__container_services_tabs_debug {
   width: 100%;
+  .tabs-title {
+    width: 200px;
+    text-align: center;
+  }
   .div-column {
     width: 50%;
     .card-content {
-      width: 80%;
-      .request-card-title{
-        align-items: center;
-        justify-content: space-between;
-      }
+      width: 90%;
+      margin-bottom: 10px;
     }
   }
 }
diff --git a/ui-vue3/src/views/resources/services/tabs/detail.vue b/ui-vue3/src/views/resources/services/tabs/detail.vue
index 757070588..77eb01fe1 100644
--- a/ui-vue3/src/views/resources/services/tabs/detail.vue
+++ b/ui-vue3/src/views/resources/services/tabs/detail.vue
@@ -16,30 +16,42 @@
 -->
 <template>
   <div class="__container_services_tabs_detail">
-    <a-flex horizontal>
-      <a-flex class="flex-column" gap="middle" vertical>
-        <a-card title="服务名：" class="card-content">
+    <a-flex>
+      <a-flex class="flex-column" vertical>
+        <a-card title="服务名:" class="card-content" size="small">
           <p>org.apache.dubbo.samples.UserService</p>
         </a-card>
-        <a-card title="服务版本&分组：" class="card-content">
+        <a-card title="服务版本&分组:" class="card-content" size="small">
           <div>
             <a-tag color="cyan">version=v1</a-tag>
             <a-tag color="cyan">version=2.0,group=group1</a-tag>
           </div>
         </a-card>
-        <a-card title="自定义参数：" class="card-content">
-          <p>test</p>
+        <a-card title="RPC协议:" class="card-content" size="small">
+          <p>triple</p>
+        </a-card>
+        <a-card title="延迟注册时间:" class="card-content" size="small">
+          <p>3000ms</p>
+        </a-card>
+        <a-card title="超时时间:" class="card-content" size="small">
+          <p>3000ms</p>
+        </a-card>
+        <a-card title="重试次数:" class="card-content" size="small">
+          <p>3</p>
         </a-card>
       </a-flex>
-      <a-flex class="flex-column" gap="middle" vertical>
-        <a-card title="近1min请求量：" class="card-content">
-          <p>test</p>
+      <a-flex class="flex-column" vertical>
+        <a-card title="请求总量(1min):" class="card-content" size="small">
+          <p>1384</p>
+        </a-card>
+        <a-card title="平均RT(1min):" class="card-content" size="small">
+          <p>96ms</p>
         </a-card>
-        <a-card title="近1min RT：" class="card-content">
-          <p>test</p>
+        <a-card title="平均qps(1min):" class="card-content" size="small">
+          <p>12</p>
         </a-card>
-        <a-card title="近1min QPS：" class="card-content">
-          <p>test</p>
+        <a-card title="是否过时:" class="card-content" size="small">
+          <p>false</p>
         </a-card>
       </a-flex>
     </a-flex>
@@ -52,7 +64,8 @@
   .flex-column {
     width: 50%;
     .card-content {
-      width: 80%;
+      width: 90%;
+      margin-bottom: 10px;
     }
   }
 }
diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
index 58fe634cb..7414703fd 100644
--- a/ui-vue3/src/views/resources/services/tabs/distribution.vue
+++ b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -20,59 +20,81 @@
       <a-flex class="service-filter">
         <a-flex>
           <div>
-            <span>版本&分组：</span>
-            <a-select v-model:value="value" :options="options" class="service-filter-select"></a-select>
-          </div>
-          <div>
-            <a-radio-group v-model:value="value1" button-style="solid" class="service-filter-radios">
-              <a-radio-button value="producer">生产者</a-radio-button>
-              <a-radio-button value="consumer">消费者</a-radio-button>
-            </a-radio-group>
+            <span>版本&分组:</span>
+            <a-select
+              v-model:value="versionAndGroup"
+              :options="versionAndGroupOptions"
+              class="service-filter-select"
+            ></a-select>
           </div>
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="搜索应用，ip，支持前缀搜索"
+            class="service-filter-input"
+            @search="() => {}"
+            enter-button
+          />
         </a-flex>
-        <a-input-search
-          v-model:value="searchValue"
-          placeholder="请输入"
-          style="width: 300px"
-          @search="()=>{}"
-          enter-button
-        />
+        <div>
+          <a-radio-group
+            v-model:value="type"
+            button-style="solid"
+          >
+            <a-radio-button value="producer">生产者</a-radio-button>
+            <a-radio-button value="consumer">消费者</a-radio-button>
+          </a-radio-group>
+        </div>
       </a-flex>
-      <a-table :columns="tableColumns" :data-source="dataSource"></a-table>
+      <a-table :columns="tableColumns" :data-source="tableData">
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex === 'applicationName'">
+            <a-button type="link">{{ text }}</a-button>
+          </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>
+        </template>
+      </a-table>
     </a-flex>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
+import { ref, reactive } from 'vue'
 
-const searchValue = ref('');
-const options = reactive([
+const searchValue = ref('')
+const versionAndGroupOptions = reactive([
   {
-    value: 'version=,group='
+    value: '不指定'
   },
   {
-    value: 'version=1.0.0,group='
+    value: 'version=1.0.0'
   },
   {
-    value: 'version=,group=group1'
+    value: 'group=group1'
   },
   {
     value: 'version=1.0.0,group=group1'
   }
 ])
-const value = ref(options[0].value)
-const value1 = ref('producer')
+const versionAndGroup = ref(versionAndGroupOptions[0].value)
+const type = ref('producer')
+
 const tableColumns = [
   {
     title: '应用名',
     dataIndex: 'applicationName',
-    width: '25%'
+    width: '25%',
+    sorter: true
   },
   {
     title: '实例数',
     dataIndex: 'instanceNum',
-    width: '25%'
+    width: '25%',
+    sorter: true
   },
   {
     title: '实例ip',
@@ -80,7 +102,24 @@ const tableColumns = [
     width: '50%'
   }
 ]
-const dataSource = reactive([])
+
+const tableData = reactive([
+  {
+    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']
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  }
+])
 </script>
 <style lang="less" scoped>
 .__container_services_tabs_distribution {
@@ -88,10 +127,12 @@ const dataSource = reactive([])
     justify-content: space-between;
     margin-bottom: 20px;
     .service-filter-select {
-      width: 300px;
+      margin-left: 10px;
+      width: 250px;
     }
-    .service-filter-radios {
-      margin-left: 50px;
+    .service-filter-input {
+      margin-left: 30px;
+      width: 300px
     }
   }
 }

From 4b1378058118a8cfaf3a711b7ba4802efc6e4b58 Mon Sep 17 00:00:00 2001
From: jianyi-gronk <jianyi_gronk@163.com>
Date: Sat, 20 Jan 2024 12:52:32 +0800
Subject: [PATCH 4/8] change a-card to a-description

---
 .../views/resources/services/tabs/debug.vue   | 100 +++++++-----------
 .../views/resources/services/tabs/detail.vue  |  77 +++++++-------
 2 files changed, 76 insertions(+), 101 deletions(-)

diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
index d2f557622..750611529 100644
--- a/ui-vue3/src/views/resources/services/tabs/debug.vue
+++ b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -24,61 +24,42 @@
       :tabBarStyle="{ width: '200px' }"
     >
       <a-tab-pane v-for="tabName in methodTabs" :key="tabName" :tab="`${tabName}`">
-        <a-flex vertical>
-          <a-flex>
-            <div class="div-column">
-              <a-card title="接口:" class="card-content" size="small">
-                <p>org.apache.dubbo.samples.UserService:getPermissions</p>
-              </a-card>
-            </div>
-            <a-flex class="div-column">
-              <div class="div-column">
-                <a-card title="版本&分组:" class="card-content" size="small">
-                  <a-select
-                    v-model:value="versionAndGroup"
-                    size="large"
-                    :options="versionAndGroupOptions"
-                    style="width: 100%"
-                  ></a-select>
-                </a-card>
-              </div>
-              <div class="div-column">
-                <a-card title="指定生产者:" class="card-content" size="small">
-                  <a-select
-                    v-model:value="versionAndGroup"
-                    size="large"
-                    :options="versionAndGroupOptions"
-                    style="width: 100%"
-                  ></a-select>
-                </a-card>
-              </div>
-            </a-flex>
-          </a-flex>
-          <a-flex>
-            <div class="div-column">
-              <a-card title="入参类型:" class="card-content" size="small">
-                <a-tree block-node :tree-data="enterParamType" />
-              </a-card>
-            </div>
-            <div class="div-column">
-              <a-card title="出参类型:" class="card-content" size="small">
-                <a-tree block-node :tree-data="outputParamType" />
-              </a-card>
-            </div>
-          </a-flex>
-          <a-flex>
-            <div class="div-column">
-              <a-card title="请求:" class="card-content" size="small">
-                <a-textarea v-model:value="requestValue" placeholder="请输入" :rows="4" />
-              </a-card>
-            </div>
-            <div class="div-column">
-              <a-card title="响应:" class="card-content" size="small">
-                <a-textarea v-model:value="responseValue" placeholder="请输入" :rows="4" />
-              </a-card>
-            </div>
-          </a-flex>
-        </a-flex>
+        <a-descriptions :column="4" layout="vertical">
+          <a-descriptions-item label="接口" :span="2">
+            <p class="description-item-content">org.apache.dubbo.samples.UserService:getPermissions</p>
+          </a-descriptions-item>
+          <a-descriptions-item label="版本&分组">
+            <div class="description-item-content">
+            <a-select
+              v-model:value="versionAndGroup"
+              size="large"
+              :options="versionAndGroupOptions"
+              style="width: 100%"
+            ></a-select>
+          </div>
+          </a-descriptions-item>
+          <a-descriptions-item label="指定生产者">
+            <a-select
+              v-model:value="versionAndGroup"
+              size="large"
+              :options="versionAndGroupOptions"
+              style="width: 100%"
+              class="description-item-content"
+            ></a-select>
+          </a-descriptions-item>
+          <a-descriptions-item label="入参类型" :span="2">
+            <a-tree block-node :tree-data="enterParamType" class="description-item-content" />
+          </a-descriptions-item>
+          <a-descriptions-item label="出参类型" :span="2">
+            <a-tree block-node :tree-data="outputParamType" class="description-item-content" />
+          </a-descriptions-item>
+          <a-descriptions-item label="请求" :span="2">
+            <a-textarea v-model:value="requestValue" placeholder="请输入" :rows="4" class="description-item-content" />
+          </a-descriptions-item>
+          <a-descriptions-item label="响应" :span="2">
+            <a-textarea v-model:value="responseValue" placeholder="请输入" :rows="4" class="description-item-content" />
+          </a-descriptions-item>
+        </a-descriptions>
         <a-button type="primary">发送请求</a-button>
       </a-tab-pane>
     </a-tabs>
@@ -176,12 +157,9 @@ const responseValue = ref('')
     width: 200px;
     text-align: center;
   }
-  .div-column {
-    width: 50%;
-    .card-content {
-      width: 90%;
-      margin-bottom: 10px;
-    }
+  .description-item-content {
+    margin-left: 20px;
+    width: 90%;
   }
 }
 </style>
diff --git a/ui-vue3/src/views/resources/services/tabs/detail.vue b/ui-vue3/src/views/resources/services/tabs/detail.vue
index 77eb01fe1..1a260631e 100644
--- a/ui-vue3/src/views/resources/services/tabs/detail.vue
+++ b/ui-vue3/src/views/resources/services/tabs/detail.vue
@@ -17,43 +17,43 @@
 <template>
   <div class="__container_services_tabs_detail">
     <a-flex>
-      <a-flex class="flex-column" vertical>
-        <a-card title="服务名:" class="card-content" size="small">
-          <p>org.apache.dubbo.samples.UserService</p>
-        </a-card>
-        <a-card title="服务版本&分组:" class="card-content" size="small">
-          <div>
+      <a-descriptions class="description-column" :column="1" layout="vertical">
+        <a-descriptions-item label="服务名">
+          <p class="description-item-content">org.apache.dubbo.samples.UserService</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="服务版本&分组">
+          <div class="description-item-content">
             <a-tag color="cyan">version=v1</a-tag>
             <a-tag color="cyan">version=2.0,group=group1</a-tag>
           </div>
-        </a-card>
-        <a-card title="RPC协议:" class="card-content" size="small">
-          <p>triple</p>
-        </a-card>
-        <a-card title="延迟注册时间:" class="card-content" size="small">
-          <p>3000ms</p>
-        </a-card>
-        <a-card title="超时时间:" class="card-content" size="small">
-          <p>3000ms</p>
-        </a-card>
-        <a-card title="重试次数:" class="card-content" size="small">
-          <p>3</p>
-        </a-card>
-      </a-flex>
-      <a-flex class="flex-column" vertical>
-        <a-card title="请求总量(1min):" class="card-content" size="small">
-          <p>1384</p>
-        </a-card>
-        <a-card title="平均RT(1min):" class="card-content" size="small">
-          <p>96ms</p>
-        </a-card>
-        <a-card title="平均qps(1min):" class="card-content" size="small">
-          <p>12</p>
-        </a-card>
-        <a-card title="是否过时:" class="card-content" size="small">
-          <p>false</p>
-        </a-card>
-      </a-flex>
+        </a-descriptions-item>
+        <a-descriptions-item label="RPC协议">
+          <p class="description-item-content">triple</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="延迟注册时间">
+          <p class="description-item-content">3000ms</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="超时时间">
+          <p class="description-item-content">3000ms</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="重试次数">
+          <p class="description-item-content">3</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">1384</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="平均RT(1min)">
+          <p class="description-item-content">96ms</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="平均qps(1min)">
+          <p class="description-item-content">12</p>
+        </a-descriptions-item>
+        <a-descriptions-item label="是否过时">
+          <p class="description-item-content">false</p>
+        </a-descriptions-item>
+      </a-descriptions>
     </a-flex>
   </div>
 </template>
@@ -61,12 +61,9 @@
 <script setup lang="ts"></script>
 <style lang="less" scoped>
 .__container_services_tabs_detail {
-  .flex-column {
-    width: 50%;
-    .card-content {
-      width: 90%;
-      margin-bottom: 10px;
-    }
+  .description-item-content {
+    margin-left: 20px;
+    width: 90%;
   }
 }
 </style>

From 2b6fd274e5c4d09067c5e33e463040de04f98ce6 Mon Sep 17 00:00:00 2001
From: jianyi-gronk <jianyi_gronk@163.com>
Date: Sat, 20 Jan 2024 20:18:06 +0800
Subject: [PATCH 5/8] delete filter in table

---
 ui-vue3/src/views/resources/services/search.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
index 8ea77ff8f..379b1dd9c 100644
--- a/ui-vue3/src/views/resources/services/search.vue
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -32,9 +32,6 @@
             <a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
           </template>
         </template>
-        <template #customFilterIcon="{ filtered }">
-          <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
-        </template>
       </a-table>
     </a-flex>
   </div>
@@ -42,7 +39,6 @@
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { SearchOutlined } from '@ant-design/icons-vue'
 import { ref } from 'vue'
 
 const serviceName = ref('')

From d3e40f4763bd2a545f661648e59dd4fb05485565 Mon Sep 17 00:00:00 2001
From: jianyi-gronk <jianyi_gronk@163.com>
Date: Mon, 22 Jan 2024 22:42:13 +0800
Subject: [PATCH 6/8] add service search api

---
 ui-vue3/src/api/mock/mockService.ts | 86 +++++++++++++++++++++++++++++
 ui-vue3/src/api/service/service.ts  | 26 +++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 ui-vue3/src/api/mock/mockService.ts
 create mode 100644 ui-vue3/src/api/service/service.ts

diff --git a/ui-vue3/src/api/mock/mockService.ts b/ui-vue3/src/api/mock/mockService.ts
new file mode 100644
index 000000000..f5e975eb6
--- /dev/null
+++ b/ui-vue3/src/api/mock/mockService.ts
@@ -0,0 +1,86 @@
+/*
+ * 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.
+ */
+
+import Mock from 'mockjs'
+
+Mock.mock('/mock/service/search', 'get', {
+  code: 200,
+  message: 'success',
+  data: {
+    total: 8,
+    curPage: 1,
+    pageSize: 1,
+    data: [
+      {
+        serviceName: 'org.apache.dubbo.samples.UserService',
+        interfaceNum: 4,
+        avgQPS: 6,
+        avgRT: '194ms',
+        requestTotal: 200
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.OrderService',
+        interfaceNum: 12,
+        avgQPS: 13,
+        avgRT: '189ms',
+        requestTotal: 164
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.DetailService',
+        interfaceNum: 14,
+        avgQPS: 0.5,
+        avgRT: '268ms',
+        requestTotal: 1324
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.PayService',
+        interfaceNum: 8,
+        avgQPS: 9,
+        avgRT: '346ms',
+        requestTotal: 189
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.CommentService',
+        interfaceNum: 9,
+        avgQPS: 8,
+        avgRT: '936ms',
+        requestTotal: 200
+      },
+      {
+        serviceName: 'org.apache.dubbo.samples.RepayService',
+        interfaceNum: 16,
+        avgQPS: 17,
+        avgRT: '240ms',
+        requestTotal: 146
+      },
+      {
+        serviceName: 'org.apche.dubbo.samples.TransportService',
+        interfaceNum: 5,
+        avgQPS: 43,
+        avgRT: '89ms',
+        requestTotal: 367
+      },
+      {
+        serviceName: 'org.apche.dubbo.samples.DistributionService',
+        interfaceNum: 5,
+        avgQPS: 4,
+        avgRT: '78ms',
+        requestTotal: 145
+      }
+    ]
+  }
+})
diff --git a/ui-vue3/src/api/service/service.ts b/ui-vue3/src/api/service/service.ts
new file mode 100644
index 000000000..225f86ec2
--- /dev/null
+++ b/ui-vue3/src/api/service/service.ts
@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+import request from '@/base/http/request'
+
+export const searchService = (params: any): Promise<any> => {
+  return request({
+    url: '/service/search',
+    method: 'get',
+    params
+  })
+}

From b3c42e9a4adaf776416869a5491e9ce82daa89e4 Mon Sep 17 00:00:00 2001
From: jianyi-gronk <jianyi_gronk@163.com>
Date: Mon, 22 Jan 2024 23:57:00 +0800
Subject: [PATCH 7/8] update service related UI

---
 .../src/views/resources/services/search.vue   | 103 +++++++-----------
 .../views/resources/services/tabs/debug.vue   |  24 ++--
 .../resources/services/tabs/distribution.vue  |  15 ++-
 3 files changed, 66 insertions(+), 76 deletions(-)

diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
index 379b1dd9c..9d36ebfa1 100644
--- a/ui-vue3/src/views/resources/services/search.vue
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -22,11 +22,16 @@
           v-model:value="serviceName"
           placeholder="请输入"
           class="service-name-input"
-          @search="onSearch"
+          @search="debounceSearch"
           enter-button
         />
       </a-flex>
-      <a-table :columns="columns" :data-source="dataSource" :pagination="{ pageSize: 5 }">
+      <a-table
+        :columns="columns"
+        :data-source="dataSource"
+        :pagination="pagination"
+        :scroll="{ y: '55vh' }"
+      >
         <template #bodyCell="{ column, text }">
           <template v-if="column.dataIndex === 'serviceName'">
             <a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
@@ -39,11 +44,18 @@
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { ref } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import { ref, getCurrentInstance } from 'vue'
+import { searchService } from '@/api/service/service.ts'
+import { debounce } from 'lodash'
 
-const serviceName = ref('')
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
 
-const onSearch = () => {}
+const serviceName = ref('')
 
 const router = useRouter()
 const columns = [
@@ -61,13 +73,13 @@ const columns = [
   },
   {
     title: '近 1min QPS',
-    dataIndex: 'QPS',
+    dataIndex: 'avgQPS',
     sorter: true,
     width: '15%'
   },
   {
     title: '近 1min RT',
-    dataIndex: 'RT',
+    dataIndex: 'avgRT',
     sorter: true,
     width: '15%'
   },
@@ -79,68 +91,29 @@ const columns = [
   }
 ]
 
-const dataSource = [
-  {
-    serviceName: 'org.apache.dubbo.samples.UserService',
-    interfaceNum: 4,
-    QPS: 6,
-    RT: '194ms',
-    requestTotal: 200
-  },
-  {
-    serviceName: 'org.apache.dubbo.samples.OrderService',
-    interfaceNum: 12,
-    QPS: 13,
-    RT: '189ms',
-    requestTotal: 164
-  },
-  {
-    serviceName: 'org.apache.dubbo.samples.DetailService',
-    interfaceNum: 14,
-    QPS: 0.5,
-    RT: '268ms',
-    requestTotal: 1324
-  },
-  {
-    serviceName: 'org.apache.dubbo.samples.PayService',
-    interfaceNum: 8,
-    QPS: 9,
-    RT: '346ms',
-    requestTotal: 189
-  },
-  {
-    serviceName: 'org.apache.dubbo.samples.CommentService',
-    interfaceNum: 9,
-    QPS: 8,
-    RT: '936ms',
-    requestTotal: 200
-  },
-  {
-    serviceName: 'org.apache.dubbo.samples.RepayService',
-    interfaceNum: 16,
-    QPS: 17,
-    RT: '240ms',
-    requestTotal: 146
-  },
-  {
-    serviceName: 'org.apche.dubbo.samples.TransportService',
-    interfaceNum: 5,
-    QPS: 43,
-    RT: '89ms',
-    requestTotal: 367
-  },
-  {
-    serviceName: 'org.apche.dubbo.samples.DistributionService',
-    interfaceNum: 5,
-    QPS: 4,
-    RT: '78ms',
-    requestTotal: 145
-  }
-]
+const dataSource = ref([])
+
+const onSearch = async () => {
+  let { data } = await searchService({})
+  dataSource.value = data.data
+}
+
+onSearch()
+
+const debounceSearch = debounce(onSearch, 300)
 
 const viewDetail = (serviceName: string) => {
   router.push({ name: 'detail', params: { serviceName } })
 }
+
+const pagination = {
+  showTotal: (v: any) =>
+    globalProperties.$t('searchDomain.total') +
+    ': ' +
+    v +
+    ' ' +
+    globalProperties.$t('searchDomain.unit')
+}
 </script>
 <style lang="less" scoped>
 .__container_services_index {
diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
index 750611529..e42b9af75 100644
--- a/ui-vue3/src/views/resources/services/tabs/debug.vue
+++ b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -20,30 +20,28 @@
     <a-tabs
       v-model:activeKey="activeKey"
       tab-position="left"
-      :style="{ height: '800px' }"
       :tabBarStyle="{ width: '200px' }"
     >
       <a-tab-pane v-for="tabName in methodTabs" :key="tabName" :tab="`${tabName}`">
         <a-descriptions :column="4" layout="vertical">
           <a-descriptions-item label="接口" :span="2">
-            <p class="description-item-content">org.apache.dubbo.samples.UserService:getPermissions</p>
+            <p class="description-item-content">
+              org.apache.dubbo.samples.UserService:getPermissions
+            </p>
           </a-descriptions-item>
           <a-descriptions-item label="版本&分组">
-            <div class="description-item-content">
             <a-select
               v-model:value="versionAndGroup"
               size="large"
               :options="versionAndGroupOptions"
-              style="width: 100%"
+              class="description-item-content"
             ></a-select>
-          </div>
           </a-descriptions-item>
           <a-descriptions-item label="指定生产者">
             <a-select
               v-model:value="versionAndGroup"
               size="large"
               :options="versionAndGroupOptions"
-              style="width: 100%"
               class="description-item-content"
             ></a-select>
           </a-descriptions-item>
@@ -54,10 +52,20 @@
             <a-tree block-node :tree-data="outputParamType" class="description-item-content" />
           </a-descriptions-item>
           <a-descriptions-item label="请求" :span="2">
-            <a-textarea v-model:value="requestValue" placeholder="请输入" :rows="4" class="description-item-content" />
+            <a-textarea
+              v-model="requestValue"
+              placeholder="请输入"
+              :rows="4"
+              class="description-item-content"
+            />
           </a-descriptions-item>
           <a-descriptions-item label="响应" :span="2">
-            <a-textarea v-model:value="responseValue" placeholder="请输入" :rows="4" class="description-item-content" />
+            <a-textarea
+              v-model="responseValue"
+              placeholder="请输入"
+              :rows="4"
+              class="description-item-content"
+            />
           </a-descriptions-item>
         </a-descriptions>
         <a-button type="primary">发送请求</a-button>
diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
index 7414703fd..c146ffff8 100644
--- a/ui-vue3/src/views/resources/services/tabs/distribution.vue
+++ b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -68,15 +68,19 @@ import { ref, reactive } from 'vue'
 const searchValue = ref('')
 const versionAndGroupOptions = reactive([
   {
-    value: '不指定'
+    label: '不指定',
+    value: ''
   },
   {
+    label: 'version=1.0.0',
     value: 'version=1.0.0'
   },
   {
+    label: 'group=group1',
     value: 'group=group1'
   },
   {
+    label: 'version=1.0.0,group=group1',
     value: 'version=1.0.0,group=group1'
   }
 ])
@@ -107,7 +111,12 @@ const tableData = reactive([
   {
     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']
+    instanceIP: [
+      '192.168.32.28:8697',
+      '192.168.32.26:20880',
+      '192.168.32.24:28080',
+      '192.168.32.22:20880'
+    ]
   },
   {
     applicationName: 'shop-order',
@@ -132,7 +141,7 @@ const tableData = reactive([
     }
     .service-filter-input {
       margin-left: 30px;
-      width: 300px
+      width: 300px;
     }
   }
 }

From 51d102481168cd59ef12beeb69c0cf5bdb11853d Mon Sep 17 00:00:00 2001
From: jianyi-gronk <jianyi_gronk@163.com>
Date: Tue, 23 Jan 2024 00:16:52 +0800
Subject: [PATCH 8/8] Unified table style

---
 .../views/resources/services/tabs/debug.vue   |  6 +-
 .../resources/services/tabs/distribution.vue  | 75 +++++++++++++++++--
 2 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
index e42b9af75..553507491 100644
--- a/ui-vue3/src/views/resources/services/tabs/debug.vue
+++ b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -17,11 +17,7 @@
 <template>
   <div class="__container_services_tabs_debug">
     <div class="tabs-title">方法列表</div>
-    <a-tabs
-      v-model:activeKey="activeKey"
-      tab-position="left"
-      :tabBarStyle="{ width: '200px' }"
-    >
+    <a-tabs v-model:activeKey="activeKey" tab-position="left" :tabBarStyle="{ width: '200px' }">
       <a-tab-pane v-for="tabName in methodTabs" :key="tabName" :tab="`${tabName}`">
         <a-descriptions :column="4" layout="vertical">
           <a-descriptions-item label="接口" :span="2">
diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
index c146ffff8..9a402e689 100644
--- a/ui-vue3/src/views/resources/services/tabs/distribution.vue
+++ b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -36,16 +36,18 @@
           />
         </a-flex>
         <div>
-          <a-radio-group
-            v-model:value="type"
-            button-style="solid"
-          >
+          <a-radio-group v-model:value="type" button-style="solid">
             <a-radio-button value="producer">生产者</a-radio-button>
             <a-radio-button value="consumer">消费者</a-radio-button>
           </a-radio-group>
         </div>
       </a-flex>
-      <a-table :columns="tableColumns" :data-source="tableData">
+      <a-table
+        :columns="tableColumns"
+        :data-source="tableData"
+        :scroll="{ y: '45vh' }"
+        :pagination="pagination"
+      >
         <template #bodyCell="{ column, text }">
           <template v-if="column.dataIndex === 'applicationName'">
             <a-button type="link">{{ text }}</a-button>
@@ -63,7 +65,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import { ref, reactive, getCurrentInstance } from 'vue'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
 
 const searchValue = ref('')
 const versionAndGroupOptions = reactive([
@@ -123,12 +132,66 @@ const tableData = reactive([
     instanceNum: 15,
     instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
   },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    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'
+    ]
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-user',
+    instanceNum: 12,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
+  },
+  {
+    applicationName: 'shop-order',
+    instanceNum: 15,
+    instanceIP: ['192.168.32.28:8697', '192.168.32.26:20880', '192.168.32.24:28080']
+  },
   {
     applicationName: 'shop-user',
     instanceNum: 12,
     instanceIP: ['192.168.32.28:8697', '192.168.32.24:28080']
   }
 ])
+
+const pagination = {
+  showTotal: (v: any) =>
+    globalProperties.$t('searchDomain.total') +
+    ': ' +
+    v +
+    ' ' +
+    globalProperties.$t('searchDomain.unit')
+}
 </script>
 <style lang="less" scoped>
 .__container_services_tabs_distribution {