#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
2023-09-19 16:13:50 +08:00 · 2023-09-19 16:13:50 +08:00 · 84b3afcfca
commit 84b3afcfca
parent 4e3d0c9568
15 changed files with 2895 additions and 2914 deletions
--- a/console-ui/package-lock.json
+++ b/console-ui/package-lock.json
--- a/console-ui/package.json
+++ b/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"
  }
 }
--- a/console-ui/src/components/Copy/index.jsx
+++ b/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>
--- 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}
--- a/console-ui/src/components/PageTitle/index.js
+++ b/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>
    );
--- a/console-ui/src/locales/en-US.js
+++ b/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;
--- a/console-ui/src/locales/zh-CN.js
+++ b/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;
--- a/console-ui/src/pages/ClusterManagement/ClusterNodeList/ClusterNodeList.js
+++ b/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 />
-          <RegionGroup
-            setNowNameSpace={this.setNowNameSpace}
-            namespaceCallBack={this.getQueryLater}
-          />
+          <PageTitle title={clusterNodeList} />
          <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
            <Col span="24">
              <Form inline field={this.field}>
--- a/console-ui/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js
+++ b/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} />

--- 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>
--- 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}>
--- a/console-ui/src/pages/ConfigurationManagement/NewConfig/NewConfig.js
+++ b/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
--- a/console-ui/src/pages/NameSpace/NameSpace.js
+++ b/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>
-              <div style={{ textAlign: 'right', marginBottom: 10 }}>
-                <Button
-                  type="primary"
-                  style={{ marginRight: 20, marginTop: 10 }}
-                  onClick={this.addNameSpace.bind(this)}
+            <div
+              style={{
+                position: 'relative',
+                marginTop: 10,
+                height: 'auto',
+                overflow: 'visible',
+              }}
            >
+              <Form inline>
+                <Form.Item>
+                  <Button type="primary" onClick={this.addNameSpace.bind(this)}>
                    {namespaceAdd}
                  </Button>
-                <Button
-                  style={{ marginRight: 0, marginTop: 10 }}
-                  type="secondary"
-                  onClick={() => this.getNameSpaces()}
-                >
+                </Form.Item>
+                <Form.Item>
+                  <Button type="secondary" onClick={() => this.getNameSpaces()}>
                    {locale.refresh}
                  </Button>
+                </Form.Item>
+              </Form>
            </div>
+
+            <div>
              <div>
                <Table dataSource={this.state.dataSource} locale={{ empty: pubNoData }}>
                  <Table.Column
--- 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>
--- 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}