feature: migrate the console to the naming server

changes/en-us/2.x.md

@@ -9,6 +9,7 @@ Add changes here for all PR submitted to the 2.x branch.
 - [[#7037](https://github.com/apache/incubator-seata/pull/7037)] support fury undolog parser
 - [[#7069](https://github.com/apache/incubator-seata/pull/7069)] Raft cluster mode supports address translation
 - [[#7038](https://github.com/apache/incubator-seata/pull/7038)] support fury serializer
+- [[#7157](https://github.com/apache/incubator-seata/pull/7157)] migrate the console to the naming server
 
 ### bugfix:
 

changes/zh-cn/2.x.md

@@ -9,6 +9,7 @@
 - [[#7037](https://github.com/apache/incubator-seata/pull/7037)] 支持UndoLog的fury序列化方式
 - [[#7069](https://github.com/apache/incubator-seata/pull/7069)] Raft集群模式支持地址转换
 - [[#7038](https://github.com/apache/incubator-seata/pull/7038)] 支持Fury序列化器
+- [[#7157](https://github.com/apache/incubator-seata/pull/7157)] 将console迁移至namingserver中
 
 ### bugfix:
 

console/src/main/resources/static/console-fe/src/locales/en-us.ts

@@ -53,6 +53,9 @@ const enUs: ILocale = {
     subTitle: 'list',
     createTimeLabel: 'CreateTime',
     selectFilerPlaceholder: 'Please select filter criteria',
+    selectNamespaceFilerPlaceholder: 'Please select namespace',
+    selectClusterFilerPlaceholder: 'Please select cluster',
+    selectVGroupFilerPlaceholder: 'Please select vgroup',
     inputFilterPlaceholder: 'Please enter filter criteria',
     branchSessionSwitchLabel: 'Whether to include branch sessions',
     resetButtonLabel: 'Reset',
@@ -77,6 +80,9 @@ const enUs: ILocale = {
     subTitle: 'list',
     createTimeLabel: 'CreateTime',
     inputFilterPlaceholder: 'Please enter filter criteria',
+    selectNamespaceFilerPlaceholder: 'Please select namespace',
+    selectClusterFilerPlaceholder: 'Please select cluster',
+    selectVGroupFilerPlaceholder: 'Please select vgroup',
     resetButtonLabel: 'Reset',
     searchButtonLabel: 'Search',
     operateTitle: 'operate',

console/src/main/resources/static/console-fe/src/locales/zh-cn.ts

@@ -53,6 +53,9 @@ const zhCn: ILocale = {
     subTitle: '基础列表页',
     createTimeLabel: '创建时间',
     selectFilerPlaceholder: '请选择筛选条件',
+    selectNamespaceFilerPlaceholder: '请选择命名空间',
+    selectClusterFilerPlaceholder: '请选择集群',
+    selectVGroupFilerPlaceholder: '请选择事务分组',
     inputFilterPlaceholder: '请输入筛选条件',
     branchSessionSwitchLabel: '是否包含分支事务',
     resetButtonLabel: '重置',
@@ -77,6 +80,9 @@ const zhCn: ILocale = {
     subTitle: '基础列表页',
     createTimeLabel: '创建时间',
     inputFilterPlaceholder: '请输入筛选条件',
+    selectNamespaceFilerPlaceholder: '请选择命名空间',
+    selectClusterFilerPlaceholder: '请选择集群',
+    selectVGroupFilerPlaceholder: '请选择事务分组',
     resetButtonLabel: '重置',
     searchButtonLabel: '搜索',
     operateTitle: '操作',

console/src/main/resources/static/console-fe/src/pages/GlobalLockInfo/GlobalLockInfo.tsx

@@ -15,7 +15,19 @@
  * limitations under the License.
  */
 import React from 'react';
-import { ConfigProvider, Table, Button, DatePicker, Form, Icon, Pagination, Input, Dialog, Message } from '@alicloud/console-components';
+import {
+  ConfigProvider,
+  Table,
+  Button,
+  DatePicker,
+  Form,
+  Icon,
+  Pagination,
+  Input,
+  Dialog,
+  Message,
+  Select
+} from '@alicloud/console-components';
 import Actions, { LinkButton } from '@alicloud/console-components-actions';
 import { withRouter } from 'react-router-dom';
 import Page from '@/components/Page';
@@ -28,13 +40,17 @@ import moment from 'moment';
 import './index.scss';
 import {get} from "lodash";
 import {enUsKey, getCurrentLanguage} from "@/reducers/locale";
+import {fetchNamespace} from "@/service/transactionInfo";
 
 const { RangePicker } = DatePicker;
 const FormItem = Form.Item;
 
 type GlobalLockInfoState = {
   list: Array<any>;
   total: number;
+  namespaceOptions: Map<string, { clusters: string[], vgroups: string[] }>;
+  clusters: Array<string>;
+  vgroups: Array<string>;
   loading: boolean;
   globalLockParam: GlobalLockParam;
 }
@@ -55,28 +71,66 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
       pageSize: 10,
       pageNum: 1,
     },
+    namespaceOptions: new Map<string, { clusters: string[], vgroups: string[] }>(),
+    clusters: [],
+    vgroups: [],
   }
 
   componentDidMount = () => {
     // @ts-ignore
     const { query } = this.props.history.location;
     if (query !== undefined) {
-      const { xid } = query;
-      if (xid !== undefined) {
+      const { xid,vgroup ,namespace,cluster} = query;
+      if (xid !== undefined && vgroup !== undefined) {
         this.setState({
           globalLockParam: {
             xid,
+            vgroup,
+            namespace,
+            cluster,
             pageSize: 10,
             pageNum: 1,
           },
         }, () => this.search());
         return;
       }
     }
-    // search once by default anyway
-    this.search();
+    this.loadNamespaces();
+  }
+  loadNamespaces = async () => {
+    try {
+      const namespaces = await fetchNamespace();
+      const namespaceOptions = new Map<string, { clusters: string[], vgroups: string[] }>();
+      Object.keys(namespaces).forEach(namespaceKey => {
+        const namespaceData = namespaces[namespaceKey];
+        namespaceOptions.set(namespaceKey, {
+          clusters: namespaceData.clusters,
+          vgroups: namespaceData.vgroups,
+        });
+      });
+      if (namespaceOptions.size > 0) {
+        // Set default namespace to the first option
+        const firstNamespace = Array.from(namespaceOptions.keys())[0];
+        const selectedNamespace = namespaceOptions.get(firstNamespace);
+        this.setState({
+          namespaceOptions,
+          globalLockParam: {
+            ...this.state.globalLockParam,
+            namespace: firstNamespace,
+            cluster: selectedNamespace ? selectedNamespace.clusters[0] : undefined,
+          },
+          clusters: selectedNamespace ? selectedNamespace.clusters : [],
+        });
+        this.search();
+      } else {
+        this.setState({
+          namespaceOptions,
+        });
+      }
+    } catch (error) {
+      console.error('Failed to fetch namespaces:', error);
+    }
   }
-
   resetSearchFilter = () => {
     this.setState({
       globalLockParam: {
@@ -128,10 +182,19 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
   }
 
   searchFilterOnChange = (key:string, val:string) => {
-    this.setState({
-      globalLockParam: Object.assign(this.state.globalLockParam,
-        { [key]: val }),
-    });
+    if (key === 'namespace') {
+      const selectedNamespace = this.state.namespaceOptions.get(val);
+      this.setState({
+        clusters: selectedNamespace ? selectedNamespace.clusters : [],
+        vgroups: selectedNamespace ? selectedNamespace.vgroups : [],
+        globalLockParam: Object.assign(this.state.globalLockParam, {[key]: val}),
+      });
+    } else {
+      this.setState({
+        globalLockParam: Object.assign(this.state.globalLockParam,
+            {[key]: val}),
+      });
+    }
   }
 
   paginationOnChange = (current: number, e: {}) => {
@@ -194,6 +257,9 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
     const { locale = {} } = this.props;
     const { title, subTitle, createTimeLabel,
       inputFilterPlaceholder,
+      selectNamespaceFilerPlaceholder,
+      selectClusterFilerPlaceholder,
+      selectVGroupFilerPlaceholder,
       searchButtonLabel,
       resetButtonLabel,
       operateTitle,
@@ -248,7 +314,38 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
               onChange={(value: string) => { this.searchFilterOnChange('branchId', value); }}
             />
           </FormItem>
-
+          <FormItem name="namespace" label="namespace">
+            <Select
+                hasClear
+                placeholder={selectNamespaceFilerPlaceholder}
+                onChange={(value: string) => {
+                  this.searchFilterOnChange('namespace', value);
+                }}
+                dataSource={Array.from(this.state.namespaceOptions.keys()).map(key => ({ label: key, value: key }))}
+                value={this.state.globalLockParam.namespace}
+            />
+          </FormItem>
+          <FormItem name="cluster" label="cluster">
+            <Select
+                hasClear
+                placeholder={selectClusterFilerPlaceholder}
+                onChange={(value: string) => {
+                  this.searchFilterOnChange('cluster', value);
+                }}
+                dataSource={this.state.clusters.map(value => ({ label: value, value }))}
+                value={this.state.globalLockParam.cluster}
+            />
+          </FormItem>
+          <FormItem name="vgroup" label="vgroup">
+            <Select
+                hasClear
+                placeholder={selectVGroupFilerPlaceholder}
+                onChange={(value: string) => {
+                  this.searchFilterOnChange('vgroup', value);
+                }}
+                dataSource={this.state.vgroups.map(value => ({ label: value, value }))}
+            />
+          </FormItem>
           {/* {reset search filter button} */}
           <FormItem>
             <Form.Reset onClick={this.resetSearchFilter}>