#11129 ⚰ Remove the namespace information from the node list page, as the no… (#11130)

* ⚰ Remove the namespace information from the node list page, as the node list has nothing to do with namespaces and should not display namespace information
⚰ configurationManagement8: 'Configuration Management',case sensitive

* 🐛 Fix, when adding configurations using the default public namespace, the namespace is shown as empty or nodefine

* ✨#Configuration list page
- PageTitle is added to show the description, if there is no description, it will show the name, hide the namespace ID, and keep the function of namespace ID copying.
- Removed the Create New Configuration function from the right + icon and replaced it with the Create Configuration button on the left.
- Multi-language configuration fixes and adds new hints

* ✨#Cluster list, namespace list, service list, list of listeners, version history
- Unified the style of all right-side buttons to the left side.
- Namespaces are now displayed in a unified style.

* ✨#PageTitle, Copy, NameSpace
- Optimization of basic components, added Chinese and English information, namespace description presentation and other functions

console-ui/package.json

@@ -26,7 +26,7 @@
     "url": "git+https://github.com/alibaba/nacos.git"
   },
   "devDependencies": {
-    "@alifd/next-theme-loader": "^1.3.1",
+    "@alifd/next-theme-loader": "^1.3.2",
     "@babel/cli": "^7.7.7",
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-decorators": "^7.7.4",
@@ -65,7 +65,7 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "@alifd/next": "^1.19.4",
+    "@alifd/next": "^1.26.24",
     "@alifd/theme-design-pro": "0.x",
     "@iarna/toml": "^3.0.0",
     "axios": "^0.21.1",
@@ -80,6 +80,7 @@
     "react-router-dom": "^5.1.2",
     "react-router-redux": "^4.0.8",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "core-js": "^3.6.4"
   }
 }

console-ui/src/components/Copy/index.jsx

@@ -18,37 +18,10 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { Icon, Message } from '@alifd/next';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
-// 创建假元素
-function createFakeElement(value) {
-  const fakeElement = document.createElement('textarea');
-
-  fakeElement.style.border = '0';
-  fakeElement.style.padding = '0';
-  fakeElement.style.margin = '0';
-
-  fakeElement.style.position = 'absolute';
-  fakeElement.style.left = '-999px';
-  fakeElement.style.top = `${window.pageYOffset || document.documentElement.scrollTop}px`;
-  fakeElement.setAttribute('readonly', '');
-  fakeElement.value = value;
-  return fakeElement;
-}
-
-function copyText(value) {
-  const element = createFakeElement(value);
-  document.body.appendChild(element);
-
-  // 选中元素
-  element.focus();
-  element.select();
-  element.setSelectionRange(0, element.value.length);
-
-  document.execCommand('copy');
-  document.body.removeChild(element);
-  Message.success('Success copied!');
-}
 
+@connect(state => ({ ...state.locale }))
 @withRouter
 class Copy extends React.Component {
   static displayName = 'Copy';
@@ -59,20 +32,27 @@ class Copy extends React.Component {
     textNode: PropTypes.string,
     className: PropTypes.string,
     showIcon: PropTypes.bool,
+    title: PropTypes.string,
+    locale: PropTypes.object,
   };
 
+copyText(locale, value) {
+  navigator.clipboard.writeText(value);
+  Message.success(locale.Components.copySuccessfully);
+}
+
   render() {
-    const { style = {}, value, textNode, className, showIcon = true } = this.props;
+    const { style = {}, value, textNode, className, showIcon = true, title, locale } = this.props;
     return (
-      <div className={className} onClick={() => (showIcon ? '' : copyText(value))} style={style}>
+      <div className={className} onClick={() => (showIcon ? '' : this.copyText(locale, value))} style={style}>
         {textNode || value}
         {showIcon && (
           <Icon
-            title="复制"
+            title={title || '复制'}
             className="copy-icon"
             size="small"
             type="copy"
-            onClick={() => copyText(value)}
+            onClick={() => this.copyText(locale, value)}
           />
         )}
       </div>

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}

console-ui/src/components/PageTitle/index.js

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Provider, connect } from 'react-redux';
+import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Copy from '../Copy';
@@ -25,18 +25,20 @@ import Copy from '../Copy';
 class PageTitle extends React.Component {
   static propTypes = {
     title: PropTypes.string,
+    namespaceId: PropTypes.string,
+    namespaceName: PropTypes.string,
     desc: PropTypes.string,
     nameSpace: PropTypes.bool,
     locale: PropTypes.object,
   };
 
-  getNameSpace(locale, desc, nameSpace) {
+  getNameSpace(locale, namespaceId, namespaceName, desc, nameSpace) {
     if (!nameSpace) {
-      return desc;
+      return namespaceId;
     }
     return (
       <span style={{ display: 'flex', alignItems: 'center', marginLeft: 16 }}>
-        {locale.NameSpace.namespaceID}
+        {locale.NameSpace.namespace}
         <Copy
           style={{
             marginLeft: 16,
@@ -45,21 +47,24 @@ class PageTitle extends React.Component {
             alignItems: 'center',
             background: 'rgb(239, 243, 248)',
             padding: '0px 8px',
-            minWidth: 220,
           }}
-          value={desc}
+          textNode={desc || namespaceName}
+          title={locale.ConfigurationManagement.copyNamespaceID}
+          value={namespaceId}
         />
       </span>
     );
   }
 
   render() {
-    const { title, desc, nameSpace, locale } = this.props;
+    const { title, namespaceId, namespaceName, desc, nameSpace, locale } = this.props;
     return (
       <div style={{ display: 'flex', alignItems: 'center', marginTop: 8, marginBottom: 8 }}>
         <span style={{ fontSize: 28, height: 40, fontWeight: 500 }}>{title}</span>
         <span style={{ marginLeft: 4 }}>
-          {desc && desc !== 'undefined' ? this.getNameSpace(locale, desc, nameSpace) : ''}
+          {namespaceId && namespaceId !== 'undefined'
+            ? this.getNameSpace(locale, namespaceId, namespaceName, desc, nameSpace)
+            : ''}
         </span>
       </div>
     );

console-ui/src/locales/en-US.js

@@ -294,7 +294,7 @@ const I18N_CONF = {
     successfulEntry: 'Successful Entry',
     unprocessedEntry: 'Unprocessed Entry',
     pubNoData: 'No results found.',
-    configurationManagement8: 'configuration management',
+    configurationManagement8: 'Configuration Management',
     queryResults: 'Found',
     articleMeetRequirements: 'configuration items',
     fuzzydMode: 'Default fuzzy query mode',
@@ -364,6 +364,7 @@ const I18N_CONF = {
     delSuccessMsg: 'delete successful',
     cloneEditableTitle: 'Modify Data Id and Group (optional)',
     authFail: 'Auth failed',
+    copyNamespaceID: 'Copy namespace ID',
   },
   NewConfig: {
     newListingMain: 'Create Configuration',
@@ -669,6 +670,9 @@ const I18N_CONF = {
     writeOnly: 'write only',
     readWrite: 'Read and write',
   },
+  Components: {
+      copySuccessfully: 'Success copied!',
+  }
 };
 
 export default I18N_CONF;

console-ui/src/locales/zh-CN.js

@@ -360,6 +360,7 @@ const I18N_CONF = {
     delSuccessMsg: '删除成功',
     cloneEditableTitle: '修改 Data Id 和 Group (可选操作)',
     authFail: '权限认证失败',
+    copyNamespaceID: '复制命名空间ID',
   },
   NewConfig: {
     newListingMain: '新建配置',
@@ -664,6 +665,9 @@ const I18N_CONF = {
     writeOnly: '只写',
     readWrite: '读写',
   },
+  Components: {
+      copySuccessfully: '复制成功！',
+  }
 };
 
 export default I18N_CONF;

console-ui/src/pages/ClusterManagement/ClusterNodeList/ClusterNodeList.js

@@ -32,7 +32,6 @@ import {
   Message,
 } from '@alifd/next';
 import { request } from '../../../globalLib';
-import RegionGroup from '../../../components/RegionGroup';
 import axios from 'axios';
 import PageTitle from '../../../components/PageTitle';
 
@@ -64,6 +63,10 @@ class ClusterNodeList extends React.Component {
     this.field = new Field(this);
   }
 
+  componentDidMount() {
+    this.getQueryLater();
+  }
+
   openLoading() {
     this.setState({ loading: true });
   }
@@ -72,12 +75,6 @@ class ClusterNodeList extends React.Component {
     this.setState({ loading: false });
   }
 
-  openEditServiceDialog() {
-    try {
-      this.editServiceDialog.current.getInstance().show(this.state.service);
-    } catch (error) {}
-  }
-
   queryClusterStateList() {
     const { currentPage, pageSize, keyword, withInstances = false } = this.state;
     const parameter = [
@@ -186,11 +183,7 @@ class ClusterNodeList extends React.Component {
           tip="Loading..."
           color="#333"
         >
-          <PageTitle title={clusterNodeList} desc={nowNamespaceId} nameSpace />
+          <PageTitle title={clusterNodeList} />
-          <RegionGroup
-            setNowNameSpace={this.setNowNameSpace}
-            namespaceCallBack={this.getQueryLater}
-          />
           <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
             <Col span="24">
               <Form inline field={this.field}>

console-ui/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js

@@ -109,6 +109,7 @@ class ConfigurationManagement extends React.Component {
       tenant: true,
       nownamespace_id: window.nownamespace || '',
       nownamespace_name: window.namespaceShowName || '',
+      nownamespace_desc: window.namespaceDesc || '',
       selectedRecord: [],
       selectedKeys: [],
       hasdash: false,
@@ -512,10 +513,11 @@ class ConfigurationManagement extends React.Component {
     );
   }
 
-  setNowNameSpace(name, id) {
+  setNowNameSpace(name, id, desc) {
     this.setState({
       nownamespace_name: name,
       nownamespace_id: id,
+      nownamespace_desc: desc,
     });
   }
 
@@ -1146,7 +1148,9 @@ class ConfigurationManagement extends React.Component {
             <div style={{ display: this.inApp ? 'none' : 'block' }}>
               <PageTitle
                 title={locale.configurationManagement8}
-                desc={this.state.nownamespace_id}
+                desc={this.state.nownamespace_desc}
+                namespaceId={this.state.nownamespace_id}
+                namespaceName={this.state.nownamespace_name}
                 nameSpace
               />
               <RegionGroup
@@ -1310,22 +1314,6 @@ class ConfigurationManagement extends React.Component {
                   />
                 </Form.Item>
               </Form>
-              <div style={{ position: 'absolute', right: 10, top: 0 }}>
-                <Icon
-                  type="add"
-                  size="medium"
-                  style={{
-                    color: 'black',
-                    marginRight: 0,
-                    verticalAlign: 'middle',
-                    cursor: 'pointer',
-                    backgroundColor: '#eee',
-                    border: '1px solid #ddd',
-                    padding: '3px 6px',
-                  }}
-                  onClick={this.chooseEnv.bind(this)}
-                />
-              </div>
             </div>
             <QueryResult total={configurations.totalCount} />
 

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>

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}>

console-ui/src/pages/ConfigurationManagement/NewConfig/NewConfig.js

@@ -476,7 +476,7 @@ class NewConfig extends React.Component {
         <h1>{locale.newListing}</h1>
         <Form className="new-config-form" field={this.field} {...formItemLayout}>
           <Form.Item label={locale.namespace} required>
-            <p>{this.tenant}</p>
+            <p>{this.tenant ? this.tenant : 'public'}</p>
           </Form.Item>
           <FormItem label={'Data ID'} required>
             <Input

console-ui/src/pages/NameSpace/NameSpace.js

@@ -16,13 +16,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, ConfigProvider, Dialog, Loading, Table } from '@alifd/next';
+import { Button, ConfigProvider, Dialog, Loading, Table, Form } from '@alifd/next';
 import RegionGroup from '../../components/RegionGroup';
 import NewNameSpace from '../../components/NewNameSpace';
 import EditorNameSpace from '../../components/EditorNameSpace';
 import { getParams, setParams, request } from '../../globalLib';
 
 import './index.scss';
+import PageTitle from '../../components/PageTitle';
 
 @ConfigProvider.config
 class NameSpace extends React.Component {
@@ -297,7 +298,7 @@ class NameSpace extends React.Component {
     } = locale;
     return (
       <>
-        <RegionGroup left={namespace} />
+        <PageTitle title={namespace} />
         <div className="fusion-demo">
           <Loading
             shape="flower"
@@ -306,23 +307,29 @@ class NameSpace extends React.Component {
             style={{ width: '100%' }}
             visible={this.state.loading}
           >
+            <div
+              style={{
+                position: 'relative',
+                marginTop: 10,
+                height: 'auto',
+                overflow: 'visible',
+              }}
+            >
+              <Form inline>
+                <Form.Item>
+                  <Button type="primary" onClick={this.addNameSpace.bind(this)}>
+                    {namespaceAdd}
+                  </Button>
+                </Form.Item>
+                <Form.Item>
+                  <Button type="secondary" onClick={() => this.getNameSpaces()}>
+                    {locale.refresh}
+                  </Button>
+                </Form.Item>
+              </Form>
+            </div>
+
             <div>
-              <div style={{ textAlign: 'right', marginBottom: 10 }}>
-                <Button
-                  type="primary"
-                  style={{ marginRight: 20, marginTop: 10 }}
-                  onClick={this.addNameSpace.bind(this)}
-                >
-                  {namespaceAdd}
-                </Button>
-                <Button
-                  style={{ marginRight: 0, marginTop: 10 }}
-                  type="secondary"
-                  onClick={() => this.getNameSpaces()}
-                >
-                  {locale.refresh}
-                </Button>
-              </div>
               <div>
                 <Table dataSource={this.state.dataSource} locale={{ empty: pubNoData }}>
                   <Table.Column

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>

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}