refactor: 🎨 Optimize UI styles and search functionality

ui-vue3/src/Login.vue

@@ -44,8 +44,8 @@ function loginHandle() {
       updateAuthState(true, userinfo.username)
       const { data } = await meshesSearch()
       // if mesh is not set or old mesh is expired
-      if (!meshStore.mesh || !data.some((x: any) => x.name === meshStore.mesh)) {
-        meshStore.mesh = data[0]?.name
+      if (!meshStore.mesh || !data.some((x: any) => x.id === meshStore.mesh)) {
+        meshStore.mesh = data[0]?.id
       }
       router.replace(redirect)
     })
@@ -63,25 +63,14 @@ function loginHandle() {
       </a-row>
       <a-row>
         <a-form layout="vertical" :model="userinfo" ref="login-form-ref">
-          <a-form-item
-            class="item"
-            :label="$t('loginDomain.username')"
-            name="username"
-            :rules="[{ required: true }]"
-          >
+          <a-form-item class="item" :label="$t('loginDomain.username')" name="username" :rules="[{ required: true }]">
             <a-input type="" v-model:value="userinfo.username"></a-input>
           </a-form-item>
-          <a-form-item
-            class="item"
-            :label="$t('loginDomain.password')"
-            name="password"
-            :rules="[{ required: true }]"
-          >
+          <a-form-item class="item" :label="$t('loginDomain.password')" name="password" :rules="[{ required: true }]">
             <a-input type="password" v-model:value="userinfo.password"></a-input>
           </a-form-item>
           <a-form-item class="item" label="">
-            <a-button @click="loginHandle" size="large" type="primary" class="login-btn"
-              >{{ $t('loginDomain.login') }}
+            <a-button @click="loginHandle" size="large" type="primary" class="login-btn">{{ $t('loginDomain.login') }}
             </a-button>
           </a-form-item>
         </a-form>

ui-vue3/src/base/i18n/en.ts

@@ -158,6 +158,12 @@ const words: I18nType = {
     opened: 'Opened',
     paramRoute: 'Param Route'
   },
+  servicesDomain: {
+    appName: 'Application Name',
+    instanceCount: 'Instance Count',
+    deployClusters: 'Deploy Clusters',
+    registryClusters: 'Registry Clusters'
+  },
   appServiceTimeout: 'Adjusting the timeout for application service provision',
   enableAppInstanceLogs: 'Enable access logs for all instances of this application',
   appServiceLoadBalance: 'Adjusting the load balancing strategy for application service provision',
@@ -198,6 +204,8 @@ const words: I18nType = {
   service: 'Service',
   versionGroup: 'Version & Group',
   avgQPS: 'last 1min QPS',
+  provider: 'Provider',
+  subset: 'Group',
   avgRT: 'last 1min RT',
   requestTotal: 'last 1min request total',
   serviceSearch: 'Search Service',
@@ -368,6 +376,13 @@ const words: I18nType = {
   placeholders: {
     searchService: 'Search by service name'
   },
+  placeholder: {
+    searchService: 'Search by service name',
+    typeAppName: 'Enter application name',
+    typeDefault: 'Please enter',
+    typeRoutingRules: 'Search routing rules',
+    searchAppNameOrIP: 'Search application, IP'
+  },
   methods: 'Methods',
   testModule: {
     searchServiceHint:
@@ -490,10 +505,6 @@ const words: I18nType = {
   backHome: 'Back Home',
   noPageTip: 'Sorry, the page you visited does not exist.',
   globalSearchTip: 'Search ip, application, instance, service',
-  placeholder: {
-    typeAppName: 'please type appName, support for prefix',
-    typeDefault: 'please type '
-  },
   none: 'No Select',
   debug: 'Debug',
   distribution: 'Distribution',

ui-vue3/src/base/i18n/zh.ts

@@ -175,9 +175,17 @@ const words: I18nType = {
     opened: '开启',
     paramRoute: '参数路由'
   },
+  servicesDomain: {
+    appName: '应用名',
+    instanceCount: '实例数量',
+    deployClusters: '部署集群',
+    registryClusters: '注册集群'
+  },
   service: '服务',
   versionGroup: '版本&分组',
   avgQPS: 'QPS',
+  provider: '提供者',
+  subset: '分组',
   avgRT: 'RT',
   requestTotal: '近1min请求总量',
   serviceSearch: '服务查询',
@@ -478,9 +486,10 @@ const words: I18nType = {
   globalSearchTip: '搜索ip，应用，实例，服务',
 
   placeholder: {
-    typeAppName: '请输入应用名，支持前缀搜索',
+    typeAppName: '请输入应用名',
     typeDefault: '请输入',
-    typeRoutingRules: '搜索路由规则，支持前缀过滤'
+    typeRoutingRules: '搜索路由规则',
+    searchAppNameOrIP: '搜索应用，ip'
   },
   none: '无',
   details: '详情',

ui-vue3/src/layout/header/layout_header.vue

@@ -56,7 +56,7 @@
                 :options="
                   meshes.map((x: any) => {
                     return {
-                      value: x.name,
+                      value: x.id,
                       label: x.name
                     }
                   })

ui-vue3/src/utils/SearchUtil.ts

@@ -98,9 +98,10 @@ export class SearchDomain {
 
     this.searchApi(queryParams)
       .then((res: any) => {
+
         const {
-          data: { list, pageInfo }
-        } = res
+          data: { list = [], pageInfo }
+        } = res || {}
         this.result = handleResult ? handleResult(list) : list
 
         if (!this.noPaged) {

ui-vue3/src/views/resources/applications/index.vue

@@ -30,10 +30,7 @@
           </a-tag>
         </template>
         <template v-else-if="column.dataIndex === 'appName'">
-          <span
-            class="app-link"
-            @click="router.push(`/resources/applications/detail/${record[column.key]}`)"
-          >
+          <span class="app-link" @click="router.push(`/resources/applications/detail/${record[column.key]}`)">
             <b>
               <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
               {{ text }}
@@ -70,7 +67,7 @@ let columns = [
     title: 'appName',
     key: 'appName',
     dataIndex: 'appName',
-    sorter: (a: any, b: any) => sortString(a.appName, b.appName),
+    // sorter: (a: any, b: any) => sortString(a.appName, b.appName),
     width: 140,
     ellipsis: true
   },
@@ -79,9 +76,8 @@ let columns = [
     key: 'instanceCount',
     dataIndex: 'instanceCount',
     width: 100,
-    sorter: (a: any, b: any) => sortString(a.instanceCount, b.instanceCount)
+    // sorter: (a: any, b: any) => sortString(a.instanceCount, b.instanceCount)
   },
-
   {
     title: 'applicationDomain.deployClusters',
     key: 'deployClusters',
@@ -131,11 +127,13 @@ watch(route, (a, b) => {
 <style lang="less" scoped>
 .search-table-container {
   min-height: 60vh;
+
   //max-height: 70vh; //overflow: auto;
   .app-link {
     padding: 4px 10px 4px 4px;
     border-radius: 4px;
     color: v-bind('PRIMARY_COLOR');
+
     &:hover {
       cursor: pointer;
       background: rgba(133, 131, 131, 0.13);

ui-vue3/src/views/resources/applications/tabs/instance.vue

@@ -113,64 +113,64 @@ const columns = [
     title: 'instanceDomain.ip',
     dataIndex: 'ip',
     key: 'ip',
-    sorter: true,
+    // sorter: true,
     width: 150,
     fixed: 'left'
   },
   {
     title: 'instanceDomain.name',
     dataIndex: 'name',
     key: 'name',
-    sorter: true,
+    // sorter: true,
     width: 180
   },
   {
     title: 'instanceDomain.deployState',
     dataIndex: 'deployState',
     key: 'deployState',
-    sorter: true,
+    // sorter: true,
     width: 150
   },
   {
     title: 'instanceDomain.deployCluster',
     dataIndex: 'deployClusters',
     key: 'deployClusters',
-    sorter: true,
+    // sorter: true,
     width: 180
   },
   {
     title: 'instanceDomain.registerState',
     dataIndex: 'registerState',
     key: 'registerState',
-    sorter: true,
+    // sorter: true,
     width: 150
   },
   {
     title: 'instanceDomain.registerClusters',
     dataIndex: 'registerCluster',
     key: 'registerCluster',
-    sorter: true,
+    // sorter: true,
     width: 200
   },
   {
     title: 'instanceDomain.cpu',
     dataIndex: 'cpu',
     key: 'cpu',
-    sorter: true,
+    // sorter: true,
     width: 120
   },
   {
     title: 'instanceDomain.memory',
     dataIndex: 'memory',
     key: 'memory',
-    sorter: true,
+    // sorter: true,
     width: 120
   },
   {
     title: 'instanceDomain.startTime',
     dataIndex: 'startTime',
     key: 'startTime',
-    sorter: true,
+    // sorter: true,
     width: 150
   }
   // {

ui-vue3/src/views/resources/applications/tabs/service.vue

@@ -36,17 +36,6 @@
         <template v-if="column.dataIndex === 'serviceName'">
           <a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
         </template>
-        <template v-else-if="column.dataIndex === 'versionGroupSelect'">
-          <a-select :value="text?.versionGroupValue" :bordered="false" style="width: 80%">
-            <a-select-option
-              v-for="(item, index) in text?.versionGroupArr"
-              :value="item"
-              :key="index"
-            >
-              {{ item }}
-            </a-select-option>
-          </a-select>
-        </template>
       </template>
     </search-table>
   </div>
@@ -108,37 +97,40 @@ const columns = [
   {
     title: 'provideServiceName',
     key: 'service',
-    dataIndex: 'serviceName',
-    sorter: true,
-    width: '30%'
-  },
-  {
-    title: 'versionGroup',
-    key: 'versionGroup',
-    dataIndex: 'versionGroupSelect',
-    width: '25%'
+    dataIndex: 'serviceName'
+    // sorter: true,
   },
   {
-    title: 'avgQPS',
-    key: 'avgQPS',
-    dataIndex: 'avgQPS',
-    sorter: true,
-    width: '15%'
+    title: 'version',
+    key: 'version',
+    dataIndex: 'version'
   },
   {
-    title: 'avgRT',
-    key: 'avgRT',
-    dataIndex: 'avgRT',
-    sorter: true,
-    width: '15%'
-  },
-  {
-    title: 'requestTotal',
-    key: 'requestTotal',
-    dataIndex: 'requestTotal',
-    sorter: true,
-    width: '15%'
+    title: 'subset',
+    key: 'group',
+    dataIndex: 'group'
   }
+  // {
+  //   title: 'avgQPS',
+  //   key: 'avgQPS',
+  //   dataIndex: 'avgQPS',
+  //   // sorter: true,
+  //   width: '15%'
+  // },
+  // {
+  //   title: 'avgRT',
+  //   key: 'avgRT',
+  //   dataIndex: 'avgRT',
+  //   // sorter: true,
+  //   width: '15%'
+  // },
+  // {
+  //   title: 'requestTotal',
+  //   key: 'requestTotal',
+  //   dataIndex: 'requestTotal',
+  //   // sorter: true,
+  //   width: '15%'
+  // }
 ]
 
 const appName = computed(() => {
@@ -213,6 +205,7 @@ provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
   .statistic {
     width: 8vw;
   }
+
   :deep(.ant-card-body) {
     padding: 12px;
   }