✨#Cluster list, namespace list, service list, list of listeners, vers…

…ion history - Unified the style of all right-side buttons to the left side. - Namespaces are now displayed in a unified style.
xs-fork · Sep 15, 2023 · 35f6b47 · 35f6b47
1 parent c69d575
commit 35f6b47
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 18 deletions.
diff --git a/console-ui/src/components/NameSpaceList/NameSpaceList.js b/console-ui/src/components/NameSpaceList/NameSpaceList.js
@@ -85,7 +85,7 @@ class NameSpaceList extends React.Component {
   /**
    切换namespace
    * */
-  changeNameSpace(ns, nsName) {
+  changeNameSpace(ns, nsName, nsDesc) {
     localStorage.setItem('namespace', ns);
     this.setnamespace(ns || '');
     setParams({
@@ -94,9 +94,10 @@ class NameSpaceList extends React.Component {
     });
     window.nownamespace = ns;
     window.namespaceShowName = nsName;
+    window.namespaceDesc = nsDesc;
 
     this.calleeParent(true);
-    this.props.setNowNameSpace && this.props.setNowNameSpace(nsName, ns);
+    this.props.setNowNameSpace && this.props.setNowNameSpace(nsName, ns, nsDesc);
   }
 
   calleeParent(needclean = false) {
@@ -136,17 +137,21 @@ class NameSpaceList extends React.Component {
     window.namespaceList = data;
     window.nownamespace = nownamespace;
     let namespaceShowName = '';
+    let namespaceDesc = '';
     for (let i = 0; i < data.length; i++) {
       if (data[i].namespace === nownamespace) {
         ({ namespaceShowName } = data[i]);
+        ({ namespaceDesc } = data[i]);
         break;
       }
     }
     window.namespaceShowName = namespaceShowName;
+    window.namespaceDesc = namespaceDesc;
     setParams('namespace', nownamespace || '');
     localStorage.setItem('namespace', nownamespace);
     // setParams('namespaceShowName', namespaceShowName);
-    this.props.setNowNameSpace && this.props.setNowNameSpace(namespaceShowName, nownamespace);
+    this.props.setNowNameSpace &&
+      this.props.setNowNameSpace(namespaceShowName, nownamespace, namespaceDesc);
     this.setState({
       nownamespace,
       namespaceList: data,
@@ -172,7 +177,12 @@ class NameSpaceList extends React.Component {
           {index === 0 ? '' : <span style={{ marginRight: 8, color: '#999' }}>|</span>}
           <span
             style={style}
-            onClick={this.changeNameSpace.bind(this, obj.namespace, obj.namespaceShowName)}
+            onClick={this.changeNameSpace.bind(
+              this,
+              obj.namespace,
+              obj.namespaceShowName,
+              obj.namespaceDesc
+            )}
             key={index}
           >
             {obj.namespaceShowName}

diff --git a/console-ui/src/pages/ClusterManagement/ClusterNodeList/ClusterNodeList.js b/console-ui/src/pages/ClusterManagement/ClusterNodeList/ClusterNodeList.js
@@ -183,7 +183,7 @@ class ClusterNodeList extends React.Component {
           tip="Loading..."
           color="#333"
         >
-          <PageTitle title={clusterNodeList} desc={nowNamespaceId} nameSpace />
+          <PageTitle title={clusterNodeList} />
           <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
             <Col span="24">
               <Form inline field={this.field}>

diff --git a/console-ui/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js b/console-ui/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js
@@ -32,6 +32,7 @@ import { getParams, setParams, request } from '@/globalLib';
 import './index.scss';
 import DiffEditorDialog from '../../../components/DiffEditorDialog';
 import QueryResult from '../../../components/QueryResult';
+import PageTitle from '../../../components/PageTitle';
 
 @ConfigProvider.config
 class HistoryRollback extends React.Component {
@@ -314,7 +315,15 @@ class HistoryRollback extends React.Component {
     });
   }
 
+  setNowNameSpace = (nowNamespaceName, nowNamespaceId, nowNamespaceDesc) =>
+    this.setState({
+      nowNamespaceName,
+      nowNamespaceId,
+      nowNamespaceDesc,
+    });
+
   render() {
+    const { nowNamespaceName, nowNamespaceId, nowNamespaceDesc } = this.state;
     const { locale = {} } = this.props;
     const { init } = this.field;
     this.init = init;
@@ -327,8 +336,15 @@ class HistoryRollback extends React.Component {
           tip="Loading..."
           color="#333"
         >
+          <PageTitle
+            title={locale.toConfigure}
+            desc={nowNamespaceDesc}
+            namespaceId={nowNamespaceId}
+            namespaceName={nowNamespaceName}
+            nameSpace
+          />
           <RegionGroup
-            left={locale.toConfigure}
+            setNowNameSpace={this.setNowNameSpace}
             namespaceCallBack={this.cleanAndGetData.bind(this)}
           />
           <div>

diff --git a/console-ui/src/pages/ConfigurationManagement/ListeningToQuery/ListeningToQuery.js b/console-ui/src/pages/ConfigurationManagement/ListeningToQuery/ListeningToQuery.js
@@ -32,6 +32,7 @@ import {
 import QueryResult from '../../../components/QueryResult';
 
 import './index.scss';
+import PageTitle from '../../../components/PageTitle';
 
 const FormItem = Form.Item;
 const { Row, Col } = Grid;
@@ -170,7 +171,15 @@ class ListeningToQuery extends React.Component {
     });
   };
 
+  setNowNameSpace = (nowNamespaceName, nowNamespaceId, nowNamespaceDesc) =>
+    this.setState({
+      nowNamespaceName,
+      nowNamespaceId,
+      nowNamespaceDesc,
+    });
+
   render() {
+    const { nowNamespaceName, nowNamespaceId, nowNamespaceDesc } = this.state;
     const { locale = {} } = this.props;
     const { init, getValue } = this.field;
     this.init = init;
@@ -195,7 +204,17 @@ class ListeningToQuery extends React.Component {
           tip="Loading..."
           color="#333"
         >
-          <RegionGroup left={locale.listenerQuery} namespaceCallBack={this.getQueryLater} />
+          <PageTitle
+            title={locale.listenerQuery}
+            desc={nowNamespaceDesc}
+            namespaceId={nowNamespaceId}
+            namespaceName={nowNamespaceName}
+            nameSpace
+          />
+          <RegionGroup
+            setNowNameSpace={this.setNowNameSpace}
+            namespaceCallBack={this.getQueryLater}
+          />
           <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
             <Col span="24">
               <Form inline field={this.field}>

diff --git a/console-ui/src/pages/ServiceManagement/ServiceList/ServiceList.js b/console-ui/src/pages/ServiceManagement/ServiceList/ServiceList.js
@@ -174,10 +174,11 @@ class ServiceList extends React.Component {
     });
   }
 
-  setNowNameSpace = (nowNamespaceName, nowNamespaceId) =>
+  setNowNameSpace = (nowNamespaceName, nowNamespaceId, nowNamespaceDesc) =>
     this.setState({
       nowNamespaceName,
       nowNamespaceId,
+      nowNamespaceDesc,
     });
 
   rowColor = row => ({ className: !row.healthyInstanceCount ? 'row-bg-red' : '' });
@@ -200,14 +201,20 @@ class ServiceList extends React.Component {
       deleteAction,
       subscriber,
     } = locale;
-    const { search, nowNamespaceName, nowNamespaceId, hasIpCount } = this.state;
+    const { search, nowNamespaceName, nowNamespaceId, nowNamespaceDesc, hasIpCount } = this.state;
     const { init, getValue } = this.field;
     this.init = init;
     this.getValue = getValue;
 
     return (
       <div className="main-container service-management">
-        <PageTitle title={serviceList} desc={nowNamespaceId} nameSpace />
+        <PageTitle
+          title={serviceList}
+          desc={nowNamespaceDesc}
+          namespaceId={nowNamespaceId}
+          namespaceName={nowNamespaceName}
+          nameSpace
+        />
         <RegionGroup
           setNowNameSpace={this.setNowNameSpace}
           namespaceCallBack={this.getQueryLater}
@@ -221,6 +228,11 @@ class ServiceList extends React.Component {
         >
           <Col span="24">
             <Form inline field={this.field}>
+              <FormItem label="">
+                <Button type="primary" onClick={() => this.openEditServiceDialog()}>
+                  {create}
+                </Button>
+              </FormItem>
               <FormItem label={serviceName}>
                 <Input
                   placeholder={serviceNamePlaceholder}
@@ -263,11 +275,6 @@ class ServiceList extends React.Component {
                   {query}
                 </Button>
               </FormItem>
-              <FormItem label="" style={{ float: 'right' }}>
-                <Button type="primary" onClick={() => this.openEditServiceDialog()}>
-                  {create}
-                </Button>
-              </FormItem>
             </Form>
           </Col>
         </Row>

diff --git a/console-ui/src/pages/ServiceManagement/SubscriberList/SubscriberList.js b/console-ui/src/pages/ServiceManagement/SubscriberList/SubscriberList.js
@@ -102,10 +102,11 @@ class SubscriberList extends React.Component {
     this.props.removeSubscribers();
   };
 
-  setNowNameSpace = (nowNamespaceName, nowNamespaceId) =>
+  setNowNameSpace = (nowNamespaceName, nowNamespaceId, nowNamespaceDesc) =>
     this.setState({
       nowNamespaceName,
       nowNamespaceId,
+      nowNamespaceDesc,
     });
 
   render() {
@@ -122,7 +123,7 @@ class SubscriberList extends React.Component {
       groupNamePlaceholder,
       query,
     } = locale;
-    const { search, nowNamespaceName, nowNamespaceId } = this.state;
+    const { search, nowNamespaceName, nowNamespaceId, nowNamespaceDesc } = this.state;
     const { init, getValue } = this.field;
     this.init = init;
     this.getValue = getValue;
@@ -138,7 +139,13 @@ class SubscriberList extends React.Component {
           tip="Loading..."
           color="#333"
         >
-          <PageTitle title={subscriberList} desc={nowNamespaceId} nameSpace />
+          <PageTitle
+            title={subscriberList}
+            desc={nowNamespaceDesc}
+            namespaceId={nowNamespaceId}
+            namespaceName={nowNamespaceName}
+            nameSpace
+          />
           <RegionGroup
             setNowNameSpace={this.setNowNameSpace}
             namespaceCallBack={this.switchNamespace}