feature: console supports creation and modification of transaction groups for Raft clusters

console/src/main/resources/static/console-fe/src/app.tsx

@@ -71,7 +71,7 @@ class App extends React.Component<AppPropsType, AppStateType> {
 
   getVersion = () => {
     fetch('version.json').then(response =>
-      response.json().then(json => this.setState({ ...this.state, version: json.version }))
+      response.json().then(json => this.setState(prevState => ({ ...prevState, version: json.version })))
     );
   };
 

console/src/main/resources/static/console-fe/src/module.d.ts

@@ -30,6 +30,6 @@ declare module '*.svg' {
 declare module 'lodash';
 
 export interface GlobalProps {
-  locale: ILocale;
+  locale: any;
   history: History;
 }

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

@@ -55,7 +55,7 @@ type ClusterManagerLocale = {
 };
 
 type ClusterManagerState = {
-  namespaceOptions: Map<string, { clusters: string[], clusterVgroups: {[key: string]: string[]} }>;
+  namespaceOptions: Map<string, { clusters: string[], clusterVgroups: {[key: string]: string[]}, clusterTypes: {[key: string]: string} }>;
   clusters: Array<string>;
   namespace?: string;
   cluster?: string;
@@ -76,7 +76,7 @@ class ClusterManager extends React.Component<GlobalProps, ClusterManagerState> {
   };
 
   state: ClusterManagerState = {
-    namespaceOptions: new Map<string, { clusters: string[], clusterVgroups: {[key: string]: string[]} }>(),
+    namespaceOptions: new Map<string, { clusters: string[], clusterVgroups: {[key: string]: string[]}, clusterTypes: {[key: string]: string} }>(),
     clusters: [],
     clusterData: null,
     loading: false,
@@ -94,14 +94,22 @@ class ClusterManager extends React.Component<GlobalProps, ClusterManagerState> {
   loadNamespaces = async () => {
     try {
       const namespaces = await fetchNamespaceV2();
-      const namespaceOptions = new Map<string, { clusters: string[], clusterVgroups: {[key: string]: string[]} }>();
+      const namespaceOptions = new Map<string, { clusters: string[], clusterVgroups: {[key: string]: string[]}, clusterTypes: {[key: string]: string} }>();
       Object.keys(namespaces).forEach(namespaceKey => {
         const namespaceData = namespaces[namespaceKey];
-        const clusterVgroups: {[key: string]: string[]} = namespaceData.clusterVgroups || {};
-        const clusters = Object.keys(clusterVgroups);
+        const clustersData = namespaceData.clusters || {};
+        const clusterVgroups: {[key: string]: string[]} = {};
+        const clusterTypes: {[key: string]: string} = {};
+        Object.keys(clustersData).forEach(clusterName => {
+          const cluster = clustersData[clusterName];
+          clusterVgroups[clusterName] = cluster.vgroups || [];
+          clusterTypes[clusterName] = cluster.type || 'default';
+        });
+        const clusters = Object.keys(clustersData);
         namespaceOptions.set(namespaceKey, {
           clusters,
           clusterVgroups,
+          clusterTypes,
         });
       });
       if (namespaceOptions.size > 0) {
@@ -215,11 +223,14 @@ class ClusterManager extends React.Component<GlobalProps, ClusterManagerState> {
   };
 
   render() {
-    const { locale = {} } = this.props;
+    const { locale } = this.props;
     const rawLocale = locale.ClusterManager;
     const clusterManagerLocale: ClusterManagerLocale = typeof rawLocale === 'object' && rawLocale !== null ? rawLocale : {};
     const { title, subTitle, selectNamespaceFilerPlaceholder, selectClusterFilerPlaceholder, searchButtonLabel, unitName, members, clusterType, view, unitDialogTitle, control, transaction, weight, healthy, term, unit, operations, internal, version, metadata, controlEndpoint, transactionEndpoint, metadataDialogTitle } = clusterManagerLocale;
     const unitData = this.state.clusterData ? Object.entries(this.state.clusterData.unitData || {}) : [];
+    const { namespace } = this.state;
+    const namespaceData = namespace ? this.state.namespaceOptions.get(namespace) : null;
+    const allClusters = namespaceData ? namespaceData.clusters : [];
     return (
       <Page
         title={title || 'Cluster Manager'}
@@ -264,7 +275,7 @@ class ClusterManager extends React.Component<GlobalProps, ClusterManagerState> {
           </FormItem>
         </Form>
         {/* unit table */}
-        <div>
+        <div style={{ marginTop: '20px' }}>
           <Table dataSource={unitData} loading={this.state.loading}>
             <Table.Column title={members || 'Members'} dataIndex="1" cell={(val: any) => (val.namingInstanceList ? val.namingInstanceList.length : 0)} />
             <Table.Column title={clusterType || 'Cluster Type'} cell={() => (this.state.clusterData ? this.state.clusterData.clusterType : '')} />

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

@@ -30,6 +30,7 @@ import {
 } from '@alicloud/console-components';
 import Actions from '@alicloud/console-components-actions';
 import { withRouter } from 'react-router-dom';
+import { connect } from 'react-redux';
 import Page from '@/components/Page';
 import { GlobalProps } from '@/module';
 import getData, {checkData, deleteData, GlobalLockParam } from '@/service/globalLockInfo';
@@ -105,8 +106,12 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
       const namespaceOptions = new Map<string, { clusters: string[], clusterVgroups: {[key: string]: string[]} }>();
       Object.keys(namespaces).forEach(namespaceKey => {
         const namespaceData = namespaces[namespaceKey];
-        const clusterVgroups = (namespaceData.clusterVgroups || {}) as {[key: string]: string[]};
-        const clusters = Object.keys(clusterVgroups);
+        const clustersData = namespaceData.clusters || {};
+        const clusterVgroups: {[key: string]: string[]} = {};
+        Object.keys(clustersData).forEach(clusterName => {
+          clusterVgroups[clusterName] = clustersData[clusterName].vgroups || [];
+        });
+        const clusters = Object.keys(clustersData);
         namespaceOptions.set(namespaceKey, {
           clusters,
           clusterVgroups,
@@ -149,15 +154,15 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
     }
   }
   resetSearchFilter = () => {
-    this.setState({
+    this.setState(prevState => ({
       globalLockParam: {
         // pagination info don`t reset
-        pageSize: this.state.globalLockParam.pageSize,
-        pageNum: this.state.globalLockParam.pageNum,
+        pageSize: prevState.globalLockParam.pageSize,
+        pageNum: prevState.globalLockParam.pageNum,
       },
       clusters: [],
       vgroups: [],
-    });
+    }));
   }
 
   search = () => {
@@ -276,10 +281,10 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
   }
 
   deleteCell = (val: string, index: number, record: any) => {
-    const {locale = {}} = this.props;
+    const { locale } = this.props;
     const {
       deleteGlobalLockTitle
-    } = locale;
+    } = locale.GlobalLockInfo || {};
     let width = getCurrentLanguage() === enUsKey ? '120px' : '80px'
     return (
       <Actions style={{width: width}}>
@@ -316,7 +321,8 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
 
 
   render() {
-    const { locale = {} } = this.props;
+    const { locale } = this.props;
+    const globalLockInfo = locale.GlobalLockInfo || {};
     const { title, subTitle, createTimeLabel,
       inputFilterPlaceholder,
       selectNamespaceFilerPlaceholder,
@@ -325,7 +331,7 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
       searchButtonLabel,
       resetButtonLabel,
       operateTitle,
-    } = locale;
+    } = globalLockInfo;
     return (
       <Page
         title={title}
@@ -453,4 +459,8 @@ class GlobalLockInfo extends React.Component<GlobalProps, GlobalLockInfoState> {
   }
 }
 
-export default withRouter(ConfigProvider.config(GlobalLockInfo, {}));
+const mapStateToProps = (state: any) => ({
+  locale: state.locale.locale,
+});
+
+export default ConfigProvider.config(withRouter(connect(mapStateToProps)(GlobalLockInfo)), {});