Merge pull request #178 from jianyi-gronk/feature/ui/improveServicePage

Improve service pages
apache · Jan 29, 2024 · 9e686b4 · 9e686b4
2 parents 19ce7f4 + d261024
commit 9e686b4
Show file tree

Hide file tree

Showing 12 changed files with 294 additions and 158 deletions.
diff --git a/ui-vue3/package.json b/ui-vue3/package.json
@@ -30,6 +30,7 @@
     "less": "^4.2.0",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
+    "monaco-editor": "^0.45.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "pinyin-pro": "^3.19.3",

diff --git a/ui-vue3/src/api/mock/mockServiceDetail.ts b/ui-vue3/src/api/mock/mockServiceDetail.ts
@@ -0,0 +1,40 @@
+/*
+ * 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/detail', 'get', {
+  code: 200,
+  message: 'success',
+  data: {
+    total: 8,
+    curPage: 1,
+    pageSize: 1,
+    data: {
+      serviceName: 'org.apache.dubbo.samples.UserService',
+      versionGroup: ['version=v1', 'version=2.0,group=group1'],
+      protocol: 'triple',
+      delay: '3000ms',
+      timeOut: '3000ms',
+      retry: 3,
+      requestTotal: 1384,
+      avgRT: '96ms',
+      avgQPS: 12,
+      obsolete: false
+    }
+  }
+})
diff --git a/ui-vue3/src/api/mock/mockServiceDistribution.ts b/ui-vue3/src/api/mock/mockServiceDistribution.ts
@@ -0,0 +1,95 @@
+/*
+ * 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/distribution', 'get', {
+  code: 200,
+  message: 'success',
+  data: {
+    total: 8,
+    curPage: 1,
+    pageSize: 1,
+    data: [
+      {
+        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',
+          '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']
+      }
+    ]
+  }
+})
diff --git a/ui-vue3/src/api/service/serviceDetail.ts b/ui-vue3/src/api/service/serviceDetail.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 getServiceDetail = (params: any): Promise<any> => {
+  return request({
+    url: '/service/detail',
+    method: 'get',
+    params
+  })
+}
diff --git a/ui-vue3/src/api/service/serviceDistribution.ts b/ui-vue3/src/api/service/serviceDistribution.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 getServiceDistribution = (params: any): Promise<any> => {
+  return request({
+    url: '/service/distribution',
+    method: 'get',
+    params
+  })
+}
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
@@ -277,7 +277,6 @@ const words: I18nType = {
   noPageTip: '抱歉，你访问的页面不存在',
   globalSearchTip: '搜索ip，应用，实例，服务',
 
-  globalSearchTip: '搜索ip，应用，实例，服务',
   placeholder: {
     typeAppName: '请输入应用名，支持前缀搜索',
     typeDefault: '请输入'

diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
@@ -16,112 +16,86 @@
 -->
 <template>
   <div class="__container_services_index">
-    <a-flex vertical>
-      <a-flex class="service-filter">
-        <a-input-search
-          v-model:value="serviceName"
-          placeholder="请输入"
-          class="service-name-input"
-          @search="debounceSearch"
-          enter-button
-        />
-      </a-flex>
-      <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>
-          </template>
+    <search-table :search-domain="searchDomain">
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.dataIndex === 'serviceName'">
+          <a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
         </template>
-      </a-table>
-    </a-flex>
+      </template>
+    </search-table>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import type { ComponentInternalInstance } from 'vue'
-import { ref, getCurrentInstance } from 'vue'
+import { reactive, provide } from 'vue'
 import { searchService } from '@/api/service/service.ts'
-import { debounce } from 'lodash'
-
-const {
-  appContext: {
-    config: { globalProperties }
-  }
-} = <ComponentInternalInstance>getCurrentInstance()
-
-const serviceName = ref('')
+import { SearchDomain } from '@/utils/SearchUtil'
+import SearchTable from '@/components/SearchTable.vue'
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
 
 const router = useRouter()
 const columns = [
   {
     title: '服务',
     dataIndex: 'serviceName',
+    key: 'serviceName',
     sorter: true,
     width: '30%'
   },
   {
     title: '接口数',
     dataIndex: 'interfaceNum',
+    key: 'interfaceNum',
     sorter: true,
     width: '10%'
   },
   {
     title: '近 1min QPS',
     dataIndex: 'avgQPS',
+    key: 'avgQPS',
     sorter: true,
     width: '15%'
   },
   {
     title: '近 1min RT',
     dataIndex: 'avgRT',
+    key: 'avgRT',
     sorter: true,
     width: '15%'
   },
   {
     title: '近 1min 请求总量',
     dataIndex: 'requestTotal',
+    key: 'requestTotal',
     sorter: true,
     width: '15%'
   }
 ]
 
-const dataSource = ref([])
-
-const onSearch = async () => {
-  let { data } = await searchService({})
-  dataSource.value = data.data
-}
+const searchDomain = reactive(
+  new SearchDomain(
+    [
+      {
+        label: '服务名',
+        param: 'serviceName',
+        placeholder: '请输入',
+        style: {
+          width: '200px'
+        }
+      }
+    ],
+    searchService,
+    columns
+  )
+)
 
-onSearch()
-
-const debounceSearch = debounce(onSearch, 300)
+searchDomain.onSearch()
 
 const viewDetail = (serviceName: string) => {
   router.push({ name: 'detail', params: { serviceName } })
 }
 
-const pagination = {
-  showTotal: (v: any) =>
-    globalProperties.$t('searchDomain.total') +
-    ': ' +
-    v +
-    ' ' +
-    globalProperties.$t('searchDomain.unit')
-}
+provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 </script>
-<style lang="less" scoped>
-.__container_services_index {
-  .service-filter {
-    margin-bottom: 20px;
-    .service-name-input {
-      width: 500px;
-    }
-  }
-}
-</style>
+<style lang="less" scoped></style>