#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
This commit is contained in:
XS 2023-09-19 16:13:50 +08:00 committed by GitHub
parent 4e3d0c9568
commit 84b3afcfca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 2895 additions and 2914 deletions

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

@ -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>
);

View File

@ -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;

View File

@ -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;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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