zhuyijun/nacos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize and format code by eslint and prettier

Browse Source
This commit is contained in:
zhichen 2018-11-14 19:40:42 +08:00
parent 48ceb4032f
commit 6836dca96f
69 changed files with 9771 additions and 8137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
console/src/main/resources/static/src/components/BatchHandle/BatchHandle.js
View File

@ -12,106 +12,141 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Dialog, Pagination, Transfer } from '@alifd/next';
import { request, aliwareIntl } from '../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class BatchHandle extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
valueList: props.valueList || [],
dataSourceList: props.dataSource || [],
currentPage: 1,
total: 0,
pageSize: 10,
dataSource: {}
};
}
componentDidMount() { }
openDialog(dataSource) {
this.setState({
visible: true,
dataSource: dataSource,
pageSize: dataSource.pageSize
}, () => {
this.getData();
console.log(this.transfer._instance.filterCheckedValue);
this.transfer._instance.filterCheckedValue = function (left, right, dataSource) {
var result = {
left: left,
right: right
};
static propTypes = {
valueList: PropTypes.array,
dataSource: PropTypes.array,
onSubmit: PropTypes.func,
};
console.log(left, right, dataSource);
// if (left.length || right.length) {
// var value = dataSource.map(function (item) {
// return item.value;
// });
// value.forEach(function (itemValue) {
// if (left.indexOf(itemValue) > -1) {
// result.left.push(itemValue);
// } else if (right.indexOf(itemValue) > -1) {
// result.right.push(itemValue);
// }
// });
// }
constructor(props) {
super(props);
this.state = {
visible: false,
valueList: props.valueList || [],
dataSourceList: props.dataSource || [],
currentPage: 1,
total: 0,
pageSize: 10,
dataSource: {},
};
}
return result;
};
});
}
closeDialog() {
this.setState({
visible: false
});
}
getData() {
const dataSource = this.state.dataSource;
request({
url: `/diamond-ops/configList/serverId/${dataSource.serverId}?dataId=${dataSource.dataId}&group=${dataSource.group}&appName=${dataSource.appName}&config_tags=${dataSource.config_tags || ''}&pageNo=${this.state.currentPage}&pageSize=${dataSource.pageSize}`,
success: res => {
if (res.code === 200) {
this.setState({
dataSourceList: res.data.map(obj => {
return {
label: obj.dataId,
value: obj.dataId
};
}) || [],
total: res.total
});
}
}
});
}
changePage(currentPage) {
this.setState({
currentPage
}, () => {
this.getData();
});
}
onChange(valueList, data, extra) {
this.setState({
valueList
});
}
onSubmit() {
this.props.onSubmit && this.props.onSubmit(this.state.valueList);
}
render() {
// console.log("valueList: ", this.state.valueList, this.transfer);
componentDidMount() {}
return <Dialog visible={this.state.visible} language={aliwareIntl.currentLanguageCode || 'zh-cn'} style={{ width: "500px" }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} onOk={this.onSubmit.bind(this)} title={"批量操作"}>
<div>
<Transfer ref={ref => this.transfer = ref} listStyle={{ height: 350 }} dataSource={this.state.dataSourceList || []} value={this.state.valueList} onChange={this.onChange.bind(this)} language={aliwareIntl.currentLanguageCode || 'zh-cn'} />
<Pagination style={{ marginTop: 10 }} current={this.state.currentPage} language={aliwareIntl.currentLanguageCode || 'zh-cn'} total={this.state.total} pageSize={this.state.pageSize} onChange={this.changePage.bind(this)} type="simple" />
</div>
</Dialog>;
}
openDialog(dataSource) {
this.setState(
{
visible: true,
dataSource,
pageSize: dataSource.pageSize,
},
() => {
this.getData();
this.transfer._instance.filterCheckedValue = function(left, right, dataSource) {
const result = {
left,
right,
};
return result;
};
}
);
}
closeDialog() {
this.setState({
visible: false,
});
}
getData() {
const { dataSource } = this.state;
request({
url: `/diamond-ops/configList/serverId/${dataSource.serverId}?dataId=${
dataSource.dataId
}&group=${dataSource.group}&appName=${
dataSource.appName
}&config_tags=${dataSource.config_tags || ''}&pageNo=${this.state.currentPage}&pageSize=${
dataSource.pageSize
}`,
success: res => {
if (res.code === 200) {
this.setState({
dataSourceList:
res.data.map(obj => ({
label: obj.dataId,
value: obj.dataId,
})) || [],
total: res.total,
});
}
},
});
}
changePage(currentPage) {
this.setState(
{
currentPage,
},
() => {
this.getData();
}
);
}
onChange(valueList, data, extra) {
this.setState({
valueList,
});
}
onSubmit() {
this.props.onSubmit && this.props.onSubmit(this.state.valueList);
}
render() {
// console.log("valueList: ", this.state.valueList, this.transfer);
return (
<Dialog
visible={this.state.visible}
language={aliwareIntl.currentLanguageCode || 'zh-cn'}
style={{ width: '500px' }}
onCancel={this.closeDialog.bind(this)}
onClose={this.closeDialog.bind(this)}
onOk={this.onSubmit.bind(this)}
title={'批量操作'}
>
<div>
<Transfer
ref={ref => (this.transfer = ref)}
listStyle={{ height: 350 }}
dataSource={this.state.dataSourceList || []}
value={this.state.valueList}
onChange={this.onChange.bind(this)}
language={aliwareIntl.currentLanguageCode || 'zh-cn'}
/>
<Pagination
style={{ marginTop: 10 }}
current={this.state.currentPage}
language={aliwareIntl.currentLanguageCode || 'zh-cn'}
total={this.state.total}
pageSize={this.state.pageSize}
onChange={this.changePage.bind(this)}
type="simple"
/>
</div>
</Dialog>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default BatchHandle;
export default BatchHandle;

2
console/src/main/resources/static/src/components/BatchHandle/index.js
View File

@ -13,4 +13,4 @@
import BatchHandle from './BatchHandle';
export default BatchHandle;
export default BatchHandle;

385
console/src/main/resources/static/src/components/CloneDialog/CloneDialog.js
View File

@ -15,174 +15,241 @@ import React from 'react';
import './index.less';
import { getParams, request, aliwareIntl } from '../../globalLib';
import { Button, Dialog, Field, Form, Select } from '@alifd/next';
const FormItem = Form.Item;
const { AutoComplete: Combobox } = Select;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class CloneDialog extends React.Component {
constructor(props) {
super(props);
this.allPolicy = [
{
value: 'abort',
label: aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0'),
},
{ value: 'skip', label: aliwareIntl.get('nacos.component.CloneDialog.skip') },
{ value: 'overwrite', label: aliwareIntl.get('nacos.component.CloneDialog.cover') },
];
this.defaultPolicy = 'abort';
this.state = {
visible: false,
serverId: '',
tenantFrom: {},
tenantTo: '',
dataId: '',
group: '',
appName: '',
configTags: '',
records: [],
namespaces: [],
policy: this.defaultPolicy,
policyLabel: aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0'),
total: 0,
};
this.field = new Field(this);
this.formItemLayout = {
labelCol: {
fixedSpan: 6,
},
wrapperCol: {
span: 18,
},
};
}
constructor(props) {
super(props);
this.allPolicy = [{ value: 'abort', label: aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0') }, { value: 'skip', label: aliwareIntl.get('nacos.component.CloneDialog.skip') }, { value: 'overwrite', label: aliwareIntl.get('nacos.component.CloneDialog.cover') }];
this.defaultPolicy = 'abort';
this.state = {
visible: false,
serverId: '',
tenantFrom: {},
componentDidMount() {}
openDialog(payload, callback) {
const serverId = getParams('serverId') || 'center';
this.checkData = payload.checkData;
this.callback = callback;
request({
type: 'get',
url: `/diamond-ops/service/serverId/${serverId}/namespaceInfo`,
success: res => {
if (res.code === 200) {
const dataSource = [];
res.data.forEach(value => {
if (value.namespace !== payload.tenantFrom.id) {
dataSource.push({
value: value.namespace,
label: `${value.namespaceShowName} | ${value.namespace}`,
});
}
});
this.setState({
visible: true,
serverId: payload.serverId,
tenantFrom: payload.tenantFrom,
tenantTo: '',
dataId: '',
group: '',
appName: '',
configTags: '',
records: [],
namespaces: [],
policy: this.defaultPolicy,
policyLabel: aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0'),
total: 0
};
this.field = new Field(this);
this.formItemLayout = {
labelCol: {
fixedSpan: 6
},
wrapperCol: {
span: 18
}
};
}
componentDidMount() { }
openDialog(payload, callback) {
let serverId = getParams('serverId') || 'center';
this.checkData = payload.checkData;
this.callback = callback;
request({
type: 'get',
url: `/diamond-ops/service/serverId/${serverId}/namespaceInfo`,
success: res => {
if (res.code === 200) {
let dataSource = [];
res.data.forEach(value => {
if (value.namespace !== payload.tenantFrom.id) {
dataSource.push({
value: value.namespace,
label: value.namespaceShowName + " | " + value.namespace
});
}
});
this.setState({
visible: true,
serverId: payload.serverId,
tenantFrom: payload.tenantFrom,
tenantTo: '',
dataId: payload.dataId,
group: payload.group,
appName: payload.appName,
configTags: payload.configTags,
records: payload.records,
namespaces: dataSource,
total: payload.total
});
this.field.setValue('select', '');
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('nacos.component.CloneDialog.get_the_namespace_failed'),
content: res.message
});
}
}
});
}
closeDialog() {
this.setState({
visible: false
});
}
setTenantTo(value) {
this.field.setValue(value);
this.setState({
tenantTo: value
});
}
setPolicy(...value) {
this.setState({
policyLabel: value[1].label,
policy: value[0]
});
}
getQuery() {
if (this.state.records.length > 0) {
return aliwareIntl.get('nacos.component.CloneDialog.|_the_selected_entry4');
dataId: payload.dataId,
group: payload.group,
appName: payload.appName,
configTags: payload.configTags,
records: payload.records,
namespaces: dataSource,
total: payload.total,
});
this.field.setValue('select', '');
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('nacos.component.CloneDialog.get_the_namespace_failed'),
content: res.message,
});
}
if (this.state.dataId === '' && this.state.group === '' && this.state.appName === '' && this.state.configTags.length === 0) {
return '';
}
let query = " |";
if (this.state.dataId !== '') {
query += ' DataId: ' + this.state.dataId + ',';
}
if (this.state.group !== '') {
query += ' Group: ' + this.state.group + ',';
}
if (this.state.appName !== '') {
query += aliwareIntl.get('nacos.component.CloneDialog.HOME_Application') + this.state.appName + ',';
}
if (this.state.configTags.length !== 0) {
query += aliwareIntl.get('nacos.component.CloneDialog.tags') + this.state.configTags + ',';
}
return query.substr(0, query.length - 1);
}
},
});
}
doClone() {
this.field.validate((errors, values) => {
if (errors) {
return;
}
this.closeDialog();
this.checkData.tenantTo = this.state.tenantTo;
this.checkData.policy = this.state.policy;
this.callback(this.checkData, this.state.policyLabel);
});
}
closeDialog() {
this.setState({
visible: false,
});
}
render() {
const init = this.field.init;
const footer = <div><Button type="primary" onClick={this.doClone.bind(this)} {...{ "disabled": this.state.total <= 0 }}>{aliwareIntl.get('nacos.component.CloneDialog.start_cloning')}</Button>
</div>;
setTenantTo(value) {
this.field.setValue(value);
this.setState({
tenantTo: value,
});
}
return <div>
<Dialog visible={this.state.visible} footer={footer} footerAlign="center" language={aliwareIntl.currentLanguageCode || 'zh-cn'} style={{ width: 555 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={aliwareIntl.get('nacos.component.CloneDialog.configuration_cloning\uFF08') + this.state.serverId + "）"}>
<Form field={this.field}>
<FormItem label={aliwareIntl.get('nacos.component.CloneDialog.source_space')} {...this.formItemLayout}>
<p><span style={{ color: '#33cde5' }}>{this.state.tenantFrom.name}</span>{" | " + this.state.tenantFrom.id}
</p>
</FormItem>
<FormItem label={aliwareIntl.get('nacos.component.CloneDialog.configuration_number')} {...this.formItemLayout}>
<p><span style={{ color: '#33cde5' }}>{this.state.total}</span> {this.getQuery()} </p>
</FormItem>
<FormItem label={aliwareIntl.get('nacos.component.CloneDialog.target_space')} {...this.formItemLayout}>
<Combobox style={{ width: '80%' }} size="medium" hasArrow placeholder={aliwareIntl.get('nacos.component.CloneDialog.select_namespace')} dataSource={this.state.namespaces} {...init('select', {
props: {
onChange: this.setTenantTo.bind(this)
},
rules: [{ required: true, message: aliwareIntl.get('nacos.component.CloneDialog.select_namespace') }]
})} language={aliwareIntl.currentLanguageCode}>
</Combobox>
</FormItem>
<FormItem label={aliwareIntl.get('nacos.component.CloneDialog.the_same_configuration')} {...this.formItemLayout}>
<Select size="medium" hasArrow defaultValue={this.defaultPolicy} dataSource={this.allPolicy} onChange={this.setPolicy.bind(this)} language={aliwareIntl.currentLanguageCode}>
</Select>
</FormItem>
</Form>
</Dialog>
</div>;
setPolicy(...value) {
this.setState({
policyLabel: value[1].label,
policy: value[0],
});
}
getQuery() {
if (this.state.records.length > 0) {
return aliwareIntl.get('nacos.component.CloneDialog.|_the_selected_entry4');
}
if (
this.state.dataId === '' &&
this.state.group === '' &&
this.state.appName === '' &&
this.state.configTags.length === 0
) {
return '';
}
let query = ' |';
if (this.state.dataId !== '') {
query += ` DataId: ${this.state.dataId},`;
}
if (this.state.group !== '') {
query += ` Group: ${this.state.group},`;
}
if (this.state.appName !== '') {
query += `${aliwareIntl.get('nacos.component.CloneDialog.HOME_Application') +
this.state.appName},`;
}
if (this.state.configTags.length !== 0) {
query += `${aliwareIntl.get('nacos.component.CloneDialog.tags') + this.state.configTags},`;
}
return query.substr(0, query.length - 1);
}
doClone() {
this.field.validate((errors, values) => {
if (errors) {
return;
}
this.closeDialog();
this.checkData.tenantTo = this.state.tenantTo;
this.checkData.policy = this.state.policy;
this.callback(this.checkData, this.state.policyLabel);
});
}
render() {
const { init } = this.field;
const footer = (
<div>
<Button
type="primary"
onClick={this.doClone.bind(this)}
{...{ disabled: this.state.total <= 0 }}
>
{aliwareIntl.get('nacos.component.CloneDialog.start_cloning')}
</Button>
</div>
);
return (
<div>
<Dialog
visible={this.state.visible}
footer={footer}
footerAlign="center"
language={aliwareIntl.currentLanguageCode || 'zh-cn'}
style={{ width: 555 }}
onCancel={this.closeDialog.bind(this)}
onClose={this.closeDialog.bind(this)}
title={`${aliwareIntl.get('nacos.component.CloneDialog.configuration_cloning\uFF08') +
this.state.serverId}）`}
>
<Form field={this.field}>
<FormItem
label={aliwareIntl.get('nacos.component.CloneDialog.source_space')}
{...this.formItemLayout}
>
<p>
<span style={{ color: '#33cde5' }}>{this.state.tenantFrom.name}</span>
{` | ${this.state.tenantFrom.id}`}
</p>
</FormItem>
<FormItem
label={aliwareIntl.get('nacos.component.CloneDialog.configuration_number')}
{...this.formItemLayout}
>
<p>
<span style={{ color: '#33cde5' }}>{this.state.total}</span> {this.getQuery()}{' '}
</p>
</FormItem>
<FormItem
label={aliwareIntl.get('nacos.component.CloneDialog.target_space')}
{...this.formItemLayout}
>
<Combobox
style={{ width: '80%' }}
size="medium"
hasArrow
placeholder={aliwareIntl.get('nacos.component.CloneDialog.select_namespace')}
dataSource={this.state.namespaces}
{...init('select', {
props: {
onChange: this.setTenantTo.bind(this),
},
rules: [
{
required: true,
message: aliwareIntl.get('nacos.component.CloneDialog.select_namespace'),
},
],
})}
language={aliwareIntl.currentLanguageCode}
/>
</FormItem>
<FormItem
label={aliwareIntl.get('nacos.component.CloneDialog.the_same_configuration')}
{...this.formItemLayout}
>
<Select
size="medium"
hasArrow
defaultValue={this.defaultPolicy}
dataSource={this.allPolicy}
onChange={this.setPolicy.bind(this)}
language={aliwareIntl.currentLanguageCode}
/>
</FormItem>
</Form>
</Dialog>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default CloneDialog;
export default CloneDialog;

2
console/src/main/resources/static/src/components/CloneDialog/index.js
View File

@ -13,4 +13,4 @@
import CloneDialog from './CloneDialog';
export default CloneDialog;
export default CloneDialog;

130
console/src/main/resources/static/src/components/DeleteDialog/DeleteDialog.js
View File

@ -15,74 +15,78 @@ import React from 'react';
import './index.less';
import { aliwareIntl } from '../../globalLib';
import { Button, Dialog, Grid, Icon } from '@alifd/next';
const { Row, Col } = Grid;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class DeleteDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
title: aliwareIntl.get('nacos.component.DeleteDialog.Configuration_management'),
content: '',
isok: true,
dataId: '',
group: ''
constructor(props) {
super(props);
this.state = {
visible: false,
title: aliwareIntl.get('nacos.component.DeleteDialog.Configuration_management'),
content: '',
isok: true,
dataId: '',
group: '',
};
}
};
}
componentDidMount() { }
openDialog(payload) {
this.setState({
visible: true,
title: payload.title,
content: payload.content,
isok: payload.isok,
dataId: payload.dataId,
group: payload.group,
message: payload.message
});
}
closeDialog() {
this.setState({
visible: false
});
}
render() {
const footer = <div style={{ textAlign: 'right' }}><Button type="primary" onClick={this.closeDialog.bind(this)}>{aliwareIntl.get('nacos.component.DeleteDialog.determine')}</Button></div>;
return <div>
<Dialog visible={this.state.visible} footer={footer} language={aliwareIntl.currentLanguageCode || 'zh-cn'} style={{ width: 555 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={aliwareIntl.get('nacos.component.DeleteDialog.deletetitle')}>
<div>
<Row>
<Col span={'4'} style={{ paddingTop: 16 }}>
{this.state.isok ? <Icon type="success-filling" style={{ color: 'green' }} size={'xl'} /> : <Icon type="delete-filling" style={{ color: 'red' }} size={'xl'} />}
componentDidMount() { }
</Col>
<Col span={'20'}>
<div>
<h3>{this.state.isok ? aliwareIntl.get('nacos.component.DeleteDialog.deleted_successfully_configured') : aliwareIntl.get('nacos.component.DeleteDialog.delete_the_configuration_failed')}</h3>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}>
{this.state.dataId}
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Group:</span>
<span style={{ color: '#c7254e' }}>
{this.state.group}
</span>
</p>
{this.state.isok ? '' : <p style={{ color: 'red' }}>{this.state.message}</p>}
</div>
</Col>
</Row>
openDialog(payload) {
this.setState({
visible: true,
title: payload.title,
content: payload.content,
isok: payload.isok,
dataId: payload.dataId,
group: payload.group,
message: payload.message,
});
}
</div>
</Dialog>
closeDialog() {
this.setState({
visible: false,
});
}
</div>;
}
render() {
const footer = <div style={{ textAlign: 'right' }}><Button type="primary" onClick={this.closeDialog.bind(this)}>{aliwareIntl.get('nacos.component.DeleteDialog.determine')}</Button></div>;
return (<div>
<Dialog visible={this.state.visible} footer={footer} language={aliwareIntl.currentLanguageCode || 'zh-cn'} style={{ width: 555 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={aliwareIntl.get('nacos.component.DeleteDialog.deletetitle')}>
<div>
<Row>
<Col span={'4'} style={{ paddingTop: 16 }}>
{this.state.isok ? <Icon type="success-filling" style={{ color: 'green' }} size={'xl'} /> : <Icon type="delete-filling" style={{ color: 'red' }} size={'xl'} />}
</Col>
<Col span={'20'}>
<div>
<h3>{this.state.isok ? aliwareIntl.get('nacos.component.DeleteDialog.deleted_successfully_configured') : aliwareIntl.get('nacos.component.DeleteDialog.delete_the_configuration_failed')}</h3>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}>
{this.state.dataId}
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Group:</span>
<span style={{ color: '#c7254e' }}>
{this.state.group}
</span>
</p>
{this.state.isok ? '' : <p style={{ color: 'red' }}>{this.state.message}</p>}
</div>
</Col>
</Row>
</div>
</Dialog>
</div>);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default DeleteDialog;
export default DeleteDialog;

2
console/src/main/resources/static/src/components/DeleteDialog/index.js
View File

@ -13,4 +13,4 @@
import DeleteDialog from './DeleteDialog';
export default DeleteDialog;
export default DeleteDialog;

153
console/src/main/resources/static/src/components/DiffEditorDialog/DiffEditorDialog.js
View File

@ -12,78 +12,103 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { aliwareIntl } from '../../globalLib';
import './index.less';
import { Button, Dialog, Grid } from '@alifd/next';
const { Row, Col } = Grid;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class DiffEditorDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
dialogvisible: false
};
}
static propTypes = {
publishConfig: PropTypes.func,
};
componentDidMount() { }
openDialog(letfcode, rightcode) {
this.setState({
dialogvisible: true
});
setTimeout(() => {
this.createDiffCodeMirror(letfcode, rightcode);
});
}
constructor(props) {
super(props);
this.state = {
dialogvisible: false,
};
}
closeDialog() {
this.setState({
dialogvisible: false
});
}
createDiffCodeMirror(leftCode, rightCode) {
let target = this.refs["diffeditor"];
target.innerHTML = '';
componentDidMount() {}
this.diffeditor = window.CodeMirror.MergeView(target, {
value: leftCode || '',
readOnly: true,
origLeft: null,
orig: rightCode || '',
lineNumbers: true,
mode: this.mode,
theme: 'xq-light',
highlightDifferences: true,
connect: 'align',
collapseIdentical: false
});
// this.diffeditor.leftOriginal().setSize(null,480);
// this.diffeditor.rightOriginal().setSize(null, 480);
// this.diffeditor.wrap.style.height= '480px';
// this.diffeditor.edit.setSize('100%',480);
// this.diffeditor.right.edit.setSize('100%',480);
}
confirmPub() {
this.closeDialog();
this.props.publishConfig();
}
render() {
const footer = <div> <Button type="primary" onClick={this.confirmPub.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.confirm_that_the')}</Button></div>;
return <div>
<Dialog title={aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.contents')} language={aliwareIntl.currentLanguageCode || 'zh-cn'} style={{ width: '80%' }} visible={this.state.dialogvisible} footer={footer} onClose={this.closeDialog.bind(this)}>
<div style={{ height: 400 }}>
<div>
<Row>
<Col style={{ textAlign: 'center' }}>{aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.of_the_current_area')}</Col>
<Col style={{ textAlign: 'center' }}>{aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.original_value')}</Col>
</Row>
</div>
<div style={{ clear: 'both', height: 480 }} ref="diffeditor"></div>
openDialog(letfcode, rightcode) {
this.setState({
dialogvisible: true,
});
setTimeout(() => {
this.createDiffCodeMirror(letfcode, rightcode);
});
}
</div>
</Dialog>
</div>;
}
closeDialog() {
this.setState({
dialogvisible: false,
});
}
createDiffCodeMirror(leftCode, rightCode) {
const target = this.refs.diffeditor;
target.innerHTML = '';
this.diffeditor = window.CodeMirror.MergeView(target, {
value: leftCode || '',
readOnly: true,
origLeft: null,
orig: rightCode || '',
lineNumbers: true,
mode: this.mode,
theme: 'xq-light',
highlightDifferences: true,
connect: 'align',
collapseIdentical: false,
});
}
confirmPub() {
this.closeDialog();
this.props.publishConfig();
}
render() {
const footer = (
<div>
{' '}
<Button type="primary" onClick={this.confirmPub.bind(this)}>
{aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.confirm_that_the')}
</Button>
</div>
);
return (
<div>
<Dialog
title={aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.contents')}
language={aliwareIntl.currentLanguageCode || 'zh-cn'}
style={{ width: '80%' }}
visible={this.state.dialogvisible}
footer={footer}
onClose={this.closeDialog.bind(this)}
>
<div style={{ height: 400 }}>
<div>
<Row>
<Col style={{ textAlign: 'center' }}>
{aliwareIntl.get(
'com.alibaba.nacos.component.DiffEditorDialog.of_the_current_area'
)}
</Col>
<Col style={{ textAlign: 'center' }}>
{aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.original_value')}
</Col>
</Row>
</div>
<div style={{ clear: 'both', height: 480 }} ref="diffeditor" />
</div>
</Dialog>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default DiffEditorDialog;
export default DiffEditorDialog;

2
console/src/main/resources/static/src/components/DiffEditorDialog/index.js
View File

@ -13,4 +13,4 @@
import DiffEditorDialog from './DiffEditorDialog';
export default DiffEditorDialog;
export default DiffEditorDialog;

311
console/src/main/resources/static/src/components/EditorNameSpace/EditorNameSpace.js
View File

@ -15,170 +15,179 @@ import React from 'react';
import './index.less';
import { request, aliwareIntl } from '../../globalLib';
import { Button, Dialog, Field, Form, Input, Loading } from '@alifd/next';
const FormItem = Form.Item;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class EditorNameSpace extends React.Component {
constructor(props) {
super(props);
this.state = {
dialogvisible: false,
loading: false
};
this.field = new Field(this);
}
constructor(props) {
super(props);
this.state = {
dialogvisible: false,
loading: false,
};
this.field = new Field(this);
}
componentDidMount() {
componentDidMount() {
}
}
openDialog(record) {
this.getNamespaceDetail(record);
this.setState({
dialogvisible: true,
type: record.type
});
}
openDialog(record) {
this.getNamespaceDetail(record);
this.setState({
dialogvisible: true,
type: record.type,
});
}
closeDialog() {
this.setState({
dialogvisible: false
});
}
closeDialog() {
this.setState({
dialogvisible: false,
});
}
openLoading() {
this.setState({
loading: true
});
}
closeLoading() {
this.setState({
loading: false
});
}
openLoading() {
this.setState({
loading: true,
});
}
getNamespaceDetail(record) {
this.field.setValues(record);
request({
type: 'get',
url: `/nacos/v1/console/namespaces?show=all&namespaceId=${record.namespace}`,
success: res => {
if (res !== null) {
this.field.setValue('namespaceDesc', res.namespaceDesc);
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'),
content: res.message
});
}
},
error: res => {
window.namespaceList = [];
this.handleNameSpaces(window.namespaceList);
}
});
}
closeLoading() {
this.setState({
loading: false,
});
}
handleSubmit() {
this.field.validate((errors, values) => {
if (errors) {
return;
}
request({
type: 'put',
beforeSend: () => {
this.openLoading();
},
url: `/nacos/v1/console/namespaces`,
contentType: 'application/x-www-form-urlencoded',
data: {
"namespace": values.namespace,
"namespaceShowName": values.namespaceShowName,
"namespaceDesc": values.namespaceDesc
},
success: res => {
if (res === true) {
this.closeDialog();
this.props.getNameSpaces();
this.refreshNameSpace(); //刷新全局namespace
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.prompt'),
content: res.message
});
}
},
complete: () => {
this.closeLoading();
}
});
});
}
refreshNameSpace() {
setTimeout(() => {
request({
type: 'get',
url: `/nacos/v1/console/namespaces`,
success: res => {
if (res.code === 200) {
window.namespaceList = res.data;
}
}
});
}, 2000);
}
validateChart(rule, value, callback) {
const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) {
callback(aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.please_do'));
getNamespaceDetail(record) {
this.field.setValues(record);
request({
type: 'get',
url: `/nacos/v1/console/namespaces?show=all&namespaceId=${record.namespace}`,
success: (res) => {
if (res !== null) {
this.field.setValue('namespaceDesc', res.namespaceDesc);
} else {
callback();
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'),
content: res.message,
});
}
}
render() {
const formItemLayout = {
labelCol: {
fixedSpan: 6
},
wrapperCol: {
span: 18
}
};
},
error: (res) => {
window.namespaceList = [];
this.handleNameSpaces(window.namespaceList);
},
});
}
let footer = this.state.type === 0 ? <div></div> : <Button type="primary" onClick={this.handleSubmit.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.public_space')}</Button>;
return (
<div>
<Dialog title={aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.confirm_modify')} style={{ width: '50%' }} visible={this.state.dialogvisible} footer={footer} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} language={aliwareIntl.currentLanguageCode}>
<Loading tip={aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.edit_namespace')} style={{ width: '100%', position: 'relative' }} visible={this.state.loading}>
<Form field={this.field}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.load')} required {...formItemLayout}>
<Input {...this.field.init('namespaceShowName', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.namespace')
}, { validator: this.validateChart.bind(this) }]
})} disabled={this.state.type === 0 ? true : false} />
</FormItem>
<FormItem label={aliwareIntl.get('nacos.page.configdetail.Description')} required {...formItemLayout}>
<Input {...this.field.init('namespaceDesc', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.namespace')
}, { validator: this.validateChart.bind(this) }]
})} disabled={this.state.type === 0 ? true : false} />
</FormItem>
</Form>
</Loading>
</Dialog>
handleSubmit() {
this.field.validate((errors, values) => {
if (errors) {
return;
}
request({
type: 'put',
beforeSend: () => {
this.openLoading();
},
url: '/nacos/v1/console/namespaces',
contentType: 'application/x-www-form-urlencoded',
data: {
namespace: values.namespace,
namespaceShowName: values.namespaceShowName,
namespaceDesc: values.namespaceDesc,
},
success: (res) => {
if (res === true) {
this.closeDialog();
this.props.getNameSpaces();
this.refreshNameSpace(); // 刷新全局namespace
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.prompt'),
content: res.message,
});
}
},
complete: () => {
this.closeLoading();
},
});
});
}
</div>
);
refreshNameSpace() {
setTimeout(() => {
request({
type: 'get',
url: '/nacos/v1/console/namespaces',
success: (res) => {
if (res.code === 200) {
window.namespaceList = res.data;
}
},
});
}, 2000);
}
validateChart(rule, value, callback) {
const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) {
callback(aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.please_do'));
} else {
callback();
}
}
render() {
const formItemLayout = {
labelCol: {
fixedSpan: 6,
},
wrapperCol: {
span: 18,
},
};
const footer = this.state.type === 0 ? <div /> : <Button type="primary" onClick={this.handleSubmit.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.public_space')}</Button>;
return (
<div>
<Dialog title={aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.confirm_modify')} style={{ width: '50%' }} visible={this.state.dialogvisible} footer={footer} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} language={aliwareIntl.currentLanguageCode}>
<Loading tip={aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.edit_namespace')} style={{ width: '100%', position: 'relative' }} visible={this.state.loading}>
<Form field={this.field}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.load')} required {...formItemLayout}>
<Input
{...this.field.init('namespaceShowName', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.namespace'),
}, { validator: this.validateChart.bind(this) }],
})}
disabled={this.state.type === 0}
/>
</FormItem>
<FormItem label={aliwareIntl.get('nacos.page.configdetail.Description')} required {...formItemLayout}>
<Input
{...this.field.init('namespaceDesc', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.namespace'),
}, { validator: this.validateChart.bind(this) }],
})}
disabled={this.state.type === 0}
/>
</FormItem>
</Form>
</Loading>
</Dialog>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default EditorNameSpace;
export default EditorNameSpace;

2
console/src/main/resources/static/src/components/EditorNameSpace/index.js
View File

@ -13,4 +13,4 @@
import EditorNameSpace from './EditorNameSpace';
export default EditorNameSpace;
export default EditorNameSpace;

242
console/src/main/resources/static/src/components/ExportDialog/ExportDialog.js
View File

@ -15,120 +15,154 @@ import React from 'react';
import { aliwareIntl } from '../../globalLib';
import './index.less';
import { Button, Dialog, Form } from '@alifd/next';
const FormItem = Form.Item;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ExportDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
serverId: '',
tenant: '',
dataId: '',
group: '',
appName: '',
configTags: '',
records: [],
total: 0
};
this.formItemLayout = {
labelCol: {
fixedSpan: 4
},
wrapperCol: {
span: 20
}
};
constructor(props) {
super(props);
this.state = {
visible: false,
serverId: '',
tenant: '',
dataId: '',
group: '',
appName: '',
configTags: '',
records: [],
total: 0,
};
this.formItemLayout = {
labelCol: {
fixedSpan: 4,
},
wrapperCol: {
span: 20,
},
};
}
componentDidMount() {}
openDialog(payload) {
this.setState({
visible: true,
serverId: payload.serverId,
tenant: payload.tenant,
dataId: payload.dataId,
group: payload.group,
appName: payload.appName,
configTags: payload.configTags,
records: payload.records,
total: payload.total,
});
}
closeDialog = () => {
this.setState({
visible: false,
});
};
getQuery() {
if (this.state.records.length > 0) {
return aliwareIntl.get('nacos.component.ExportDialog.|_The_selected_entry0');
}
componentDidMount() { }
openDialog(payload) {
this.setState({
visible: true,
serverId: payload.serverId,
tenant: payload.tenant,
dataId: payload.dataId,
group: payload.group,
appName: payload.appName,
configTags: payload.configTags,
records: payload.records,
total: payload.total
});
if (
this.state.dataId === '' &&
this.state.group === '' &&
this.state.appName === '' &&
this.state.configTags.length === 0
) {
return '';
}
closeDialog() {
this.setState({
visible: false
});
let query = ' |';
if (this.state.dataId !== '') {
query += ` DataId: ${this.state.dataId},`;
}
getQuery() {
if (this.state.records.length > 0) {
return aliwareIntl.get('nacos.component.ExportDialog.|_The_selected_entry0');
}
if (this.state.dataId === '' && this.state.group === '' && this.state.appName === '' && this.state.configTags.length === 0) {
return '';
}
let query = " |";
if (this.state.dataId !== '') {
query += ' DataId: ' + this.state.dataId + ',';
}
if (this.state.group !== '') {
query += ' Group: ' + this.state.group + ',';
}
if (this.state.appName !== '') {
query += aliwareIntl.get('nacos.component.ExportDialog.HOME_Application1') + this.state.appName + ',';
}
if (this.state.configTags.length !== 0) {
query += aliwareIntl.get('nacos.component.ExportDialog.tags2') + this.state.configTags + ',';
}
return query.substr(0, query.length - 1);
if (this.state.group !== '') {
query += ` Group: ${this.state.group},`;
}
doExport() {
// document.getElementById('downloadLink').click();
let url = this.getLink();
window.open(url);
this.closeDialog();
if (this.state.appName !== '') {
query += `${aliwareIntl.get('nacos.component.ExportDialog.HOME_Application1') +
this.state.appName},`;
}
getLink() {
let data = [];
this.state.records.forEach(record => {
data.push({ dataId: record.dataId, group: record.group });
});
console.log(encodeURI(JSON.stringify(data)));
let query = `?dataId=${this.state.dataId}&group=${this.state.group}&appName=${this.state.appName}&tags=${this.state.configTags || ''}&data=${encodeURI(JSON.stringify(data))}`;
const baseLink = `/diamond-ops/batch/export/serverId/${this.state.serverId}/tenant/${this.state.tenant.id}` + query;
if (window.globalConfig.isParentEdas()) {
return '/authgw/' + window.edasprefix + baseLink;
}
return baseLink;
if (this.state.configTags.length !== 0) {
query += `${aliwareIntl.get('nacos.component.ExportDialog.tags2') + this.state.configTags},`;
}
return query.substr(0, query.length - 1);
}
render() {
const footer = <div>
{/* <a id="downloadLink" style={{ display: "none" }} href={this.getLink()} /> */}
<Button type="primary" onClick={this.doExport.bind(this)} {...{ "disabled": this.state.total <= 0 }}>{aliwareIntl.get('nacos.component.ExportDialog.export3')}</Button>
</div>;
doExport = () => {
// document.getElementById('downloadLink').click();
const url = this.getLink();
window.open(url);
this.closeDialog();
};
return <div>
<Dialog visible={this.state.visible} footer={footer} footerAlign="center" language={aliwareIntl.currentLanguageCode || 'zh-cn'} style={{ width: 480 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={aliwareIntl.get('nacos.component.ExportDialog.export_configuration4') + this.state.serverId + "）"}>
<Form>
<FormItem label={aliwareIntl.get('nacos.component.ExportDialog.source_space5')} {...this.formItemLayout}>
<p>
<span style={{ color: '#33cde5' }}>{this.state.tenant.name}</span>{" | " + this.state.tenant.id}
</p>
</FormItem>
<FormItem label={aliwareIntl.get('nacos.component.ExportDialog.configuration_number6')} {...this.formItemLayout}>
<p><span style={{ color: '#33cde5' }}>{this.state.total}</span> {this.getQuery()} </p>
</FormItem>
</Form>
</Dialog>
</div>;
getLink() {
const data = [];
this.state.records.forEach(record => {
data.push({ dataId: record.dataId, group: record.group });
});
const query = `?dataId=${this.state.dataId}&group=${this.state.group}&appName=${
this.state.appName
}&tags=${this.state.configTags || ''}&data=${encodeURI(JSON.stringify(data))}`;
const baseLink = `/diamond-ops/batch/export/serverId/${this.state.serverId}/tenant/${
this.state.tenant.id
}${query}`;
if (window.globalConfig.isParentEdas()) {
return `/authgw/${window.edasprefix}${baseLink}`;
}
return baseLink;
}
render() {
const footer = (
<div>
{/* <a id="downloadLink" style={{ display: "none" }} href={this.getLink()} /> */}
<Button type="primary" onClick={this.doExport} {...{ disabled: this.state.total <= 0 }}>
{aliwareIntl.get('nacos.component.ExportDialog.export3')}
</Button>
</div>
);
return (
<div>
<Dialog
visible={this.state.visible}
footer={footer}
footerAlign="center"
language={aliwareIntl.currentLanguageCode || 'zh-cn'}
style={{ width: 480 }}
onCancel={this.closeDialog}
onClose={this.closeDialog}
title={`${aliwareIntl.get('nacos.component.ExportDialog.export_configuration4') +
this.state.serverId}）`}
>
<Form>
<FormItem
label={aliwareIntl.get('nacos.component.ExportDialog.source_space5')}
{...this.formItemLayout}
>
<p>
<span style={{ color: '#33cde5' }}>{this.state.tenant.name}</span>
{` | ${this.state.tenant.id}`}
</p>
</FormItem>
<FormItem
label={aliwareIntl.get('nacos.component.ExportDialog.configuration_number6')}
{...this.formItemLayout}
>
<p>
<span style={{ color: '#33cde5' }}>{this.state.total}</span> {this.getQuery()}{' '}
</p>
</FormItem>
</Form>
</Dialog>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ExportDialog;
export default ExportDialog;

2
console/src/main/resources/static/src/components/ExportDialog/index.js
View File

@ -13,4 +13,4 @@
import ExportDialog from './ExportDialog';
export default ExportDialog;
export default ExportDialog;

266
console/src/main/resources/static/src/components/ImportDialog/ImportDialog.js
View File

@ -15,111 +15,191 @@ import React from 'react';
import { aliwareIntl } from '../../globalLib';
import './index.less';
import { Balloon, Button, Dialog, Form, Icon, Select, Upload } from '@alifd/next';
const FormItem = Form.Item;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ImportDialog extends React.Component {
constructor(props) {
super(props);
this.formItemLayout = {
labelCol: {
fixedSpan: 4
},
wrapperCol: {
span: 20
}
};
this.allPolicy = [{ value: 'abort', label: aliwareIntl.get('nacos.component.ImportDialog.To_terminate_the_import0') }, { value: 'skip', label: aliwareIntl.get('nacos.component.ImportDialog.skip1') }, {
value: 'overwrite',
label: aliwareIntl.get('nacos.component.ImportDialog.cover2')
}];
this.defaultPolicy = 'abort';
this.state = {
visible: false,
serverId: '',
tenant: '',
policy: this.defaultPolicy,
policyLabel: aliwareIntl.get('nacos.component.ImportDialog.To_terminate_the_import0')
};
constructor(props) {
super(props);
this.formItemLayout = {
labelCol: {
fixedSpan: 4,
},
wrapperCol: {
span: 20,
},
};
this.allPolicy = [
{
value: 'abort',
label: aliwareIntl.get('nacos.component.ImportDialog.To_terminate_the_import0'),
},
{ value: 'skip', label: aliwareIntl.get('nacos.component.ImportDialog.skip1') },
{
value: 'overwrite',
label: aliwareIntl.get('nacos.component.ImportDialog.cover2'),
},
];
this.defaultPolicy = 'abort';
this.state = {
visible: false,
serverId: '',
tenant: '',
policy: this.defaultPolicy,
policyLabel: aliwareIntl.get('nacos.component.ImportDialog.To_terminate_the_import0'),
};
}
componentDidMount() {}
openDialog(payload, callback) {
this.callback = callback;
this.setState({
visible: true,
serverId: payload.serverId,
tenant: payload.tenant,
});
}
closeDialog = () => {
this.setState({
visible: false,
});
};
setPolicy = (...value) => {
this.setState({
policyLabel: value[1].label,
policy: value[0],
});
};
formatter = res => {
if (res.code === 200) {
return {
code: '0',
retData: res,
};
} else {
return {
code: '1',
error: {
message: res.message,
},
retData: res,
};
}
};
componentDidMount() { }
render() {
let uploadLink = `/diamond-ops/batch/import/serverId/${this.state.serverId}/tenant/${
this.state.tenant.id
}?policy=${this.state.policy}`;
openDialog(payload, callback) {
this.callback = callback;
this.setState({
visible: true,
serverId: payload.serverId,
tenant: payload.tenant
});
if (window.globalConfig.isParentEdas()) {
uploadLink = `/authgw/${window.edasprefix}${uploadLink}`;
}
closeDialog() {
this.setState({
visible: false
});
}
setPolicy(...value) {
this.setState({
policyLabel: value[1].label,
policy: value[0]
});
}
formatter(res) {
if (res.code === 200) {
return {
code: '0',
retData: res
};
} else {
return {
code: '1',
error: {
message: res.message
},
retData: res
};
const helpTip = (
<Balloon
trigger={
<span>
Data ID{' '}
<Icon
type={'help'}
size={'small'}
style={{ color: '#1DC11D', marginRight: 5, verticalAlign: 'middle' }}
/>
</span>
}
}
render() {
let uploadLink = `/diamond-ops/batch/import/serverId/${this.state.serverId}/tenant/${this.state.tenant.id}?policy=${this.state.policy}`;
if (window.globalConfig.isParentEdas()) {
uploadLink = '/authgw/' + window.edasprefix + uploadLink;
}
const helpTip = <Balloon trigger={<span>Data ID <Icon type={"help"} size={'small'} style={{ color: '#1DC11D', marginRight: 5, verticalAlign: 'middle' }} /></span>} align={"t"} style={{ marginRight: 5 }} triggerType={"hover"}>
<a href={window._getLink && window._getLink("knowDataid")} target={"_blank"}>{aliwareIntl.get('nacos.component.ImportDialog.You_can_only_upload._zip_file_format0') /*只能上传.zip格式的文件*/}</a>
</Balloon>;
const footer = <div><Upload language={aliwareIntl.currentLanguageCode || 'zh-cn'} listType={"text"} action={uploadLink} limit={1} accept={".zip"} onSuccess={(...args) => {
align={'t'}
style={{ marginRight: 5 }}
triggerType={'hover'}
>
<a href={window._getLink && window._getLink('knowDataid')} target={'_blank'}>
{aliwareIntl.get(
'nacos.component.ImportDialog.You_can_only_upload._zip_file_format0'
) /* 只能上传.zip格式的文件 */}
</a>
</Balloon>
);
const footer = (
<div>
<Upload
language={aliwareIntl.currentLanguageCode || 'zh-cn'}
listType={'text'}
action={uploadLink}
limit={1}
accept={'.zip'}
onSuccess={(...args) => {
this.callback(args[0].retData, this.state.policyLabel);
this.closeDialog();
}} onError={(...args) => {
}}
onError={(...args) => {
this.callback(args[0].response.retData, this.state.policyLabel);
this.closeDialog();
}} formatter={this.formatter.bind(this)} headers={{ poweredBy: "simpleMVC", projectName: "nacos" }}>
<Button type={"primary"}>{aliwareIntl.get('nacos.component.ImportDialog.Upload_File3')}</Button>
</Upload></div>;
}}
formatter={this.formatter}
headers={{ poweredBy: 'simpleMVC', projectName: 'nacos' }}
>
<Button type={'primary'}>
{aliwareIntl.get('nacos.component.ImportDialog.Upload_File3')}
</Button>
</Upload>
</div>
);
return <div>
<Dialog visible={this.state.visible} footer={footer} footerAlign={"center"} language={aliwareIntl.currentLanguageCode || 'zh-cn'} style={{ width: 480 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={aliwareIntl.get('nacos.component.ImportDialog.Import_configuration4') + this.state.serverId + "）"}>
<Form>
<FormItem label={aliwareIntl.get('nacos.component.ImportDialog.target_space5')} {...this.formItemLayout}>
<p><span style={{ color: '#33cde5' }}>{this.state.tenant.name}</span>{" | " + this.state.tenant.id}
</p>
</FormItem>
<FormItem label={aliwareIntl.get('nacos.component.ImportDialog.the_same_configuration6')} {...this.formItemLayout}>
<Select size={"medium"} hasArrow defaultValue={this.defaultPolicy} dataSource={this.allPolicy} onChange={this.setPolicy.bind(this)} language={aliwareIntl.currentLanguageCode}>
</Select>
</FormItem>
</Form>
return (
<div>
<Dialog
visible={this.state.visible}
footer={footer}
footerAlign={'center'}
language={aliwareIntl.currentLanguageCode || 'zh-cn'}
style={{ width: 480 }}
onCancel={this.closeDialog}
onClose={this.closeDialog}
title={`${aliwareIntl.get('nacos.component.ImportDialog.Import_configuration4') +
this.state.serverId}）`}
>
<Form>
<FormItem
label={aliwareIntl.get('nacos.component.ImportDialog.target_space5')}
{...this.formItemLayout}
>
<p>
<span style={{ color: '#33cde5' }}>{this.state.tenant.name}</span>
{` | ${this.state.tenant.id}`}
</p>
</FormItem>
<FormItem
label={aliwareIntl.get('nacos.component.ImportDialog.the_same_configuration6')}
{...this.formItemLayout}
>
<Select
size={'medium'}
hasArrow
defaultValue={this.defaultPolicy}
dataSource={this.allPolicy}
onChange={this.setPolicy}
language={aliwareIntl.currentLanguageCode}
/>
</FormItem>
</Form>
<div style={{ textAlign: "center" }}><Icon type={"warning"} style={{ color: '#ff8a00', marginRight: 5, verticalAlign: 'middle' }} />{aliwareIntl.get('nacos.component.ImportDialog.file_upload_directly_after_importing_the_configuration,_please_be_sure_to_exercise_caution7')}{helpTip}</div>
</Dialog>
</div>;
}
<div style={{ textAlign: 'center' }}>
<Icon
type={'warning'}
style={{ color: '#ff8a00', marginRight: 5, verticalAlign: 'middle' }}
/>
{aliwareIntl.get(
'nacos.component.ImportDialog.file_upload_directly_after_importing_the_configuration,_please_be_sure_to_exercise_caution7'
)}
{helpTip}
</div>
</Dialog>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ImportDialog;
export default ImportDialog;

2
console/src/main/resources/static/src/components/ImportDialog/index.js
View File

@ -13,4 +13,4 @@
import ImportDialog from './ImportDialog';
export default ImportDialog;
export default ImportDialog;

320
console/src/main/resources/static/src/components/NameSpaceList/NameSpaceList.js
View File

@ -12,167 +12,205 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import './index.less';
import { Dialog } from '@alifd/next';
import { getParams, setParams, request, aliwareIntl } from '../../globalLib';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
/**
* 命名空间列表
*/
class NameSpaceList extends React.Component {
constructor(props) {
super(props);
this._namespace = getParams('namespace') || '';
// this._namespaceShowName = getParams('namespaceShowName') || '';
this.state = {
nownamespace: window.nownamespace || this._namespace || '',
namespaceList: window.namespaceList || []
// namespaceShowName: window.namespaceShowName || this._namespaceShowName || '',
// _dingdingLink: "",
// _forumLink: ""
};
}
componentDidMount() {
// this.getLink("dingding", "_dingdingLink");
// this.getLink("discuz", "_forumLink");
}
static propTypes = {
setNowNameSpace: PropTypes.func,
namespaceCallBack: PropTypes.func,
title: PropTypes.string,
};
getLink(linkKey, keyName) {
if (window[keyName] === null) {
request({
url: "com.alibaba.nacos.service.getLink",
data: {
linkKey
},
success: res => {
if (res.code === 200) {
window[keyName] = res.data;
this.setState({
[keyName]: res.data
});
}
}
});
} else {
constructor(props) {
super(props);
this._namespace = getParams('namespace') || '';
// this._namespaceShowName = getParams('namespaceShowName') || '';
this.state = {
nownamespace: window.nownamespace || this._namespace || '',
namespaceList: window.namespaceList || [],
// namespaceShowName: window.namespaceShowName || this._namespaceShowName || '',
// _dingdingLink: "",
// _forumLink: ""
};
}
componentDidMount() {
// this.getLink("dingding", "_dingdingLink");
// this.getLink("discuz", "_forumLink");
}
getLink(linkKey, keyName) {
if (window[keyName] === null) {
request({
url: 'com.alibaba.nacos.service.getLink',
data: {
linkKey,
},
success: res => {
if (res.code === 200) {
window[keyName] = res.data;
this.setState({
[keyName]: window[keyName]
[keyName]: res.data,
});
}
}
},
});
} else {
this.setState({
[keyName]: window[keyName],
});
}
// if (!this.state.namespaceList || this.state.namespaceList.length === 0) {
// this.getNameSpaces();
// } else {
// this.calleeParent();
// }
}
// if (!this.state.namespaceList || this.state.namespaceList.length === 0) {
// this.getNameSpaces();
// } else {
// this.calleeParent();
// }
/**
/**
切换namespace
**/
changeNameSpace(ns, nsName) {
* */
changeNameSpace(ns, nsName) {
this.setnamespace(ns || '');
setParams({
namespace: ns || '',
namespaceShowName: nsName,
});
window.nownamespace = ns;
window.namespaceShowName = nsName;
this.setnamespace(ns || "");
setParams({
namespace: ns || "",
namespaceShowName: nsName
});
window.nownamespace = ns;
window.namespaceShowName = nsName;
this.calleeParent(true);
this.props.setNowNameSpace && this.props.setNowNameSpace(nsName, ns);
}
this.calleeParent(true);
this.props.setNowNameSpace && this.props.setNowNameSpace(nsName, ns);
}
calleeParent(needclean = false) {
this.props.namespaceCallBack && this.props.namespaceCallBack(needclean);
}
getNameSpaces() {
if (window.namespaceList) {
this.handleNameSpaces(window.namespaceList);
} else {
request({
type: 'get',
url: `/nacos/v1/console/namespaces`,
success: res => {
if (res.code === 200) {
this.handleNameSpaces(res.data);
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'),
content: res.message
});
}
},
error: res => {
window.namespaceList = [];
this.handleNameSpaces(window.namespaceList);
}
calleeParent(needclean = false) {
this.props.namespaceCallBack && this.props.namespaceCallBack(needclean);
}
getNameSpaces() {
if (window.namespaceList) {
this.handleNameSpaces(window.namespaceList);
} else {
request({
type: 'get',
url: '/nacos/v1/console/namespaces',
success: res => {
if (res.code === 200) {
this.handleNameSpaces(res.data);
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'),
content: res.message,
});
}
}
},
error: () => {
window.namespaceList = [];
this.handleNameSpaces(window.namespaceList);
},
});
}
handleNameSpaces(data) {
let nownamespace = getParams("namespace") || "";
}
// let namespaceShowName = this._namespaceShowName || data[0].namespaceShowName || '';
window.namespaceList = data;
window.nownamespace = nownamespace;
let namespaceShowName = "";
for (let i = 0; i < data.length; i++) {
if (data[i].namespace === nownamespace) {
namespaceShowName = data[i].namespaceShowName;
break;
}
}
window.namespaceShowName = namespaceShowName;
setParams('namespace', nownamespace || "");
// setParams('namespaceShowName', namespaceShowName);
this.props.setNowNameSpace && this.props.setNowNameSpace(namespaceShowName, nownamespace);
this.setState({
nownamespace: nownamespace,
namespaceList: data
});
this.calleeParent();
}
setnamespace(ns) {
this.setState({
nownamespace: ns
});
}
handleNameSpaces(data) {
const nownamespace = getParams('namespace') || '';
rendernamespace(namespaceList) {
let nownamespace = this.state.nownamespace; //获得当前namespace
let namespacesBtn = namespaceList.map((obj, index) => {
let style = obj.namespace === nownamespace ? { color: '#00C1DE', marginRight: 10, border: 'none', fontSize: 12 } : { color: '#666', marginRight: 10, border: 'none', fontSize: 12 };
return <div key={index} style={{ float: 'left', cursor: 'pointer' }}>{index === 0 ? '' : <span style={{ marginRight: 5, marginLeft: 5 }}>|</span>}<span type={"light"} style={style} onClick={this.changeNameSpace.bind(this, obj.namespace, obj.namespaceShowName)} key={index}>{obj.namespaceShowName}</span></div>;
});
return <div style={{ paddingTop: 9 }}>{namespacesBtn}</div>;
// let namespaceShowName = this._namespaceShowName || data[0].namespaceShowName || '';
window.namespaceList = data;
window.nownamespace = nownamespace;
let namespaceShowName = '';
for (let i = 0; i < data.length; i++) {
if (data[i].namespace === nownamespace) {
({ namespaceShowName } = data[i]);
break;
}
}
render() {
let namespaceList = this.state.namespaceList || [];
let title = this.props.title || '';
// const noticeStyle = {
// height: 45,
// lineHeight: '45px',
// backgroundColor: 'rgb(242, 242, 242)',
// border: '1px solid rgb(228, 228, 228)',
// padding: '0 20px',
// marginBottom: 5
// };
let namespacestyle = { marginTop: 5, marginBottom: '10px', paddingBottom: "10px", borderBottom: "1px solid #ccc" };
window.namespaceShowName = namespaceShowName;
setParams('namespace', nownamespace || '');
// setParams('namespaceShowName', namespaceShowName);
this.props.setNowNameSpace && this.props.setNowNameSpace(namespaceShowName, nownamespace);
this.setState({
nownamespace,
namespaceList: data,
});
this.calleeParent();
}
return <div className={namespaceList.length > 0 ? 'namespacewrapper' : ''} style={namespaceList.length > 0 ? namespacestyle : {}}>
{}
{title ? <p style={{ height: 30, lineHeight: '30px', paddingTop: 0, paddingBottom: 0, borderLeft: '2px solid #09c', float: 'left', margin: 0, paddingLeft: 10 }}>{this.props.title}</p> : ''}
<div style={{ float: 'left' }}>
{this.rendernamespace(namespaceList)}
</div>
{/**
<div style={{ color: '#00C1DE', float: 'left', height: '32px', lineHeight: '32px', paddingRight: 10 }}>
Namespace: {this.state.nownamespace}
</div>**/}
</div>;
}
setnamespace(ns) {
this.setState({
nownamespace: ns,
});
}
rendernamespace(namespaceList) {
const { nownamespace } = this.state; // 获得当前namespace
const namespacesBtn = namespaceList.map((obj, index) => {
const style =
obj.namespace === nownamespace
? { color: '#00C1DE', marginRight: 10, border: 'none', fontSize: 12 }
: { color: '#666', marginRight: 10, border: 'none', fontSize: 12 };
return (
<div key={index} style={{ float: 'left', cursor: 'pointer' }}>
{index === 0 ? '' : <span style={{ marginRight: 5, marginLeft: 5 }}>|</span>}
<span
type={'light'}
style={style}
onClick={this.changeNameSpace.bind(this, obj.namespace, obj.namespaceShowName)}
key={index}
>
{obj.namespaceShowName}
</span>
</div>
);
});
return <div style={{ paddingTop: 9 }}>{namespacesBtn}</div>;
}
render() {
const namespaceList = this.state.namespaceList || [];
const title = this.props.title || '';
const namespacestyle = {
marginTop: 5,
marginBottom: '10px',
paddingBottom: '10px',
borderBottom: '1px solid #ccc',
};
return (
<div
className={namespaceList.length > 0 ? 'namespacewrapper' : ''}
style={namespaceList.length > 0 ? namespacestyle : {}}
>
{}
{title ? (
<p
style={{
height: 30,
lineHeight: '30px',
paddingTop: 0,
paddingBottom: 0,
borderLeft: '2px solid #09c',
float: 'left',
margin: 0,
paddingLeft: 10,
}}
>
{this.props.title}
</p>
) : (
''
)}
<div style={{ float: 'left' }}>{this.rendernamespace(namespaceList)}</div>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default NameSpaceList;
export default NameSpaceList;

2
console/src/main/resources/static/src/components/NameSpaceList/index.js
View File

@ -13,4 +13,4 @@
import NameSpaceList from './NameSpaceList';
export default NameSpaceList;
export default NameSpaceList;

347
console/src/main/resources/static/src/components/NewNameSpace/NewNameSpace.js
View File

@ -15,185 +15,200 @@ import React from 'react';
import './index.less';
import { request, aliwareIntl } from '../../globalLib';
import { Button, Dialog, Field, Form, Input, Loading } from '@alifd/next';
const FormItem = Form.Item;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class NewNameSpace extends React.Component {
constructor(props) {
super(props);
this.state = {
dialogvisible: false,
loading: false,
disabled: false,
dataSource: []
};
constructor(props) {
super(props);
this.state = {
dialogvisible: false,
loading: false,
disabled: false,
dataSource: [],
};
this.field = new Field(this);
this.disabled = false;
}
this.field = new Field(this);
this.disabled = false;
}
componentDidMount() {
this.groupLabel = document.getElementById('groupwrapper');
}
openDialog(dataSource) {
this.setState({
dialogvisible: true,
disabled: false,
dataSource
});
this.disabled = false;
}
componentDidMount() {
this.groupLabel = document.getElementById('groupwrapper');
}
closeDialog() {
this.setState({
dialogvisible: false
});
openDialog(dataSource) {
this.setState({
dialogvisible: true,
disabled: false,
dataSource,
});
this.disabled = false;
}
closeDialog() {
this.setState({
dialogvisible: false,
});
}
openLoading() {
this.setState({
loading: true,
});
}
closeLoading() {
this.setState({
loading: false,
});
}
showGroup() {
this.groupLabel.style.display = 'block';
}
hideGroup() {
this.groupLabel.style.display = 'none';
}
changeType(value) {
if (value === 0) {
this.showGroup();
} else {
this.hideGroup();
}
openLoading() {
this.setState({
loading: true
});
}
closeLoading() {
this.setState({
loading: false
});
}
showGroup() {
this.groupLabel.style.display = 'block';
}
hideGroup() {
this.groupLabel.style.display = 'none';
}
changeType(value) {
if (value === 0) {
this.showGroup();
} else {
this.hideGroup();
}
handleSubmit() {
this.field.validate((errors, values) => {
if (errors) {
return;
}
const flag = this.state.dataSource.every((val) => {
if (val.namespaceShowName === values.namespaceShowName) {
return false;
}
}
handleSubmit() {
this.field.validate((errors, values) => {
if (errors) {
return;
}
let flag = this.state.dataSource.every(val => {
if (val.namespaceShowName === values.namespaceShowName) {
return false;
}
return true;
});
if (!flag) {
Dialog.alert({
content: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.norepeat'),
language: aliwareIntl.currentLanguageCode
});
return;
}
this.disabled = true;
this.setState({
disabled: true
});
request({
type: 'post',
url: `/nacos/v1/console/namespaces`,
contentType: 'application/x-www-form-urlencoded',
beforeSend: () => {
this.openLoading();
},
data: {
namespaceName: values.namespaceShowName,
namespaceDesc: values.namespaceDesc,
},
success: res => {
this.disabled = false;
this.setState({
disabled: false
});
if (res === true) {
this.closeDialog();
this.props.getNameSpaces();
this.refreshNameSpace(); //刷新全局namespace
} else {
Dialog.alert({
title: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.prompt'),
content: res.message,
language: aliwareIntl.currentLanguageCode
});
}
},
complete: () => {
this.closeLoading();
}
});
return true;
});
if (!flag) {
Dialog.alert({
content: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.norepeat'),
language: aliwareIntl.currentLanguageCode,
});
}
refreshNameSpace() {
setTimeout(() => {
request({
type: 'get',
url: `/nacos/v1/console/namespaces`,
success: res => {
if (res.code === 200) {
window.namespaceList = res.data;
}
}
return;
}
this.disabled = true;
this.setState({
disabled: true,
});
request({
type: 'post',
url: '/nacos/v1/console/namespaces',
contentType: 'application/x-www-form-urlencoded',
beforeSend: () => {
this.openLoading();
},
data: {
namespaceName: values.namespaceShowName,
namespaceDesc: values.namespaceDesc,
},
success: (res) => {
this.disabled = false;
this.setState({
disabled: false,
});
if (res === true) {
this.closeDialog();
this.props.getNameSpaces();
this.refreshNameSpace(); // 刷新全局namespace
} else {
Dialog.alert({
title: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.prompt'),
content: res.message,
language: aliwareIntl.currentLanguageCode,
});
}, 2000);
}
},
complete: () => {
this.closeLoading();
},
});
});
}
refreshNameSpace() {
setTimeout(() => {
request({
type: 'get',
url: '/nacos/v1/console/namespaces',
success: (res) => {
if (res.code === 200) {
window.namespaceList = res.data;
}
},
});
}, 2000);
}
validateChart(rule, value, callback) {
const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) {
callback(aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.input'));
} else {
callback();
}
}
validateChart(rule, value, callback) {
const chartReg = /[@#\$%\^&\*]+/g;
render() {
const formItemLayout = {
labelCol: {
fixedSpan: 6,
},
wrapperCol: {
span: 18,
},
};
if (chartReg.test(value)) {
callback(aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.input'));
} else {
callback();
}
}
render() {
const formItemLayout = {
labelCol: {
fixedSpan: 6
},
wrapperCol: {
span: 18
}
};
const footer = (<div>
<Button type="primary" onClick={this.handleSubmit.bind(this)} disabled={this.disabled}>{aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.confirm')}</Button>
<Button type="normal" onClick={this.closeDialog.bind(this)} style={{ marginLeft: 5 }}>{aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.cancel')}</Button>
</div>);
return (
<div>
<Dialog title={aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.newnamespce')} style={{ width: '50%' }} visible={this.state.dialogvisible} onOk={this.handleSubmit.bind(this)} onCancel={this.closeDialog.bind(this)} footer={footer} onClose={this.closeDialog.bind(this)} language={aliwareIntl.currentLanguageCode}><Form field={this.field}>
let footer = <div>
<Button type="primary" onClick={this.handleSubmit.bind(this)} disabled={this.disabled}>{aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.confirm')}</Button>
<Button type="normal" onClick={this.closeDialog.bind(this)} style={{ marginLeft: 5 }}>{aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.cancel')}</Button>
</div>;
return (
<div>
<Dialog title={aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.newnamespce')} style={{ width: '50%' }} visible={this.state.dialogvisible} onOk={this.handleSubmit.bind(this)} onCancel={this.closeDialog.bind(this)} footer={footer} onClose={this.closeDialog.bind(this)} language={aliwareIntl.currentLanguageCode}><Form field={this.field}>
<Loading tip={aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.loading')} style={{ width: '100%', position: 'relative' }} visible={this.state.loading}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.name')} required {...formItemLayout}>
<Input
{...this.field.init('namespaceShowName', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.namespacenotnull'),
}, { validator: this.validateChart.bind(this) }],
})}
style={{ width: '100%' }}
/>
</FormItem>
<FormItem label={aliwareIntl.get('nacos.page.configdetail.Description')} required {...formItemLayout}>
<Input
{...this.field.init('namespaceDesc', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.namespacenotnull'),
}, { validator: this.validateChart.bind(this) }],
})}
style={{ width: '100%' }}
/>
</FormItem>
</Loading>
</Form>
</Dialog>
<Loading tip={aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.loading')} style={{ width: '100%', position: 'relative' }} visible={this.state.loading}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.name')} required {...formItemLayout}>
<Input {...this.field.init('namespaceShowName', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.namespacenotnull')
}, { validator: this.validateChart.bind(this) }]
})} style={{ width: '100%' }} />
</FormItem>
<FormItem label={aliwareIntl.get('nacos.page.configdetail.Description')} required {...formItemLayout}>
<Input {...this.field.init('namespaceDesc', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.namespacenotnull')
}, { validator: this.validateChart.bind(this) }]
})} style={{ width: '100%' }} />
</FormItem>
</Loading>
</Form>
</Dialog>
</div>
);
}
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default NewNameSpace;
export default NewNameSpace;

2
console/src/main/resources/static/src/components/NewNameSpace/index.js
View File

@ -13,4 +13,4 @@
import NewNameSpace from './NewNameSpace';
export default NewNameSpace;
export default NewNameSpace;

520
console/src/main/resources/static/src/components/RegionGroup/RegionGroup.js
View File

@ -12,261 +12,309 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from '@alifd/next';
import $ from 'jquery';
import NameSpaceList from '../NameSpaceList';
import { setParams, request } from '../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class RegionGroup extends React.Component {
constructor(props) {
super(props);
this.state = {
instanceData: [],
currRegionId: '',
url: props.url || '/diamond-ops/env/domain',
left: props.left,
right: props.right,
regionWidth: 700,
hideRegionList: false
};
this.currRegionId = '';
this.styles = {
title: {
// marginTop: '8px',
// marginBottom: '8px',
margin: 0,
lineHeight: '32px',
display: 'inline-block',
textIndent: '8px',
marginRight: '8px',
borderLeft: '2px solid #88b7E0',
fontSize: '16px'
}
};
this.nameSpaceList = null;
this.mainRef = null;
this.titleRef = null;
this.regionRef = null;
this.extraRef = null;
this.resizer = null;
this.timer = null;
this.handleResize = this.handleResize.bind(this);
this.handleAliyunNav = this.handleAliyunNav.bind(this);
!window.viewframeSetting && (window.viewframeSetting = {});
}
static propTypes = {
url: PropTypes.string,
left: PropTypes.any,
right: PropTypes.any,
namespaceCallBack: PropTypes.func,
setNowNameSpace: PropTypes.func,
};
componentDidMount() {
//this.setRegionWidth();
// window.postMessage({ type: 'CONSOLE_HAS_REGION' }, window.location)
// $(".aliyun-console-regionbar").show();
// $(window).bind("resize", this.handleResize);
// window.addEventListener("message", this.handleAliyunNav);
constructor(props) {
super(props);
this.state = {
instanceData: [],
currRegionId: '',
url: props.url || '/diamond-ops/env/domain',
left: props.left,
right: props.right,
regionWidth: 700,
hideRegionList: false,
};
this.currRegionId = '';
this.styles = {
title: {
// marginTop: '8px',
// marginBottom: '8px',
margin: 0,
lineHeight: '32px',
display: 'inline-block',
textIndent: '8px',
marginRight: '8px',
borderLeft: '2px solid #88b7E0',
fontSize: '16px',
},
};
this.nameSpaceList = null;
this.mainRef = null;
this.titleRef = null;
this.regionRef = null;
this.extraRef = null;
this.resizer = null;
this.timer = null;
this.handleResize = this.handleResize.bind(this);
this.handleAliyunNav = this.handleAliyunNav.bind(this);
!window.viewframeSetting && (window.viewframeSetting = {});
}
componentDidMount() {
// this.setRegionWidth();
// window.postMessage({ type: 'CONSOLE_HAS_REGION' }, window.location)
// $(".aliyun-console-regionbar").show();
// $(window).bind("resize", this.handleResize);
// window.addEventListener("message", this.handleAliyunNav);
// this.getRegionList();
// setTimeout(() => {
// this.setRegionWidth();
// this.handleRegionListStatus();
// });
this.nameSpaceList && this.nameSpaceList.getNameSpaces();
}
componentWillUnmount() {
$(window).unbind('resize', this.handleResize);
window.postMessage({ type: 'CONSOLE_HIDE_REGION' }, window.location);
$('.aliyun-console-regionbar').hide();
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
url: nextProps.url,
left: nextProps.left,
right: nextProps.right,
});
}
handleAliyunNav(event = {}) {
const { type, payload } = (event && event.data) || {};
switch (type) {
case 'TOPBAR_SIDEBAR_DID_MOUNT':
// this.getRegionList();
// setTimeout(() => {
// this.setRegionWidth();
// this.handleRegionListStatus();
// });
this.nameSpaceList && this.nameSpaceList.getNameSpaces();
}
componentWillUnmount() {
$(window).unbind('resize', this.handleResize);
window.postMessage({ type: 'CONSOLE_HIDE_REGION' }, window.location)
$(".aliyun-console-regionbar").hide();
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
url: nextProps.url,
left: nextProps.left,
right: nextProps.right
});
}
handleAliyunNav(event) {
const type = event.data.type;
const payload = event.data.payload; // { fromRegionId: 'xxx', toRegionId: 'xxx'' }
console.log(type, payload);
switch (type) {
case "TOPBAR_SIDEBAR_DID_MOUNT":
// this.getRegionList();
this.handleRegionListStatus();
this.changeRegionBarRegionId(this.currRegionId);
setTimeout(() => {
this.changeRegionBarRegionId(this.currRegionId);
}, 1000);
break;
case "CONSOLE_REGION_CHANGE":
this.changeTableData(payload.toRegionId);
break;
default:
break;
}
}
handleRegionListStatus() {
const isPrivateClound = window.globalConfig && window.globalConfig.isParentEdas();
this.setState({
hideRegionList: isPrivateClound ? false : window.location.search.indexOf("hideTopbar=") === -1
}, () => {
this.setRegionWidth();
});
}
handleResize() {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setRegionWidth();
}, 100);
}
setRegionWidth() {
try {
let mainWidth = $(this.mainRef).width();
let titleWidth = $(this.titleRef).width();
let extraWidth = $(this.extraRef).width();
let regionWidth = mainWidth - extraWidth - titleWidth - 50;
this.setState({
regionWidth: regionWidth > 100 ? regionWidth : 100
});
} catch (error) { }
}
getRegionList() {
if (window._regionList) {
console.log('...');
this.handleRegionList(window._regionList);
} else {
// TODO
this.nameSpaceList && this.nameSpaceList.getNameSpaces();
request({
url: this.state.url,
data: {},
success: res => {
//this.loading(false);
if (res && res.data) {
window._regionList = res.data;
this.handleRegionList(res.data);
}
}
});
}
}
handleRegionList(data) {
let envcontent = '';
let envGroups = data.envGroups;
let instanceData = [];
for (let i = 0; i < envGroups.length; i++) {
let obj = envGroups[i].envs || [];
instanceData = obj;
for (let j = 0; j < obj.length; j++) {
if (obj[j].active) {
envcontent = obj[j].serverId;
}
}
}
this.currRegionId = envcontent || instanceData[0] && instanceData[0].serverId;
setParams("serverId", this.currRegionId);
this.setRegionBarRegionList(instanceData, this.currRegionId);
this.handleRegionListStatus();
this.changeRegionBarRegionId(this.currRegionId);
setTimeout(() => {
this.changeRegionBarRegionId(this.currRegionId);
this.changeRegionBarRegionId(this.currRegionId);
}, 1000);
this.nameSpaceList && this.nameSpaceList.getNameSpaces();
this.setState({
currRegionId: envcontent,
instanceData: instanceData
});
break;
case 'CONSOLE_REGION_CHANGE':
this.changeTableData(payload.toRegionId);
break;
default:
break;
}
changeTableData(serverId) {
console.log(serverId);
console.log(this.state.currRegionId);
setParams("serverId", serverId);
if (this.state.currRegionId === serverId) {
return;
}
this.currRegionId = serverId;
let instanceData = this.state.instanceData,
inEdas = false;
if (window.globalConfig.isParentEdas()) {
inEdas = true;
}
handleRegionListStatus() {
const isPrivateClound = window.globalConfig && window.globalConfig.isParentEdas();
this.setState(
{
hideRegionList: isPrivateClound
? false
: window.location.search.indexOf('hideTopbar=') === -1,
},
() => {
this.setRegionWidth();
}
);
}
handleResize() {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setRegionWidth();
}, 100);
}
setRegionWidth() {
try {
const mainWidth = $(this.mainRef).width();
const titleWidth = $(this.titleRef).width();
const extraWidth = $(this.extraRef).width();
const regionWidth = mainWidth - extraWidth - titleWidth - 50;
this.setState({
regionWidth: regionWidth > 100 ? regionWidth : 100,
});
} catch (error) {}
}
getRegionList() {
if (window._regionList) {
this.handleRegionList(window._regionList);
} else {
// TODO
this.nameSpaceList && this.nameSpaceList.getNameSpaces();
request({
url: this.state.url,
data: {},
success: res => {
if (res && res.data) {
window._regionList = res.data;
this.handleRegionList(res.data);
}
},
});
}
}
handleRegionList(data = {}) {
let envcontent = '';
const { envGroups } = data;
let instanceData = [];
for (let i = 0; i < envGroups.length; i++) {
const obj = envGroups[i].envs || [];
instanceData = obj;
for (let j = 0; j < obj.length; j++) {
if (obj[j].active) {
envcontent = obj[j].serverId;
}
}
}
instanceData.forEach(obj => {
if (obj.serverId === serverId) {
let lastHash = window.location.hash.split("?")[0];
if (inEdas) {
setParams("serverId", obj.serverId);
// setParams('regionId', obj.serverId);
let url = window.location.href;
this.currRegionId = envcontent || (instanceData[0] && instanceData[0].serverId);
setParams('serverId', this.currRegionId);
console.log("url: ", url);
window.location.href = url;
} else {
let url = obj.domain + window.location.search + lastHash;
if (lastHash.indexOf('serverId') === -1) {
if (lastHash.indexOf('?') === -1) {
url += '?serverId=' + serverId;
} else {
url += '&serverId=' + serverId;
}
}
window.location.href = window.location.protocol + '//' + url;
}
this.setRegionBarRegionList(instanceData, this.currRegionId);
this.changeRegionBarRegionId(this.currRegionId);
setTimeout(() => {
this.changeRegionBarRegionId(this.currRegionId);
}, 1000);
this.nameSpaceList && this.nameSpaceList.getNameSpaces();
this.setState({
currRegionId: envcontent,
instanceData,
});
}
return;
changeTableData(serverId) {
setParams('serverId', serverId);
if (this.state.currRegionId === serverId) {
return;
}
this.currRegionId = serverId;
const { instanceData } = this.state;
let inEdas = false;
if (window.globalConfig.isParentEdas()) {
inEdas = true;
}
instanceData.forEach(obj => {
if (obj.serverId === serverId) {
const lastHash = window.location.hash.split('?')[0];
if (inEdas) {
setParams('serverId', obj.serverId);
const url = window.location.href;
window.location.href = url;
} else {
let url = obj.domain + window.location.search + lastHash;
if (lastHash.indexOf('serverId') === -1) {
if (lastHash.indexOf('?') === -1) {
url += `?serverId=${serverId}`;
} else {
url += `&serverId=${serverId}`;
}
});
//window.location.href = '';
// return;
// setParams("serverId", serverId);
// this.setState({
// currRegionId: serverId
// });
// this.currRegionId = serverId;
// this.props.onChange && this.props.onChange({
// instanceData: this.state.instanceData,
// currRegionId: serverId
// })
}
setRegionBarRegionList(regionList, regionId) {
// regionList = [{
// serverId: "cn-hangzhou",
// }, {
// serverId: "cn-shenzhen",
// }]
// if (!window.viewframeSetting.regionList || window.viewframeSetting.regionList.length === 0) {
if (window.viewframeSetting) {
window.viewframeSetting.regionList = regionList;
window.postMessage({ type: 'TOGGLE_REGIONBAR_STATUS', payload: { regionList: regionList, defaultRegionId: regionId } }, window.location);
}
window.location.href = `${window.location.protocol}//${url}`;
}
}
changeRegionBarRegionId(regionId) {
window.viewframeSetting && (window.viewframeSetting.defaultRegionId = regionId);
window.postMessage({ type: 'SET_ACTIVE_REGION_ID', payload: { defaultRegionId: regionId } }, window.location);
}
render() {
}
});
}
return <div>
<div ref={ref => this.mainRef = ref} className="clearfix" >
<div style={{ overflow: "hidden" }}>
<div id="left" style={{ float: 'left', display: 'inline-block', marginRight: 20 }}>
<div ref={ref => this.titleRef = ref} style={{ display: 'inline-block', verticalAlign: 'top' }}>
{typeof this.state.left === 'string' ? <h5 style={this.styles.title}>{this.state.left}</h5> : this.state.left}
</div>
{this.state.hideRegionList ? null : <div ref={ref => this.regionRef = ref} style={{ width: this.state.regionWidth, display: 'inline-block', lineHeight: '40px', marginLeft: 20 }}>
{this.state.instanceData.map((val, key) => {
return <Button key={val.serverId} type={this.state.currRegionId === val.serverId ? "primary" : "normal"} style={{ fontSize: '12px', marginRight: 10, backgroundColor: this.state.currRegionId === val.serverId ? '#546478' : '#D9DEE4' }} onClick={this.changeTableData.bind(this, val.serverId)}> {val.name} </Button>;
})}
</div>}
</div>
<div ref={ref => this.extraRef = ref} style={{ float: 'right', display: 'inline-block', paddingTop: 6 }}>
{Object.prototype.toString.call(this.state.right) === '[object Function]' ? this.state.right() : this.state.right}
</div>
</div>
{this.props.namespaceCallBack ? <div><NameSpaceList ref={ref => this.nameSpaceList = ref} namespaceCallBack={this.props.namespaceCallBack} setNowNameSpace={this.props.setNowNameSpace} /></div> : null}
</div>
</div>;
setRegionBarRegionList(regionList, regionId) {
if (window.viewframeSetting) {
window.viewframeSetting.regionList = regionList;
window.postMessage(
{ type: 'TOGGLE_REGIONBAR_STATUS', payload: { regionList, defaultRegionId: regionId } },
window.location
);
}
}
changeRegionBarRegionId(regionId) {
window.viewframeSetting && (window.viewframeSetting.defaultRegionId = regionId);
window.postMessage(
{ type: 'SET_ACTIVE_REGION_ID', payload: { defaultRegionId: regionId } },
window.location
);
}
render() {
return (
<div>
<div ref={ref => (this.mainRef = ref)} className="clearfix">
<div style={{ overflow: 'hidden' }}>
<div id="left" style={{ float: 'left', display: 'inline-block', marginRight: 20 }}>
<div
ref={ref => (this.titleRef = ref)}
style={{ display: 'inline-block', verticalAlign: 'top' }}
>
{typeof this.state.left === 'string' ? (
<h5 style={this.styles.title}>{this.state.left}</h5>
) : (
this.state.left
)}
</div>
{this.state.hideRegionList ? null : (
<div
ref={ref => (this.regionRef = ref)}
style={{
width: this.state.regionWidth,
display: 'inline-block',
lineHeight: '40px',
marginLeft: 20,
}}
>
{this.state.instanceData.map((val, key) => (
<Button
key={val.serverId}
type={this.state.currRegionId === val.serverId ? 'primary' : 'normal'}
style={{
fontSize: '12px',
marginRight: 10,
backgroundColor:
this.state.currRegionId === val.serverId ? '#546478' : '#D9DEE4',
}}
onClick={this.changeTableData.bind(this, val.serverId)}
>
{' '}
{val.name}{' '}
</Button>
))}
</div>
)}
</div>
<div
ref={ref => (this.extraRef = ref)}
style={{ float: 'right', display: 'inline-block', paddingTop: 6 }}
>
{Object.prototype.toString.call(this.state.right) === '[object Function]'
? this.state.right()
: this.state.right}
</div>
</div>
{this.props.namespaceCallBack ? (
<div>
<NameSpaceList
ref={ref => (this.nameSpaceList = ref)}
namespaceCallBack={this.props.namespaceCallBack}
setNowNameSpace={this.props.setNowNameSpace}
/>
</div>
) : null}
</div>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default RegionGroup;
export default RegionGroup;

2
console/src/main/resources/static/src/components/RegionGroup/index.js
View File

@ -13,4 +13,4 @@
import RegionGroup from './RegionGroup';
export default RegionGroup;
export default RegionGroup;

286
console/src/main/resources/static/src/components/ShowCodeing/ShowCodeing.js
View File

@ -15,23 +15,24 @@ import React from 'react';
import './index.less';
import { getParams, aliwareIntl } from '../../globalLib';
import { Dialog, Loading, Tab } from '@alifd/next';
const TabPane = Tab.Item;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ShowCodeing extends React.Component {
constructor(props) {
super(props);
this.state = {
dialogvisible: false,
loading: false
};
this.defaultCode = ``;
this.nodejsCode = `TODO`;
this.cppCode = `TODO`;
this.shellCode = `TODO`;
this.pythonCode = `TODO`;
this.record = {};
this.sprigboot_code = `// Refer to document: https://github.com/nacos-group/nacos-examples/tree/master/nacos-spring-boot-example/nacos-spring-boot-config-example
constructor(props) {
super(props);
this.state = {
dialogvisible: false,
loading: false,
};
this.defaultCode = '';
this.nodejsCode = 'TODO';
this.cppCode = 'TODO';
this.shellCode = 'TODO';
this.pythonCode = 'TODO';
this.record = {};
this.sprigboot_code = `// Refer to document: https://github.com/nacos-group/nacos-examples/tree/master/nacos-spring-boot-example/nacos-spring-boot-config-example
package com.alibaba.nacos.example.spring.boot.controller;
import org.springframework.beans.factory.annotation.Value;
@ -58,7 +59,7 @@ public class ConfigController {
return useLocalCache;
}
}`;
this.sprigcloud_code = `// Refer to document: https://github.com/nacos-group/nacos-examples/tree/master/nacos-spring-cloud-example/nacos-spring-cloud-config-example
this.sprigcloud_code = `// Refer to document: https://github.com/nacos-group/nacos-examples/tree/master/nacos-spring-cloud-example/nacos-spring-cloud-config-example
package com.alibaba.nacos.example.spring.cloud.controller;
import org.springframework.beans.factory.annotation.Value;
@ -79,39 +80,41 @@ public class ConfigController {
return useLocalCache;
}
}`;
}
}
componentDidMount() { }
openLoading() {
this.setState({
loading: true
});
}
closeLoading() {
this.setState({
loading: false
});
}
componentDidMount() { }
getData() {
let namespace = getParams('namespace'); //获取ak,sk
let obj = {
group: this.record.group || '',
dataId: this.record.dataId || '',
namespace: namespace,
inEdas: window.globalConfig.isParentEdas()
};
this.defaultCode = this.getJavaCode(obj);
this.createCodeMirror('text/x-java', this.defaultCode);
this.nodejsCode = this.getNodejsCode(obj);
this.cppCode = this.getCppCode(obj);
this.shellCode = this.getShellCode(obj);
this.pythonCode = this.getPythonCode(obj);
this.forceUpdate();
}
openLoading() {
this.setState({
loading: true,
});
}
getJavaCode(data) {
return `/*
closeLoading() {
this.setState({
loading: false,
});
}
getData() {
const namespace = getParams('namespace'); // 获取ak,sk
const obj = {
group: this.record.group || '',
dataId: this.record.dataId || '',
namespace,
inEdas: window.globalConfig.isParentEdas(),
};
this.defaultCode = this.getJavaCode(obj);
this.createCodeMirror('text/x-java', this.defaultCode);
this.nodejsCode = this.getNodejsCode(obj);
this.cppCode = this.getCppCode(obj);
this.shellCode = this.getShellCode(obj);
this.pythonCode = this.getPythonCode(obj);
this.forceUpdate();
}
getJavaCode(data) {
return `/*
* Demo for Nacos
* pom.xml
<dependency>
@ -176,115 +179,108 @@ public class ConfigExample {
}
}
`;
}
getNodejsCode(data) {
return 'TODO';
}
getCppCode(data) {
return 'TODO';
}
getShellCode(data) {
return 'TODO';
}
getPythonCode(data) {
return 'TODO';
}
openDialog(record) {
this.setState({
dialogvisible: true,
});
this.record = record;
setTimeout(() => {
this.getData(); // 获取数据
});
}
closeDialog() {
this.setState({
dialogvisible: false,
});
}
createCodeMirror(mode, value) {
const commontarget = this.refs.codepreview;
if (commontarget) {
commontarget.innerHTML = '';
this.cm = window.CodeMirror(commontarget, {
value,
mode,
height: 400,
width: 500,
lineNumbers: true,
theme: 'xq-light',
lint: true,
tabMode: 'indent',
autoMatchParens: true,
textWrapping: true,
gutters: ['CodeMirror-lint-markers'],
extraKeys: {
F1(cm) {
cm.setOption('fullScreen', !cm.getOption('fullScreen'));
},
Esc(cm) {
if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false);
},
},
});
}
getNodejsCode(data) {
return `TODO`;
}
// this.cm.setSize(window.innerWidth*0.8-10,400);//设置宽高
}
getCppCode(data) {
return `TODO`;
}
changeTab(key, code) {
setTimeout(() => {
this[key] = true;
getShellCode(data) {
return `TODO`;
}
this.createCodeMirror('text/javascript', code);
});
}
getPythonCode(data) {
return `TODO`;
}
render() {
const footer = <div />;
return (
<div>
<Dialog title={aliwareIntl.get('com.alibaba.nacos.component.ShowCodeing.Sample_code')} style={{ width: '80%' }} visible={this.state.dialogvisible} footer={footer} onClose={this.closeDialog.bind(this)} language={aliwareIntl.currentLanguageCode}>
<div style={{ height: 500 }}>
<Loading tip={aliwareIntl.get('com.alibaba.nacos.component.ShowCodeing.loading')} style={{ width: '100%' }} visible={this.state.loading}>
<Tab shape={'text'} style={{ height: 40, paddingBottom: 10 }}>
<TabPane title={'Java'} key={1} onClick={this.changeTab.bind(this, 'commoneditor1', this.defaultCode)} />
<TabPane title={'Spring Boot'} key={2} onClick={this.changeTab.bind(this, 'commoneditor2', this.sprigboot_code)} />
openDialog(record) {
this.setState({
dialogvisible: true
});
this.record = record;
setTimeout(() => {
<TabPane title={'Spring Cloud'} key={21} onClick={this.changeTab.bind(this, 'commoneditor21', this.sprigcloud_code)} />
this.getData(); //获取数据
});
}
<TabPane title={'Node.js'} key={3} onClick={this.changeTab.bind(this, 'commoneditor3', this.nodejsCode)} />
closeDialog() {
this.setState({
dialogvisible: false
});
}
<TabPane title={'C++'} key={4} onClick={this.changeTab.bind(this, 'commoneditor4', this.cppCode)} />
createCodeMirror(mode, value) {
let commontarget = this.refs['codepreview'];
if (commontarget) {
commontarget.innerHTML = '';
this.cm = window.CodeMirror(commontarget, {
value: value,
mode: mode,
height: 400,
width: 500,
lineNumbers: true,
theme: 'xq-light',
lint: true,
tabMode: "indent",
autoMatchParens: true,
textWrapping: true,
gutters: ["CodeMirror-lint-markers"],
extraKeys: {
"F1": function (cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function (cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
}
<TabPane title={'Shell'} key={5} onClick={this.changeTab.bind(this, 'commoneditor5', this.shellCode)} />
//this.cm.setSize(window.innerWidth*0.8-10,400);//设置宽高
}
changeTab(key, code) {
setTimeout(() => {
this[key] = true;
<TabPane title={'Python'} key={6} onClick={this.changeTab.bind(this, 'commoneditor6', this.pythonCode)} />
{}
</Tab>
<div ref={'codepreview'} />
</Loading>
</div>
</Dialog>
this.createCodeMirror('text/javascript', code);
});
}
render() {
const footer = <div></div>;
return (
<div>
<Dialog title={aliwareIntl.get('com.alibaba.nacos.component.ShowCodeing.Sample_code')} style={{ width: '80%' }} visible={this.state.dialogvisible} footer={footer} onClose={this.closeDialog.bind(this)} language={aliwareIntl.currentLanguageCode}>
<div style={{ height: 500 }}>
<Loading tip={aliwareIntl.get('com.alibaba.nacos.component.ShowCodeing.loading')} style={{ width: '100%' }} visible={this.state.loading}>
<Tab shape={'text'} style={{ height: 40, paddingBottom: 10 }}>
<TabPane title={'Java'} key={1} onClick={this.changeTab.bind(this, 'commoneditor1', this.defaultCode)}>
</TabPane>
<TabPane title={'Spring Boot'} key={2} onClick={this.changeTab.bind(this, 'commoneditor2', this.sprigboot_code)}>
</TabPane>
<TabPane title={'Spring Cloud'} key={21} onClick={this.changeTab.bind(this, 'commoneditor21', this.sprigcloud_code)}>
</TabPane>
<TabPane title={'Node.js'} key={3} onClick={this.changeTab.bind(this, 'commoneditor3', this.nodejsCode)}>
</TabPane>
<TabPane title={'C++'} key={4} onClick={this.changeTab.bind(this, 'commoneditor4', this.cppCode)}>
</TabPane>
<TabPane title={'Shell'} key={5} onClick={this.changeTab.bind(this, 'commoneditor5', this.shellCode)}>
</TabPane>
<TabPane title={'Python'} key={6} onClick={this.changeTab.bind(this, 'commoneditor6', this.pythonCode)}>
</TabPane>
{}
</Tab>
<div ref={'codepreview'}></div>
</Loading>
</div>
</Dialog>
</div>
);
}
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ShowCodeing;
export default ShowCodeing;

2
console/src/main/resources/static/src/components/ShowCodeing/index.js
View File

@ -13,4 +13,4 @@
import ShowCodeing from './ShowCodeing';
export default ShowCodeing;
export default ShowCodeing;

164
console/src/main/resources/static/src/components/SuccessDialog/SuccessDialog.js
View File

@ -12,83 +12,111 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { aliwareIntl } from '../../globalLib';
import './index.less';
import { Button, Dialog, Grid, Icon } from '@alifd/next';
const { Row, Col } = Grid;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class SuccessDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
title: aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.Configuration_management'),
maintitle: '',
content: '',
isok: true,
dataId: '',
group: ''
static propTypes = {
unpushtrace: PropTypes.bool,
};
};
}
constructor(props) {
super(props);
this.state = {
visible: false,
title: aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.Configuration_management'),
maintitle: '',
content: '',
isok: true,
dataId: '',
group: '',
};
}
componentDidMount() { }
openDialog(payload) {
if (this.props.unpushtrace) {
payload.title = '';
}
this.setState({
visible: true,
maintitle: payload.maintitle,
title: payload.title,
content: payload.content,
isok: payload.isok,
dataId: payload.dataId,
group: payload.group,
message: payload.message
});
componentDidMount() {}
openDialog(_payload) {
let payload = _payload;
if (this.props.unpushtrace) {
payload.title = '';
}
closeDialog() {
this.setState({
visible: false
});
}
render() {
const footer = <div style={{ textAlign: 'right' }}><Button type="primary" onClick={this.closeDialog.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.determine')}</Button></div>;
return <div>
<Dialog visible={this.state.visible} footer={footer} style={{ width: 555 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={this.state.maintitle || this.state.title} language={aliwareIntl.currentLanguageCode}>
this.setState({
visible: true,
maintitle: payload.maintitle,
title: payload.title,
content: payload.content,
isok: payload.isok,
dataId: payload.dataId,
group: payload.group,
message: payload.message,
});
}
closeDialog() {
this.setState({
visible: false,
});
}
render() {
const footer = (
<div style={{ textAlign: 'right' }}>
<Button type="primary" onClick={this.closeDialog.bind(this)}>
{aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.determine')}
</Button>
</div>
);
return (
<div>
<Dialog
visible={this.state.visible}
footer={footer}
style={{ width: 555 }}
onCancel={this.closeDialog.bind(this)}
onClose={this.closeDialog.bind(this)}
title={this.state.maintitle || this.state.title}
language={aliwareIntl.currentLanguageCode}
>
<div>
<Row>
<Col span={'4'} style={{ paddingTop: 16 }}>
{this.state.isok ? (
<Icon type="success-filling" style={{ color: 'green' }} size={'xl'} />
) : (
<Icon type="delete-filling" style={{ color: 'red' }} size={'xl'} />
)}
</Col>
<Col span={'20'}>
<div>
<Row>
<Col span={'4'} style={{ paddingTop: 16 }}>
{this.state.isok ? <Icon type="success-filling" style={{ color: 'green' }} size={'xl'} /> : <Icon type="delete-filling" style={{ color: 'red' }} size={'xl'} />}
</Col>
<Col span={'20'}>
<div>
{this.state.isok ? <h3>{this.state.title}</h3> : <h3>{this.state.title} {aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.failure')}</h3>}
<p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}>
{this.state.dataId}
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Group:</span>
<span style={{ color: '#c7254e' }}>
{this.state.group}
</span>
</p>
{this.state.isok ? '' : <p style={{ color: 'red' }}>{this.state.message}</p>}
</div>
</Col>
</Row>
{this.state.isok ? (
<h3>{this.state.title}</h3>
) : (
<h3>
{this.state.title}{' '}
{aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.failure')}
</h3>
)}
<p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}>{this.state.dataId}</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Group:</span>
<span style={{ color: '#c7254e' }}>{this.state.group}</span>
</p>
{this.state.isok ? '' : <p style={{ color: 'red' }}>{this.state.message}</p>}
</div>
</Dialog>
</div>;
}
</Col>
</Row>
</div>
</Dialog>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default SuccessDialog;
export default SuccessDialog;

2
console/src/main/resources/static/src/components/SuccessDialog/index.js
View File

@ -13,4 +13,4 @@
import SuccessDialog from './SuccessDialog';
export default SuccessDialog;
export default SuccessDialog;

242
console/src/main/resources/static/src/config.js
View File

@ -12,129 +12,129 @@
*/
module.exports = {
server: '',
PAGESIZE: 15,
TIMERDEFAULT: '5s',
TIMEDURINT: 2000,
is_preview: process.env.NODE_ENV === 'development',
projectName: 'nacos',
defaultLanguage: 'zh-cn',
'en-us': {
pageMenu: [
{
key: 'home', // 用作顶部菜单的选中
text: 'HOME',
link: 'https://nacos.io/en-us/index.html',
},
{
key: 'docs',
text: 'DOCS',
link: 'https://nacos.io/en-us/docs/quick-start.html',
},
{
key: 'blog',
text: 'BLOG',
link: 'https://nacos.io/en-us/blog',
},
{
key: 'community',
text: 'COMMUNITY',
link: 'https://nacos.io/en-us/community',
},
// {
// text: 'ALI-SUPPORT',
// href: 'https://developer.aliyun.com/opensource/project/nacos',
// },
],
disclaimer: {
title: 'Vision',
content: 'By providing an easy-to-use service infrastructure such as dynamic service discovery, service configuration, service sharing and management and etc., Nacos help users better construct, deliver and manage their own service platform, reuse and composite business service faster and deliver value of business innovation more quickly so as to win market for users in the era of cloud native and in all cloud environments, such as private, mixed, or public clouds.',
},
documentation: {
title: 'Documentation',
list: [
{
text: 'Overview',
link: '/en-us/docs/what-is-nacos.html',
},
{
text: 'Quick start',
link: '/en-us/docs/quick-start.html',
},
{
text: 'Developer guide',
link: '/en-us/docs/contributing.html',
},
],
},
resources: {
title: 'Resources',
list: [
{
text: 'Community',
link: '/en-us/community/index.html',
},
],
},
copyright: '@ 2018 The Nacos Authors | An Alibaba Middleware (Aliware) Project',
server: '',
PAGESIZE: 15,
TIMERDEFAULT: '5s',
TIMEDURINT: 2000,
is_preview: process.env.NODE_ENV === 'development',
projectName: 'nacos',
defaultLanguage: 'zh-cn',
'en-us': {
pageMenu: [
{
key: 'home', // 用作顶部菜单的选中
text: 'HOME',
link: 'https://nacos.io/en-us/index.html',
},
{
key: 'docs',
text: 'DOCS',
link: 'https://nacos.io/en-us/docs/quick-start.html',
},
{
key: 'blog',
text: 'BLOG',
link: 'https://nacos.io/en-us/blog',
},
{
key: 'community',
text: 'COMMUNITY',
link: 'https://nacos.io/en-us/community',
},
// {
// text: 'ALI-SUPPORT',
// href: 'https://developer.aliyun.com/opensource/project/nacos',
// },
],
disclaimer: {
title: 'Vision',
content: 'By providing an easy-to-use service infrastructure such as dynamic service discovery, service configuration, service sharing and management and etc., Nacos help users better construct, deliver and manage their own service platform, reuse and composite business service faster and deliver value of business innovation more quickly so as to win market for users in the era of cloud native and in all cloud environments, such as private, mixed, or public clouds.',
},
'zh-cn': {
pageMenu: [
{
key: 'home',
text: '首页',
link: 'https://nacos.io/zh-cn/',
},
{
key: 'docs',
text: '文档',
link: 'https://nacos.io/zh-cn/docs/what-is-nacos.html',
},
{
key: 'blog',
text: '博客',
link: 'https://nacos.io/zh-cn/blog/index.html',
},
{
key: 'community',
text: '社区',
link: 'https://nacos.io/zh-cn/community/index.html',
},
// {
// text: '阿里开发者中心',
// href: 'https://developer.aliyun.com/opensource/project/nacos',
// },
],
disclaimer: {
title: '愿景',
content: 'Nacos 通过提供简单易用的动态服务发现、服务配置、服务共享与管理等服务基础设施，帮助用户在云原生时代，在私有云、混合云或者公有云等所有云环境中，更好的构建、交付、管理自己的微服务平台，更快的复用和组合业务服务，更快的交付商业创新的价值，从而为用户赢得市场。',
documentation: {
title: 'Documentation',
list: [
{
text: 'Overview',
link: '/en-us/docs/what-is-nacos.html',
},
documentation: {
title: '文档',
list: [
{
text: '概览',
link: '/zh-cn/docs/what-is-nacos.html',
},
{
text: '快速开始',
link: '/zh-cn/docs/quick-start.html',
},
{
text: '开发者指南',
link: '/zh-cn/docs/contributing.html',
},
],
{
text: 'Quick start',
link: '/en-us/docs/quick-start.html',
},
resources: {
title: '资源',
list: [
{
text: '社区',
link: '/zh-cn/community/index.html',
},
],
{
text: 'Developer guide',
link: '/en-us/docs/contributing.html',
},
copyright: '@ 2018 The Nacos Authors | An Alibaba Middleware (Aliware) Project',
],
},
}
resources: {
title: 'Resources',
list: [
{
text: 'Community',
link: '/en-us/community/index.html',
},
],
},
copyright: '@ 2018 The Nacos Authors | An Alibaba Middleware (Aliware) Project',
},
'zh-cn': {
pageMenu: [
{
key: 'home',
text: '首页',
link: 'https://nacos.io/zh-cn/',
},
{
key: 'docs',
text: '文档',
link: 'https://nacos.io/zh-cn/docs/what-is-nacos.html',
},
{
key: 'blog',
text: '博客',
link: 'https://nacos.io/zh-cn/blog/index.html',
},
{
key: 'community',
text: '社区',
link: 'https://nacos.io/zh-cn/community/index.html',
},
// {
// text: '阿里开发者中心',
// href: 'https://developer.aliyun.com/opensource/project/nacos',
// },
],
disclaimer: {
title: '愿景',
content: 'Nacos 通过提供简单易用的动态服务发现、服务配置、服务共享与管理等服务基础设施，帮助用户在云原生时代，在私有云、混合云或者公有云等所有云环境中，更好的构建、交付、管理自己的微服务平台，更快的复用和组合业务服务，更快的交付商业创新的价值，从而为用户赢得市场。',
},
documentation: {
title: '文档',
list: [
{
text: '概览',
link: '/zh-cn/docs/what-is-nacos.html',
},
{
text: '快速开始',
link: '/zh-cn/docs/quick-start.html',
},
{
text: '开发者指南',
link: '/zh-cn/docs/contributing.html',
},
],
},
resources: {
title: '资源',
list: [
{
text: '社区',
link: '/zh-cn/community/index.html',
},
],
},
copyright: '@ 2018 The Nacos Authors | An Alibaba Middleware (Aliware) Project',
},
};

101
console/src/main/resources/static/src/containers/App.js
View File

@ -23,66 +23,69 @@ import _menu from '../menu';
import { nacosEvent } from '../globalLib';
class App extends Component {
constructor(props) {
super(props);
this.state = {
shownotice: 'none',
noticecontent: '',
nacosLoading: {},
};
}
constructor(props) {
super(props);
this.state = {
shownotice: 'none',
noticecontent: '',
nacosLoading: {}
}
}
componentDidMount() {
//监听loading事件
nacosEvent.listenAllTask("nacosLoadingEvent", (nacosLoading) => {
this.setState({
nacosLoading
})
});
}
UNSAFE_componentWillUpdate(nextProps, nextState) {
const { errcode, errinfo } = nextProps;
if (errcode === 1) {
this.openErr(errinfo);
}
}
componentDidMount() {
// 监听loading事件
nacosEvent.listenAllTask('nacosLoadingEvent', (nacosLoading) => {
this.setState({
nacosLoading,
});
});
}
componentWillUnmount() {
nacosEvent.remove("nacosLoadingEvent");
UNSAFE_componentWillUpdate(nextProps, nextState) {
const { errcode, errinfo } = nextProps;
if (errcode === 1) {
this.openErr(errinfo);
}
}
openErr(message) {
const self = this;
setTimeout(function () {
self.props.dispatch({ type: 'error/clear' })
}, 3000);
}
getChildContext() {
return { history: this.props.history };
}
render() {
const { errcode, errinfo } = this.props;
return (
<Loading className="nacos-loading" shape="flower" tip="loading..." visible={false} fullScreen {...this.state.nacosLoading}>
<MainLayout {...this.props} navList={_menu.data}>
{errcode === 1 ? <Message title={errinfo} closable style={{ position: 'absolute', zIndex: 99999, width: 800, left: '50%', marginLeft: -400 }} /> : null}
{this.props.children}
</MainLayout>
</Loading>)
}
componentWillUnmount() {
nacosEvent.remove('nacosLoadingEvent');
}
openErr(message) {
const self = this;
setTimeout(() => {
self.props.dispatch({ type: 'error/clear' });
}, 3000);
}
getChildContext() {
return { history: this.props.history };
}
render() {
const { errcode, errinfo } = this.props;
return (
<Loading className="nacos-loading" shape="flower" tip="loading..." visible={false} fullScreen {...this.state.nacosLoading}>
<MainLayout {...this.props} navList={_menu.data}>
{errcode === 1 ? <Message title={errinfo} closable style={{ position: 'absolute', zIndex: 99999, width: 800, left: '50%', marginLeft: -400 }} /> : null}
{this.props.children}
</MainLayout>
</Loading>);
}
}
App.propTypes = {
};
App.childContextTypes = {
history: PropTypes.object
history: PropTypes.object,
};
function mapStateToProps(state) {
const { errinfo, errcode } = state.error;
return {
errinfo,
errcode
};
const { errinfo, errcode } = state.error;
return {
errinfo,
errcode,
};
}
export default connect(mapStateToProps)(App);

1082
console/src/main/resources/static/src/globalLib.js
View File

File diff suppressed because it is too large Load Diff

2074
console/src/main/resources/static/src/i18ndoc.js
View File

File diff suppressed because it is too large Load Diff

67
console/src/main/resources/static/src/layouts/Header.js
View File

@ -12,13 +12,12 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import siteConfig from '../config';
import { getLink } from '../utils/nacosutil';
import './index.css';
const languageSwitch = [
{
text: '中',
@ -29,7 +28,7 @@ const languageSwitch = [
value: 'zh-cn',
},
];
const noop = () => { };
const noop = () => {};
const defaultProps = {
type: 'primary',
@ -37,8 +36,15 @@ const defaultProps = {
onLanguageChange: noop,
};
class Header extends React.Component {
static propTypes = {
language: PropTypes.string,
type: PropTypes.string,
logo: PropTypes.string,
currentKey: PropTypes.string,
onLanguageChange: PropTypes.func,
};
constructor(props) {
super(props);
this.state = {
@ -79,43 +85,34 @@ class Header extends React.Component {
const { menuBodyVisible, language } = this.state;
return (
<header
className={
classnames({
'header-container': true,
[`header-container-${type}`]: true,
})
}
className={classnames({
'header-container': true,
[`header-container-${type}`]: true,
})}
>
<div className="header-body">
<a href={'https://nacos.io/zh-cn/'} target="_blank" rel="noopener noreferrer">
<img className="logo" alt={siteConfig.name} title={siteConfig.name} src={logo} />
</a>
{
onLanguageChange !== noop ?
(<span
className={
classnames({
'language-switch': true,
[`language-switch-${type}`]: true,
})
}
onClick={this.switchLang}
>
{languageSwitch.find(lang => lang.value === language).text}
</span>)
:
null
}
{onLanguageChange !== noop ? (
<span
className={classnames({
'language-switch': true,
[`language-switch-${type}`]: true,
})}
onClick={this.switchLang}
>
{languageSwitch.find(lang => lang.value === language).text}
</span>
) : null}
<div
className={
classnames({
'header-menu': true,
'header-menu-open': menuBodyVisible,
})
}
className={classnames({
'header-menu': true,
'header-menu-open': menuBodyVisible,
})}
>
<ul>
{siteConfig[language].pageMenu.map((item) => (
{siteConfig[language].pageMenu.map(item => (
<li
key={item.link}
className={classnames({
@ -124,7 +121,9 @@ class Header extends React.Component {
[`menu-item-${type}-active`]: currentKey === item.key,
})}
>
<a href={getLink(item.link)} target="_blank" rel="noopener noreferrer">{item.text}</a>
<a href={getLink(item.link)} target="_blank" rel="noopener noreferrer">
{item.text}
</a>
</li>
))}
</ul>

864
console/src/main/resources/static/src/layouts/MainLayout.js
View File

@ -12,6 +12,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '@alifd/next';
import siteConfig from '../config';
import Header from './Header';
@ -19,432 +20,449 @@ import $ from 'jquery';
import { aliwareGetCookieByKeyName, setParams, aliwareIntl } from '../globalLib';
export default class MainLayout extends React.Component {
constructor(props) {
super(props);
this.initNav = this.props.navList;
this.deepNav = [];
this.oneLevelNavArr = {}; //平行导航map
this.state = {
leftBarClose: false,
showLink: null,
navRow: [],
noChild: false
};
}
static propTypes = {
navList: PropTypes.array,
history: PropTypes.object,
children: PropTypes.any,
};
goBack() {
this.props.history.goBack();
}
nacosToggleNav(id, event) {
event.preventDefault();
let nowNav = document.getElementById(id);
let iconClass = nowNav.querySelector('.iconshow');
let subNav = nowNav.querySelector('.subnavlist');
let classList = iconClass.classList;
let tmpClassName = 'iconshow ';
for (let i = 0; i < classList.length; i++) {
if (classList[i] === 'icon-arrow-down') {
subNav.style.display = 'none';
subNav.className += ' hidden';
tmpClassName += 'icon-arrow-right';
}
if (classList[i] === 'icon-arrow-right') {
tmpClassName += 'icon-arrow-down';
subNav.className = subNav.className.replace(/hidden/g, '');
subNav.style.display = 'block';
}
}
iconClass.className = tmpClassName;
}
nacosGoBack(url) {
let params = window.location.hash.split('?')[1];
let urlArr = params.split('&') || [];
let queryParams = [];
for (let i = 0; i < urlArr.length; i++) {
if (
urlArr[i].split('=')[0] !== '_k' &&
urlArr[i].split('=')[0] !== 'dataId' &&
urlArr[i].split('=')[0] !== 'group'
) {
if (urlArr[i].split('=')[0] === 'searchDataId') {
queryParams.push(`dataId=${urlArr[i].split('=')[1]}`);
} else if (urlArr[i].split('=')[0] === 'searchGroup') {
queryParams.push(`group=${urlArr[i].split('=')[1]}`);
} else {
queryParams.push(urlArr[i]);
}
}
}
this.props.history.push(`/${url}?${queryParams.join('&')}`);
}
nacosEnterBack() {
document.getElementById('backarrow').style.color = '#09c';
}
nacosOutBack() {
document.getElementById('backarrow').style.color = '#546478';
}
nacosToggleLeftBar() {
if (!this.nacosOutDom) return
if (!this.state.leftBarClose) {
//关闭
this.nacosOutDom.className = 'viewFramework-product';
this.nacosLeftBarDom.style.width = 0;
this.nacosBodyDom.style.left = 0;
this.nacosToggleIconDom.style.left = 0;
} else {
this.nacosOutDom.className = 'viewFramework-product viewFramework-product-col-1';
this.nacosLeftBarDom.style.width = '180px';
this.nacosBodyDom.style.left = '180px';
this.nacosToggleIconDom.style.left = '160px';
}
this.setState({
leftBarClose: !this.state.leftBarClose
});
}
navTo(url) {
if (url !== '/configdetail' && url !== '/configeditor') {
//二级菜单不清空
setParams({
dataId: '',
group: ''
});
}
let params = window.location.hash.split('?')[1];
let urlArr = params.split('&') || [];
let queryParams = [];
for (let i = 0; i < urlArr.length; i++) {
if (urlArr[i].split('=')[0] !== '_k') {
queryParams.push(urlArr[i]);
}
}
this.props.history.push(`${url}?${queryParams.join('&')}`);
}
nacosSetSpecialNav(item) {
item.children.forEach((_item) => {
let obj = _item;
if (obj.dontUseChild === true) {
obj.parentName = item.title;
obj.parentId = item.id;
obj.parentPath = '/' + item.id;
this.deepNav.push(obj);
}
if (_item.children) {
this.nacosSetSpecialNav(_item);
}
});
}
nacosNavAct(serviceName, match, location) {
if (!match) {
let formatpath = location.pathname.substr(1); //得到当前路径
let nowpathobj = this.oneLevelNavArr[formatpath]; //根据平行导航匹配父类
if (nowpathobj) {
if (nowpathobj.parent === serviceName) {
//如果父类等于当前的导航则高亮
return true;
}
}
return false;
}
return true;
}
nacosLoopNavDeeply(data, parentServiceName) {
//深度遍历获取所有的导航数据
data.forEach((item) => {
if (item) {
let navObj = item,
_parentServiceName = item.serviceName;
navObj.parentServiceName = parentServiceName;
this.oneLevelNavArr[item.serviceName] = navObj; //得到每一个层级的导航映射
if (item.children && item.children.length > 0) {
this.nacosLoopNavDeeply(item.children, _parentServiceName);
}
}
});
}
activeNav(id) {
if (this.preActNav) {
this.preActNav.removeClass('active');
}
let nowNav = $(`#${id}`);
nowNav.addClass('active');
this.preActNav = nowNav;
}
nacosLoopNav(data, index = 0, parent) {
//遍历导航，只显示2级
let self = this;
return data.map((item) => {
if (!item) {
return '';
}
index++;
if (item.dontUseChild === true) {
return '';
}
if (item.children && item.children.length > 0) {
if (item.isVirtual) {
//如果是虚拟菜单需要增加展开箭头
let icon = item.isExtend ? (
<span className="icon-arrow-down iconshow" />
) : (
<span className="icon-arrow-right iconshow" />
);
let hiddenClass = item.isExtend ? '' : 'hidden';
return (
<li
key={`${item.serviceName}`}
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
id={`${item.serviceName}`}
>
<div>
<a href="" onClick={this.nacosToggleNav.bind(this, item.serviceName)}>
<div className="nav-icon">{icon}</div>
<div className="nav-title">{aliwareIntl.get(item.id) || item.name}</div>
</a>
</div>
<ul className={`subnavlist ${hiddenClass}`}>{self.nacosLoopNav(item.children, index)}</ul>
</li>
);
} else {
return (
<li
key={`${item.serviceName}`}
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
>
<a
href={`javascript:;`}
id={`${item.serviceName}`}
onClick={this.activeNav.bind(this, `nav${index}`)}
>
<div className="nav-icon" />
<div className="nav-title">{aliwareIntl.get(item.id) || item.name}</div>
</a>
</li>
);
}
}
return (
<li
key={`${item.serviceName}`}
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
>
<a
href={`javascript:;`}
id={`${item.serviceName}`}
onClick={this.activeNav.bind(this, `nav${index}`)}
>
<div className="nav-icon" />
<div className="nav-title">{aliwareIntl.get(item.id) || item.name}</div>
</a>
</li>
);
});
}
nacosGetNav(navList) {
let navRow = ''; //导航
if (navList.length > 0) {
navRow = <ul>{this.nacosLoopNav(navList)}</ul>;
this.nacosLoopNavDeeply(navList); //深度遍历导航树获得平行map
}
return navRow;
}
UNSAFE_componentWillMount() {
let nav = this.props.navList || [];
let navRow = this.nacosGetNav(nav);
this.setState({
navRow: navRow
});
}
componentDidMount() {
this.nacosLeftBarDom = document.getElementById('viewFramework-product-navbar');
this.nacosBodyDom = document.getElementById('viewFramework-product-body');
this.nacosToggleIconDom = document.getElementById('viewFramework-product-navbar-collapse');
this.nacosOutDom = document.getElementById('page-header-mask');
// let parentNav = this.initNav[0] || [];
let defaultNav = '/configurationManagement';
// let childrenNav = parentNav.children || [];
this.props.history.listen((location) => {
if (this.preSimplePath && this.preSimplePath !== '/') {
if (location.pathname.indexOf(this.preSimplePath) !== -1) {
return;
}
}
let simplePath = window.location.hash.split('?')[0];
let navName = simplePath.substr('2');
this.preSimplePath = simplePath;
if (navName === '') {
this.props.history.push(defaultNav);
setTimeout(() => {
this.activeNav('configurationManagement');
});
return;
}
let nowNavObj = this.oneLevelNavArr[navName];
if (!nowNavObj) {
this.setState({
noChild: true
});
return;
}
this.setState({
noChild: !!nowNavObj.dontUseChild
});
let parentServiceName = nowNavObj.parentServiceName,
parentNav = this.oneLevelNavArr[parentServiceName];
if (simplePath !== '/' && nowNavObj && parentNav && !parentNav.isVirtual) {
this.setState({
showLink: (
<div>
<Icon
type="arrow-left"
onClick={this.nacosGoBack.bind(this, parentServiceName)}
id={'backarrow'}
onMouseOver={this.nacosEnterBack.bind(this)}
onMouseLeave={this.nacosOutBack.bind(this)}
style={{
marginLeft: 77,
marginTop: 0,
fontWeight: 'bold',
cursor: 'pointer',
color: '#546478',
fontSize: '20px'
}}
/>
</div>
),
navRow: <ul>{this.nacosLoopNav([nowNavObj])}</ul>
});
setTimeout(() => {
let navid = navName;
this.activeNav(navid);
});
} else {
this.setState({
showLink: null,
navRow: <ul>{this.nacosLoopNav(this.initNav)}</ul>
});
setTimeout(() => {
let navid = navName;
this.activeNav(navid);
});
}
});
}
onLanguageChange = (language) => {
aliwareIntl.changeLanguage(language);
document.cookie = `docsite_language=${language}`;
window.location.reload();
constructor(props) {
super(props);
this.initNav = this.props.navList;
this.deepNav = [];
this.oneLevelNavArr = {}; // 平行导航map
this.state = {
leftBarClose: false,
showLink: null,
navRow: [],
noChild: false,
};
}
render() {
let language = aliwareGetCookieByKeyName('docsite_language') || siteConfig.defaultLanguage;
goBack() {
this.props.history.goBack();
}
const { headerType, showLink, navRow, leftBarClose, noChild } = this.state;
const headerLogo = `${process.env.NODE_ENV === 'development' ? '' : 'public/'}img/TB118jPv_mWBKNjSZFBXXXxUFXa-2000-390.svg`;
return (
<div className="viewFramework-product" style={{ top: 66 }}>
<Header
type={headerType}
logo={headerLogo}
language={language}
onLanguageChange={this.onLanguageChange}
/>
<div
className="viewFramework-product-navbar"
style={{ width: 180, marginLeft: 0 }}
id="viewFramework-product-navbar"
data-spm="acm_nav"
>
<div className="viewFramework-product-navbar-removed">
<div>
<div className="product-nav-scene product-nav-main-scene">
{showLink ? (
<div className="product-nav-icon env" style={{ height: 80, paddingTop: 25 }}>
{showLink}
</div>
) : (
<div
style={{ textIndent: 0 }}
className={'product-nav-title'}
title={aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
)}
>
<span>
{aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
)}
</span>
<span style={{ marginLeft: 5 }}>
{aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.nacosversion'
)}
</span>
</div>
)}
<div
className="product-nav-list"
style={{ position: 'relative', top: 0, height: '100%' }}
>
{navRow}
</div>
</div>
</div>
</div>
</div>
<div
className="viewFramework-product-navbar-collapse"
id="viewFramework-product-navbar-collapse"
onClick={this.nacosToggleLeftBar.bind(this)}
>
<div className="product-navbar-collapse-inner">
<div className="product-navbar-collapse-bg" />
<div className="product-navbar-collapse">
{leftBarClose ? (
<span className="icon-collapse-right" style={{ display: 'block' }} />
) : (
<span className="icon-collapse-left" />
)}
</div>
</div>
</div>
<div className="viewFramework-product-body" style={{ marginLeft: 180 }} id="viewFramework-product-body">
<div>
{!noChild ? (
<div>{this.props.children}</div>
) : (
<div style={{ height: 300, lineHeight: '300px', textAlign: 'center', fontSize: '18px' }}>
{aliwareIntl.get('com.alibaba.nacos.layout.noenv.does_not_exist')}
</div>
)}
</div>
</div>
</div>
);
nacosToggleNav(id, event) {
event.preventDefault();
const nowNav = document.getElementById(id);
const iconClass = nowNav.querySelector('.iconshow');
const subNav = nowNav.querySelector('.subnavlist');
const { classList } = iconClass;
let tmpClassName = 'iconshow ';
for (let i = 0; i < classList.length; i++) {
if (classList[i] === 'icon-arrow-down') {
subNav.style.display = 'none';
subNav.className += ' hidden';
tmpClassName += 'icon-arrow-right';
}
if (classList[i] === 'icon-arrow-right') {
tmpClassName += 'icon-arrow-down';
subNav.className = subNav.className.replace(/hidden/g, '');
subNav.style.display = 'block';
}
}
iconClass.className = tmpClassName;
}
nacosGoBack(url) {
const params = window.location.hash.split('?')[1];
const urlArr = params.split('&') || [];
const queryParams = [];
for (let i = 0; i < urlArr.length; i++) {
if (
urlArr[i].split('=')[0] !== '_k' &&
urlArr[i].split('=')[0] !== 'dataId' &&
urlArr[i].split('=')[0] !== 'group'
) {
if (urlArr[i].split('=')[0] === 'searchDataId') {
queryParams.push(`dataId=${urlArr[i].split('=')[1]}`);
} else if (urlArr[i].split('=')[0] === 'searchGroup') {
queryParams.push(`group=${urlArr[i].split('=')[1]}`);
} else {
queryParams.push(urlArr[i]);
}
}
}
this.props.history.push(`/${url}?${queryParams.join('&')}`);
}
nacosEnterBack() {
document.getElementById('backarrow').style.color = '#09c';
}
nacosOutBack() {
document.getElementById('backarrow').style.color = '#546478';
}
nacosToggleLeftBar() {
if (!this.nacosOutDom) return;
if (!this.state.leftBarClose) {
// 关闭
this.nacosOutDom.className = 'viewFramework-product';
this.nacosLeftBarDom.style.width = 0;
this.nacosBodyDom.style.left = 0;
this.nacosToggleIconDom.style.left = 0;
} else {
this.nacosOutDom.className = 'viewFramework-product viewFramework-product-col-1';
this.nacosLeftBarDom.style.width = '180px';
this.nacosBodyDom.style.left = '180px';
this.nacosToggleIconDom.style.left = '160px';
}
this.setState({
leftBarClose: !this.state.leftBarClose,
});
}
navTo(url) {
if (url !== '/configdetail' && url !== '/configeditor') {
// 二级菜单不清空
setParams({
dataId: '',
group: '',
});
}
const params = window.location.hash.split('?')[1];
const urlArr = params.split('&') || [];
const queryParams = [];
for (let i = 0; i < urlArr.length; i++) {
if (urlArr[i].split('=')[0] !== '_k') {
queryParams.push(urlArr[i]);
}
}
this.props.history.push(`${url}?${queryParams.join('&')}`);
}
nacosSetSpecialNav(item) {
item.children.forEach(_item => {
const obj = _item;
if (obj.dontUseChild === true) {
obj.parentName = item.title;
obj.parentId = item.id;
obj.parentPath = `/${item.id}`;
this.deepNav.push(obj);
}
if (_item.children) {
this.nacosSetSpecialNav(_item);
}
});
}
nacosNavAct(serviceName, match, location) {
if (!match) {
const formatpath = location.pathname.substr(1); // 得到当前路径
const nowpathobj = this.oneLevelNavArr[formatpath]; // 根据平行导航匹配父类
if (nowpathobj) {
if (nowpathobj.parent === serviceName) {
// 如果父类等于当前的导航则高亮
return true;
}
}
return false;
}
return true;
}
nacosLoopNavDeeply(data, parentServiceName) {
// 深度遍历获取所有的导航数据
data.forEach(item => {
if (item) {
const navObj = item;
const _parentServiceName = item.serviceName;
navObj.parentServiceName = parentServiceName;
this.oneLevelNavArr[item.serviceName] = navObj; // 得到每一个层级的导航映射
if (item.children && item.children.length > 0) {
this.nacosLoopNavDeeply(item.children, _parentServiceName);
}
}
});
}
activeNav(id) {
if (this.preActNav) {
this.preActNav.removeClass('active');
}
const nowNav = $(`#${id}`);
nowNav.addClass('active');
this.preActNav = nowNav;
}
nacosLoopNav(data, _index = 0, parent) {
let index = _index;
// 遍历导航，只显示2级
const self = this;
return data.map(item => {
if (!item) {
return '';
}
index++;
if (item.dontUseChild === true) {
return '';
}
if (item.children && item.children.length > 0) {
if (item.isVirtual) {
// 如果是虚拟菜单需要增加展开箭头
const icon = item.isExtend ? (
<span className="icon-arrow-down iconshow" />
) : (
<span className="icon-arrow-right iconshow" />
);
const hiddenClass = item.isExtend ? '' : 'hidden';
return (
<li
key={`${item.serviceName}`}
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
id={`${item.serviceName}`}
>
<div>
<a href="" onClick={this.nacosToggleNav.bind(this, item.serviceName)}>
<div className="nav-icon">{icon}</div>
<div className="nav-title">{aliwareIntl.get(item.id) || item.name}</div>
</a>
</div>
<ul className={`subnavlist ${hiddenClass}`}>
{self.nacosLoopNav(item.children, index)}
</ul>
</li>
);
} else {
return (
<li
key={`${item.serviceName}`}
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
>
<a
href={'javascript:;'}
id={`${item.serviceName}`}
onClick={this.activeNav.bind(this, `nav${index}`)}
>
<div className="nav-icon" />
<div className="nav-title">{aliwareIntl.get(item.id) || item.name}</div>
</a>
</li>
);
}
}
return (
<li
key={`${item.serviceName}`}
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
>
<a
href={'javascript:;'}
id={`${item.serviceName}`}
onClick={this.activeNav.bind(this, `nav${index}`)}
>
<div className="nav-icon" />
<div className="nav-title">{aliwareIntl.get(item.id) || item.name}</div>
</a>
</li>
);
});
}
nacosGetNav(navList) {
let navRow = ''; // 导航
if (navList.length > 0) {
navRow = <ul>{this.nacosLoopNav(navList)}</ul>;
this.nacosLoopNavDeeply(navList); // 深度遍历导航树获得平行map
}
return navRow;
}
UNSAFE_componentWillMount() {
const nav = this.props.navList || [];
const navRow = this.nacosGetNav(nav);
this.setState({
navRow,
});
}
componentDidMount() {
this.nacosLeftBarDom = document.getElementById('viewFramework-product-navbar');
this.nacosBodyDom = document.getElementById('viewFramework-product-body');
this.nacosToggleIconDom = document.getElementById('viewFramework-product-navbar-collapse');
this.nacosOutDom = document.getElementById('page-header-mask');
// let parentNav = this.initNav[0] || [];
const defaultNav = '/configurationManagement';
// let childrenNav = parentNav.children || [];
this.props.history.listen(location => {
if (this.preSimplePath && this.preSimplePath !== '/') {
if (location.pathname.indexOf(this.preSimplePath) !== -1) {
return;
}
}
const simplePath = window.location.hash.split('?')[0];
const navName = simplePath.substr('2');
this.preSimplePath = simplePath;
if (navName === '') {
this.props.history.push(defaultNav);
setTimeout(() => {
this.activeNav('configurationManagement');
});
return;
}
const nowNavObj = this.oneLevelNavArr[navName];
if (!nowNavObj) {
this.setState({
noChild: true,
});
return;
}
this.setState({
noChild: !!nowNavObj.dontUseChild,
});
const { parentServiceName } = nowNavObj;
const parentNav = this.oneLevelNavArr[parentServiceName];
if (simplePath !== '/' && nowNavObj && parentNav && !parentNav.isVirtual) {
this.setState({
showLink: (
<div>
<Icon
type="arrow-left"
onClick={this.nacosGoBack.bind(this, parentServiceName)}
id={'backarrow'}
onMouseOver={this.nacosEnterBack.bind(this)}
onMouseLeave={this.nacosOutBack.bind(this)}
style={{
marginLeft: 77,
marginTop: 0,
fontWeight: 'bold',
cursor: 'pointer',
color: '#546478',
fontSize: '20px',
}}
/>
</div>
),
navRow: <ul>{this.nacosLoopNav([nowNavObj])}</ul>,
});
setTimeout(() => {
const navid = navName;
this.activeNav(navid);
});
} else {
this.setState({
showLink: null,
navRow: <ul>{this.nacosLoopNav(this.initNav)}</ul>,
});
setTimeout(() => {
const navid = navName;
this.activeNav(navid);
});
}
});
}
onLanguageChange = language => {
aliwareIntl.changeLanguage(language);
document.cookie = `docsite_language=${language}`;
window.location.reload();
};
render() {
const language = aliwareGetCookieByKeyName('docsite_language') || siteConfig.defaultLanguage;
const { headerType, showLink, navRow, leftBarClose, noChild } = this.state;
const headerLogo = `${
process.env.NODE_ENV === 'development' ? '' : 'public/'
}img/TB118jPv_mWBKNjSZFBXXXxUFXa-2000-390.svg`;
return (
<div className="viewFramework-product" style={{ top: 66 }}>
<Header
type={headerType}
logo={headerLogo}
language={language}
onLanguageChange={this.onLanguageChange}
/>
<div
className="viewFramework-product-navbar"
style={{ width: 180, marginLeft: 0 }}
id="viewFramework-product-navbar"
data-spm="acm_nav"
>
<div className="viewFramework-product-navbar-removed">
<div>
<div className="product-nav-scene product-nav-main-scene">
{showLink ? (
<div className="product-nav-icon env" style={{ height: 80, paddingTop: 25 }}>
{showLink}
</div>
) : (
<div
style={{ textIndent: 0 }}
className={'product-nav-title'}
title={aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
)}
>
<span>
{aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
)}
</span>
<span style={{ marginLeft: 5 }}>
{aliwareIntl.get('com.alibaba.nacos.layout.noenv.nacosversion')}
</span>
</div>
)}
<div
className="product-nav-list"
style={{ position: 'relative', top: 0, height: '100%' }}
>
{navRow}
</div>
</div>
</div>
</div>
</div>
<div
className="viewFramework-product-navbar-collapse"
id="viewFramework-product-navbar-collapse"
onClick={this.nacosToggleLeftBar.bind(this)}
>
<div className="product-navbar-collapse-inner">
<div className="product-navbar-collapse-bg" />
<div className="product-navbar-collapse">
{leftBarClose ? (
<span className="icon-collapse-right" style={{ display: 'block' }} />
) : (
<span className="icon-collapse-left" />
)}
</div>
</div>
</div>
<div
className="viewFramework-product-body"
style={{ marginLeft: 180 }}
id="viewFramework-product-body"
>
<div>
{!noChild ? (
<div>{this.props.children}</div>
) : (
<div
style={{ height: 300, lineHeight: '300px', textAlign: 'center', fontSize: '18px' }}
>
{aliwareIntl.get('com.alibaba.nacos.layout.noenv.does_not_exist')}
</div>
)}
</div>
</div>
</div>
);
}
}

318
console/src/main/resources/static/src/lib.js
View File

@ -12,194 +12,194 @@
*/
import { getParams, request, aliwareIntl } from './globalLib';
var hasAlert = false;
let hasAlert = false;
window.edasprefix = 'acm'; //固定的edas网关需要的项目名
window.edasprefix = 'acm'; // 固定的edas网关需要的项目名
window.globalConfig = {
isParentEdas: function () {
try {
if (window.parent.location.host.indexOf('edas') !== -1) {
return true;
}
} catch (error) { }
return false;
}
isParentEdas() {
try {
if (window.parent.location.host.indexOf('edas') !== -1) {
return true;
}
} catch (error) {}
return false;
},
};
request.middleWare(config => {
let url = config.url;
let tenant = window.nownamespace || getParams('namespace') || '';
tenant = tenant === 'global' ? '' : tenant;
let splitArr = url.split('?');
if (splitArr.length > 1) {
let params = splitArr[1];
if (params.indexOf('dataId') !== -1) {
url += '&tenant=' + tenant;
config.url = url;
}
request.middleWare((_config = {}) => {
let config = _config;
let { url = '' } = config;
let tenant = window.nownamespace || getParams('namespace') || '';
tenant = tenant === 'global' ? '' : tenant;
const splitArr = url.split('?');
if (splitArr.length > 1) {
const params = splitArr[1];
if (params.indexOf('dataId') !== -1) {
url += `&tenant=${tenant}`;
config.url = url;
}
}
let preSucess = config.success;
let preErorr = config.error;
const preSucess = config.success;
const preErorr = config.error;
config.success = function (res) {
config.success = function(res) {
if (res.code === 'ConsoleNeedLogin' && window.location.host.indexOf('acm') !== -1) {
window.location.reload();
}
if (res.code === 403 && !hasAlert) {
hasAlert = true;
window.Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
style: { width: 400 },
content: res.message,
onOk: () => {
hasAlert = false;
},
onCancel: () => {
hasAlert = false;
},
onClose: () => {
hasAlert = false;
},
});
} else {
typeof preSucess === 'function' && preSucess(res);
}
};
if (res.code === 'ConsoleNeedLogin' && window.location.host.indexOf('acm') !== -1) {
window.location.reload();
}
if (res.code === 403 && !hasAlert) {
hasAlert = true;
window.Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
style: { width: 400 },
content: res.message,
onOk: () => {
hasAlert = false;
},
onCancel: () => {
hasAlert = false;
},
onClose: () => {
hasAlert = false;
}
});
return;
} else {
typeof preSucess === "function" && preSucess(res);
}
};
config.error = function(res) {
if (res.status === 403 && !hasAlert) {
hasAlert = true;
config.error = function (res) {
if (res.status === 403 && !hasAlert) {
hasAlert = true;
window.Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
style: { width: 400 },
content: aliwareIntl.get('com.alibaba.nacos.pubshow'), // '子账号没有权限，请联系主账号负责人RAM上授权',
onOk: () => {
hasAlert = false;
},
onCancel: () => {
hasAlert = false;
},
onClose: () => {
hasAlert = false;
},
});
} else {
typeof preErorr === 'function' && preErorr(res);
}
};
window.Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
style: { width: 400 },
content: aliwareIntl.get('com.alibaba.nacos.pubshow'), //'子账号没有权限，请联系主账号负责人RAM上授权',
onOk: () => {
hasAlert = false;
},
onCancel: () => {
hasAlert = false;
},
onClose: () => {
hasAlert = false;
}
});
return;
} else {
typeof preErorr === "function" && preErorr(res);
}
};
return config;
return config;
});
/**
* 配置 monaco
*/
window.require.config({ paths: { 'vs': process.env.NODE_ENV === 'development' ? 'js/vs' : 'public/js/vs' } });
window.require.config({
'vs/nls': {
availableLanguages: {
'*': 'zh-cn'
}
}
paths: { vs: process.env.NODE_ENV === 'development' ? 'js/vs' : 'public/js/vs' },
});
window.require.config({
'vs/nls': {
availableLanguages: {
'*': 'zh-cn',
},
},
});
window.require(['vs/editor/editor.main'], () => {
// Register a new language
window.monaco.languages.register({ id: 'properties' });
// Register a new language
window.monaco.languages.register({ id: 'properties' });
// Register a tokens provider for the language
window.monaco.languages.setMonarchTokensProvider('properties', {
tokenizer: {
root: [[/^\#.*/, 'comment'], [/.*\=/, 'key'], [/^=.*/, 'value']]
}
});
// Register a tokens provider for the language
window.monaco.languages.setMonarchTokensProvider('properties', {
tokenizer: {
root: [[/^\#.*/, 'comment'], [/.*\=/, 'key'], [/^=.*/, 'value']],
},
});
// Define a new theme that constains only rules that match this language
window.monaco.editor.defineTheme('properties', {
base: 'vs',
inherit: false,
rules: [{ token: 'key', foreground: '009968' }, { token: 'value', foreground: '009968' }, { token: 'comment', foreground: '666666' }]
});
// Define a new theme that constains only rules that match this language
window.monaco.editor.defineTheme('properties', {
base: 'vs',
inherit: false,
rules: [
{ token: 'key', foreground: '009968' },
{ token: 'value', foreground: '009968' },
{ token: 'comment', foreground: '666666' },
],
});
// Register a completion item provider for the new language
window.monaco.languages.registerCompletionItemProvider('properties', {
provideCompletionItems: () => {
return [{
label: 'simpleText',
kind: window.monaco.languages.CompletionItemKind.Text
}, {
label: 'testing',
kind: window.monaco.languages.CompletionItemKind.Keyword,
insertText: {
value: `testing(\${1:condition})`
}
}, {
label: 'ifelse',
kind: window.monaco.languages.CompletionItemKind.Snippet,
insertText: {
value: [`if (\${1:condition}) {`, '\t$0', '} else {', '\t', '}'].join('\n')
},
documentation: 'If-Else Statement'
}];
}
});
// Register a completion item provider for the new language
window.monaco.languages.registerCompletionItemProvider('properties', {
provideCompletionItems: () => [
{
label: 'simpleText',
kind: window.monaco.languages.CompletionItemKind.Text,
},
{
label: 'testing',
kind: window.monaco.languages.CompletionItemKind.Keyword,
insertText: {
value: 'testing(${1:condition})',
},
},
{
label: 'ifelse',
kind: window.monaco.languages.CompletionItemKind.Snippet,
insertText: {
value: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'),
},
documentation: 'If-Else Statement',
},
],
});
});
window.importEditor = callback => {
window.require(['vs/editor/editor.main'], () => {
callback && callback();
});
window.require(['vs/editor/editor.main'], () => {
callback && callback();
});
};
//同步获取命名空间地址
window._getLink = function () {
let _linkObj = {};
// request({
// url: "com.alibaba.nacos.service.getLinks",
// async: false,
// data: {},
// success: res => {
// if (res.code === 200) {
// _linkObj = res.data;
// }
// }
// });
return function (linkName) {
return _linkObj[linkName] || "";
};
}(window);
// 同步获取命名空间地址
window._getLink = (function() {
const _linkObj = {};
// request({
// url: "com.alibaba.nacos.service.getLinks",
// async: false,
// data: {},
// success: res => {
// if (res.code === 200) {
// _linkObj = res.data;
// }
// }
// });
return function(linkName) {
return _linkObj[linkName] || '';
};
})(window);
window.addEventListener('resize', () => {
try {
if (this.timmer) {
clearTimeout(this.timmer);
}
this.timmer = setTimeout(() => {
let height = document.body.clientHeight;
height = height > 800 ? height : 800;
window.parent.adjustHeight && window.parent.adjustHeight(height);
}, 500);
} catch (e) {
try {
if (this.timmer) {
clearTimeout(this.timmer);
}
})
//判断是否是国际站国际用户
window.isIntel = function () {
let host = window.location.host;
if (host.indexOf('alibabacloud.com') !== -1) {
return true;
} else {
return false;
}
}
this.timmer = setTimeout(() => {
let height = document.body.clientHeight;
height = height > 800 ? height : 800;
window.parent.adjustHeight && window.parent.adjustHeight(height);
}, 500);
} catch (e) {}
});
// 判断是否是国际站国际用户
window.isIntel = function() {
const { host } = window.location;
if (host.indexOf('alibabacloud.com') !== -1) {
return true;
} else {
return false;
}
};

422
console/src/main/resources/static/src/menu.js
View File

@ -12,219 +12,219 @@
*/
module.exports = {
"data": [
data: [
{
isExtend: true,
name: '配置管理',
title: '配置管理',
isVirtual: true,
projectName: 'nacos',
serviceName: 'configurationManagementVirtual',
link: 'configurationManagementVirtual',
hasFusion: true,
template: '',
registerName: 'com.alibaba.nacos.page.configurationManagementVirtual',
useRouter: false,
id: 'com.alibaba.nacos.page.configurationManagementVirtual',
children: [
{
"isExtend": true,
"name": "配置管理",
"title": "配置管理",
"isVirtual": true,
"projectName": "nacos",
"serviceName": "configurationManagementVirtual",
"link": "configurationManagementVirtual",
"hasFusion": true,
"template": "",
"registerName": "com.alibaba.nacos.page.configurationManagementVirtual",
"useRouter": false,
"id": "com.alibaba.nacos.page.configurationManagementVirtual",
"children": [
{
"isExtend": false,
"name": "配置列表",
"title": "配置列表",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "configurationManagement",
"link": "configurationManagement",
"hasFusion": true,
"template": "",
"dontUseChild": false,
"registerName": "com.alibaba.nacos.page.configurationManagement",
"useRouter": false,
"id": "configurationManagement",
"children": [
{
"isExtend": false,
"name": "配置详情",
"title": "配置详情",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "configdetail",
"link": "Configdetail",
"hasFusion": true,
"template": "",
"dontUseChild": false,
"registerName": "com.alibaba.nacos.page.configdetail",
"useRouter": false,
"id": "configdetail"
},
{
"isExtend": false,
"name": "同步配置",
"title": "同步配置",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "configsync",
"link": "configsync",
"hasFusion": true,
"template": "",
"dontUseChild": true,
"registerName": "com.alibaba.nacos.page.configsync",
"useRouter": false,
"id": "configsync"
},
{
"isExtend": false,
"name": "配置编辑",
"title": "配置编辑",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "configeditor",
"link": "configeditor",
"hasFusion": true,
"template": "",
"registerName": "com.alibaba.nacos.page.configeditor",
"useRouter": false,
"id": "configeditor"
},
{
"isExtend": false,
"name": "新建配置",
"title": "新建配置",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "newconfig",
"link": "newconfig",
"hasFusion": true,
"template": "",
"registerName": "com.alibaba.nacos.page.newconfig",
"useRouter": false,
"id": "newconfig"
}
]
},
{
"isExtend": false,
"name": "历史版本",
"title": "历史版本",
"isVirtual": false,
"projectName": "nacos",
"children": [
{
"isExtend": false,
"name": "配置回滚",
"title": "配置回滚",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "configRollback",
"link": "configRollback",
"hasFusion": true,
"template": "",
"registerName": "com.alibaba.nacos.page.configRollback",
"useRouter": false,
"id": "configRollback"
},
{
"isExtend": false,
"name": "历史详情",
"title": "历史详情",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "historyDetail",
"link": "historyDetail",
"hasFusion": true,
"template": "",
"registerName": "com.alibaba.nacos.page.historyDetail",
"useRouter": false,
"id": "historyDetail"
}
],
"serviceName": "historyRollback",
"link": "historyRollback",
"hasFusion": true,
"template": "",
"dontUseChild": false,
"registerName": "com.alibaba.nacos.page.historyRollback",
"useRouter": false,
"id": "historyRollback"
},
{
"isExtend": false,
"name": "监听查询",
"title": "监听查询",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "listeningToQuery",
"link": "listeningToQuery",
"hasFusion": true,
"template": "",
"registerName": "com.alibaba.nacos.page.listeningToQuery",
"useRouter": false,
"id": "listeningToQuery"
}
]
isExtend: false,
name: '配置列表',
title: '配置列表',
isVirtual: false,
projectName: 'nacos',
serviceName: 'configurationManagement',
link: 'configurationManagement',
hasFusion: true,
template: '',
dontUseChild: false,
registerName: 'com.alibaba.nacos.page.configurationManagement',
useRouter: false,
id: 'configurationManagement',
children: [
{
isExtend: false,
name: '配置详情',
title: '配置详情',
isVirtual: false,
projectName: 'nacos',
serviceName: 'configdetail',
link: 'Configdetail',
hasFusion: true,
template: '',
dontUseChild: false,
registerName: 'com.alibaba.nacos.page.configdetail',
useRouter: false,
id: 'configdetail',
},
{
isExtend: false,
name: '同步配置',
title: '同步配置',
isVirtual: false,
projectName: 'nacos',
serviceName: 'configsync',
link: 'configsync',
hasFusion: true,
template: '',
dontUseChild: true,
registerName: 'com.alibaba.nacos.page.configsync',
useRouter: false,
id: 'configsync',
},
{
isExtend: false,
name: '配置编辑',
title: '配置编辑',
isVirtual: false,
projectName: 'nacos',
serviceName: 'configeditor',
link: 'configeditor',
hasFusion: true,
template: '',
registerName: 'com.alibaba.nacos.page.configeditor',
useRouter: false,
id: 'configeditor',
},
{
isExtend: false,
name: '新建配置',
title: '新建配置',
isVirtual: false,
projectName: 'nacos',
serviceName: 'newconfig',
link: 'newconfig',
hasFusion: true,
template: '',
registerName: 'com.alibaba.nacos.page.newconfig',
useRouter: false,
id: 'newconfig',
},
],
},
{
"isExtend": true,
"name": "服务管理",
"title": "服务管理",
"isVirtual": true,
"projectName": "nacos",
"serviceName": "serviceManagementVirtual",
"link": "serviceManagementVirtual",
"hasFusion": true,
"template": "",
"registerName": "com.alibaba.nacos.page.serviceManagementVirtual",
"useRouter": false,
"id": "com.alibaba.nacos.page.serviceManagementVirtual",
"children": [
{
"isExtend": false,
"name": "服务列表",
"title": "服务列表",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "serviceManagement",
"link": "serviceManagement",
"hasFusion": true,
"template": "",
"registerName": "com.alibaba.nacos.page.serviceManagement",
"useRouter": false,
"id": "serviceManagement",
"children":[
{
"isExtend": true,
"name": "服务详情",
"title": "服务详情",
"isVirtual": true,
"projectName": "nacos",
"serviceName": "serviceDetail",
"link": "serviceDetail",
"hasFusion": true,
"template": "",
"registerName": "com.alibaba.nacos.page.ServiceDetail",
"useRouter": false,
"id": "serviceDetail",
}
]
}
]
isExtend: false,
name: '历史版本',
title: '历史版本',
isVirtual: false,
projectName: 'nacos',
children: [
{
isExtend: false,
name: '配置回滚',
title: '配置回滚',
isVirtual: false,
projectName: 'nacos',
serviceName: 'configRollback',
link: 'configRollback',
hasFusion: true,
template: '',
registerName: 'com.alibaba.nacos.page.configRollback',
useRouter: false,
id: 'configRollback',
},
{
isExtend: false,
name: '历史详情',
title: '历史详情',
isVirtual: false,
projectName: 'nacos',
serviceName: 'historyDetail',
link: 'historyDetail',
hasFusion: true,
template: '',
registerName: 'com.alibaba.nacos.page.historyDetail',
useRouter: false,
id: 'historyDetail',
},
],
serviceName: 'historyRollback',
link: 'historyRollback',
hasFusion: true,
template: '',
dontUseChild: false,
registerName: 'com.alibaba.nacos.page.historyRollback',
useRouter: false,
id: 'historyRollback',
},
{
"isExtend": false,
"name": "命名空间",
"title": "命名空间",
"isVirtual": false,
"projectName": "nacos",
"serviceName": "namespace",
"link": "namespace",
"hasFusion": true,
"template": "",
"dontUseChild": false,
"registerName": "com.alibaba.nacos.page.namespace",
"useRouter": false,
"id": "namespace"
}
],
"defaultKey": "configurationManagement",
"projectName": "nacos"
}
isExtend: false,
name: '监听查询',
title: '监听查询',
isVirtual: false,
projectName: 'nacos',
serviceName: 'listeningToQuery',
link: 'listeningToQuery',
hasFusion: true,
template: '',
registerName: 'com.alibaba.nacos.page.listeningToQuery',
useRouter: false,
id: 'listeningToQuery',
},
],
},
{
isExtend: true,
name: '服务管理',
title: '服务管理',
isVirtual: true,
projectName: 'nacos',
serviceName: 'serviceManagementVirtual',
link: 'serviceManagementVirtual',
hasFusion: true,
template: '',
registerName: 'com.alibaba.nacos.page.serviceManagementVirtual',
useRouter: false,
id: 'com.alibaba.nacos.page.serviceManagementVirtual',
children: [
{
isExtend: false,
name: '服务列表',
title: '服务列表',
isVirtual: false,
projectName: 'nacos',
serviceName: 'serviceManagement',
link: 'serviceManagement',
hasFusion: true,
template: '',
registerName: 'com.alibaba.nacos.page.serviceManagement',
useRouter: false,
id: 'serviceManagement',
children: [
{
isExtend: true,
name: '服务详情',
title: '服务详情',
isVirtual: true,
projectName: 'nacos',
serviceName: 'serviceDetail',
link: 'serviceDetail',
hasFusion: true,
template: '',
registerName: 'com.alibaba.nacos.page.ServiceDetail',
useRouter: false,
id: 'serviceDetail',
},
],
},
],
},
{
isExtend: false,
name: '命名空间',
title: '命名空间',
isVirtual: false,
projectName: 'nacos',
serviceName: 'namespace',
link: 'namespace',
hasFusion: true,
template: '',
dontUseChild: false,
registerName: 'com.alibaba.nacos.page.namespace',
useRouter: false,
id: 'namespace',
},
],
defaultKey: 'configurationManagement',
projectName: 'nacos',
};

36
console/src/main/resources/static/src/models/error.js
View File

@ -14,32 +14,32 @@
export default {
namespace: 'error',
namespace: 'error',
state: {
errinfo: '未知错误',
errcode: 0,
erralert: false,
},
state: {
errinfo: '未知错误',
errcode: 0,
erralert: false,
},
subscriptions: {
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
},
effects: {
effects: {
*fetch({ payload }, { call, put }) { // eslint-disable-line
yield put({ type: 'save' });
},
yield put({ type: 'save' });
},
},
reducers: {
save(state, action) {
return { ...state, ...action.payload, errcode: 1 };
},
clear(state, action) {
return { ...state, errinfo: '', errcode: 0 };
},
reducers: {
save(state, action) {
return { ...state, ...action.payload, errcode: 1 };
},
clear(state, action) {
return { ...state, errinfo: '', errcode: 0 };
},
},
};

52
console/src/main/resources/static/src/models/loading.js
View File

@ -14,39 +14,39 @@
export default {
namespace: 'loading',
namespace: 'loading',
state: {
loading: false
},
state: {
loading: false,
},
subscriptions: {
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
},
effects: {
effects: {
*open({ payload }, { call, put }) {
try {
yield put({ type: 'save', payload: { loading: true } });
} catch (e) {
yield put({ type: 'error/save', payload: { errinfo: e.message } })
}
},
*close({ payload }, { call, put }) {
try {
yield put({ type: 'save', payload: { loading: false } });
} catch (e) {
yield put({ type: 'error/save', payload: { errinfo: e.message } })
}
}
* open({ payload }, { call, put }) {
try {
yield put({ type: 'save', payload: { loading: true } });
} catch (e) {
yield put({ type: 'error/save', payload: { errinfo: e.message } });
}
},
reducers: {
save(state, action) {
return { ...state, ...action.payload };
}
* close({ payload }, { call, put }) {
try {
yield put({ type: 'save', payload: { loading: false } });
} catch (e) {
yield put({ type: 'error/save', payload: { errinfo: e.message } });
}
},
},
reducers: {
save(state, action) {
return { ...state, ...action.payload };
},
},
};

402
console/src/main/resources/static/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js
View File

@ -15,185 +15,243 @@ import React from 'react';
import './index.less';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import { Button, Dialog, Field, Form, Input, Loading, Tab } from '@alifd/next';
const TabPane = Tab.Item;
const FormItem = Form.Item;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ConfigDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
showmore: false,
activeKey: 'normal',
hasbeta: false,
ips: '',
checkedBeta: false,
switchEncrypt: false,
tag: [{ title: aliwareIntl.get('com.alibaba.nacos.page.configdetail.official'), key: 'normal' }]
};
this.field = new Field(this);
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.ips = '';
this.valueMap = {}; //存储不同版本的数据
this.tenant = getParams('namespace') || '';
this.searchDataId = getParams('searchDataId') || '';
this.searchGroup = getParams('searchGroup') || '';
//this.params = window.location.hash.split('?')[1]||'';
}
constructor(props) {
super(props);
this.state = {
loading: false,
showmore: false,
activeKey: 'normal',
hasbeta: false,
ips: '',
checkedBeta: false,
switchEncrypt: false,
tag: [
{ title: aliwareIntl.get('com.alibaba.nacos.page.configdetail.official'), key: 'normal' },
],
};
this.field = new Field(this);
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.ips = '';
this.valueMap = {}; // 存储不同版本的数据
this.tenant = getParams('namespace') || '';
this.searchDataId = getParams('searchDataId') || '';
this.searchGroup = getParams('searchGroup') || '';
// this.params = window.location.hash.split('?')[1]||'';
}
componentDidMount() {
if (this.dataId.startsWith("cipher-")) {
this.setState({
switchEncrypt: true
});
componentDidMount() {
if (this.dataId.startsWith('cipher-')) {
this.setState({
switchEncrypt: true,
});
}
this.getDataDetail();
}
openLoading() {
this.setState({
loading: true,
});
}
closeLoading() {
this.setState({
loading: false,
});
}
changeTab(value) {
const self = this;
const key = value.split('-')[0];
const data = this.valueMap[key];
this.setState({
activeKey: value,
});
self.field.setValue('content', data.content);
if (data.betaIps) {
self.setState({
ips: data.betaIps,
});
}
}
toggleMore() {
this.setState({
showmore: !this.state.showmore,
});
}
getDataDetail() {
const self = this;
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || '';
this.edasAppName = getParams('edasAppName') || '';
this.inApp = this.edasAppName;
const url = `/nacos/v1/cs/configs?show=all&dataId=${this.dataId}&group=${this.group}`;
request({
url,
beforeSend() {
self.openLoading();
},
success(result) {
if (result != null) {
const data = result;
self.valueMap.normal = data;
self.field.setValue('dataId', data.dataId);
self.field.setValue('content', data.content);
self.field.setValue('appName', self.inApp ? self.edasAppName : data.appName);
self.field.setValue('envs', self.serverId);
self.field.setValue('group', data.group);
self.field.setValue('config_tags', data.configTags);
self.field.setValue('desc', data.desc);
self.field.setValue('md5', data.md5);
} else {
Dialog.alert({
title: aliwareIntl.get('com.alibaba.nacos.page.configdetail.error'),
content: result.message,
language: aliwareIntl.currentLanguageCode,
});
}
this.getDataDetail();
}
openLoading() {
this.setState({
loading: true
});
}
closeLoading() {
this.setState({
loading: false
});
}
},
complete() {
self.closeLoading();
},
});
}
changeTab(value) {
goList() {
this.props.history.push(
`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${
this.searchDataId
}&namespace=${this.tenant}`
);
}
let self = this;
let key = value.split('-')[0];
let data = this.valueMap[key];
console.log(data);
this.setState({
activeKey: value
});
self.field.setValue('content', data.content);
if (data.betaIps) {
self.setState({
ips: data.betaIps
});
}
}
toggleMore() {
this.setState({
showmore: !this.state.showmore
});
}
getDataDetail() {
let self = this;
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || '';
this.edasAppName = getParams('edasAppName') || '';
this.inApp = this.edasAppName;
let url = `/nacos/v1/cs/configs?show=all&dataId=${this.dataId}&group=${this.group}`;
request({
url: url,
beforeSend: function () {
self.openLoading();
},
success: function (result) {
if (result != null) {
let data = result;
self.valueMap['normal'] = data;
self.field.setValue('dataId', data.dataId);
self.field.setValue('content', data.content);
self.field.setValue('appName', self.inApp ? self.edasAppName : data.appName);
self.field.setValue('envs', self.serverId);
self.field.setValue('group', data.group);
self.field.setValue('config_tags', data.configTags);
self.field.setValue('desc', data.desc);
self.field.setValue('md5', data.md5);
} else {
Dialog.alert({
title: aliwareIntl.get('com.alibaba.nacos.page.configdetail.error'),
content: result.message,
language: aliwareIntl.currentLanguageCode
});
}
},
complete: function () {
self.closeLoading();
}
});
}
goList() {
this.props.history.push(`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${this.searchDataId}&namespace=${this.tenant}`);
}
render() {
const init = this.field.init;
const formItemLayout = {
labelCol: {
span: 2
},
wrapperCol: {
span: 22
}
};
let activeKey = this.state.activeKey.split('-')[0];
return (
<div style={{ padding: 10 }}>
<Loading shape={"flower"} tip={"Loading..."} style={{ width: '100%', position: 'relative' }} visible={this.state.loading} color={"#333"}>
<h1 style={{ position: 'relative', width: '100%' }}>{aliwareIntl.get('com.alibaba.nacos.page.configdetail.configuration_details')}</h1>
{this.state.hasbeta ? <div style={{ display: 'inline-block', height: 40, width: '80%', overflow: 'hidden' }}>
<Tab shape={'wrapped'} onChange={this.changeTab.bind(this)} lazyLoad={false} activeKey={this.state.activeKey}>
{this.state.tag.map(tab => <TabPane title={tab.title} key={tab.key}></TabPane>)}
</Tab>
</div> : ''}
<Form direction={"ver"} field={this.field}>
<FormItem label={"Data ID:"} required {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('dataId')} />
</FormItem>
<FormItem label={"Group:"} required {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('group')} />
</FormItem>
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>{this.state.showmore ? aliwareIntl.get('com.alibaba.nacos.page.configdetail.recipient_from') : aliwareIntl.get('com.alibaba.nacos.page.configdetail.more_advanced_options')}</a>
</div>
{this.state.showmore ? <div>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configdetail.home')} {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('appName')} />
</FormItem>
<FormItem label={aliwareIntl.get('nacos.page.configdetail.Tags')} {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('config_tags')} />
</FormItem>
</div> : ''}
<FormItem label={aliwareIntl.get('nacos.page.configdetail.Description')} {...formItemLayout}>
<Input.TextArea htmlType={"text"} multiple rows={3} readOnly={true} {...init('desc')} />
</FormItem>
{activeKey === 'normal' ? '' : <FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configdetail.beta_release')} {...formItemLayout}>
<div style={{ width: '100%' }} id={'betaips'}>
<Input.TextArea multiple style={{ width: '100%' }} value={this.state.ips} readOnly={true} placeholder={'127.0.0.1,127.0.0.2'} />
</div>
</FormItem>}
<FormItem label={"MD5:"} required {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('md5')} />
</FormItem>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configdetail.configuration')} required {...formItemLayout}>
<Input.TextArea htmlType={"text"} multiple rows={15} readOnly={true} {...init('content')} />
</FormItem>
<FormItem label={" "} {...formItemLayout}>
<Button type={"primary"} onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.configdetail.return')}</Button>
</FormItem>
</Form>
</Loading>
render() {
const { init } = this.field;
const formItemLayout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 22,
},
};
const activeKey = this.state.activeKey.split('-')[0];
return (
<div style={{ padding: 10 }}>
<Loading
shape={'flower'}
tip={'Loading...'}
style={{ width: '100%', position: 'relative' }}
visible={this.state.loading}
color={'#333'}
>
<h1 style={{ position: 'relative', width: '100%' }}>
{aliwareIntl.get('com.alibaba.nacos.page.configdetail.configuration_details')}
</h1>
{this.state.hasbeta ? (
<div style={{ display: 'inline-block', height: 40, width: '80%', overflow: 'hidden' }}>
<Tab
shape={'wrapped'}
onChange={this.changeTab.bind(this)}
lazyLoad={false}
activeKey={this.state.activeKey}
>
{this.state.tag.map(tab => (
<TabPane title={tab.title} key={tab.key} />
))}
</Tab>
</div>
);
}
) : (
''
)}
<Form inline={false} field={this.field}>
<FormItem label={'Data ID:'} required {...formItemLayout}>
<Input htmlType={'text'} readOnly {...init('dataId')} />
</FormItem>
<FormItem label={'Group:'} required {...formItemLayout}>
<Input htmlType={'text'} readOnly {...init('group')} />
</FormItem>
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
{this.state.showmore
? aliwareIntl.get('com.alibaba.nacos.page.configdetail.recipient_from')
: aliwareIntl.get('com.alibaba.nacos.page.configdetail.more_advanced_options')}
</a>
</div>
{this.state.showmore ? (
<div>
<FormItem
label={aliwareIntl.get('com.alibaba.nacos.page.configdetail.home')}
{...formItemLayout}
>
<Input htmlType={'text'} readOnly {...init('appName')} />
</FormItem>
<FormItem
label={aliwareIntl.get('nacos.page.configdetail.Tags')}
{...formItemLayout}
>
<Input htmlType={'text'} readOnly {...init('config_tags')} />
</FormItem>
</div>
) : (
''
)}
<FormItem
label={aliwareIntl.get('nacos.page.configdetail.Description')}
{...formItemLayout}
>
<Input.TextArea htmlType={'text'} multiple rows={3} readOnly {...init('desc')} />
</FormItem>
{activeKey === 'normal' ? (
''
) : (
<FormItem
label={aliwareIntl.get('com.alibaba.nacos.page.configdetail.beta_release')}
{...formItemLayout}
>
<div style={{ width: '100%' }} id={'betaips'}>
<Input.TextArea
multiple
style={{ width: '100%' }}
value={this.state.ips}
readOnly
placeholder={'127.0.0.1,127.0.0.2'}
/>
</div>
</FormItem>
)}
<FormItem label={'MD5:'} required {...formItemLayout}>
<Input htmlType={'text'} readOnly {...init('md5')} />
</FormItem>
<FormItem
label={aliwareIntl.get('com.alibaba.nacos.page.configdetail.configuration')}
required
{...formItemLayout}
>
<Input.TextArea htmlType={'text'} multiple rows={15} readOnly {...init('content')} />
</FormItem>
<FormItem label={' '} {...formItemLayout}>
<Button type={'primary'} onClick={this.goList.bind(this)}>
{aliwareIntl.get('com.alibaba.nacos.page.configdetail.return')}
</Button>
</FormItem>
</Form>
</Loading>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ConfigDetail;
export default ConfigDetail;

2
console/src/main/resources/static/src/pages/ConfigurationManagement/ConfigDetail/index.js
View File

@ -13,4 +13,4 @@
import ConfigDetail from './ConfigDetail';
export default ConfigDetail;
export default ConfigDetail;

1291
console/src/main/resources/static/src/pages/ConfigurationManagement/ConfigEditor/ConfigEditor.js
View File

File diff suppressed because it is too large Load Diff

364
console/src/main/resources/static/src/pages/ConfigurationManagement/ConfigRollback/ConfigRollback.js
View File

@ -15,185 +15,217 @@ import React from 'react';
import './index.less';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import { Button, Dialog, Field, Form, Input } from '@alifd/next';
const FormItem = Form.Item;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ConfigRollback extends React.Component {
constructor(props) {
super(props);
this.field = new Field(this);
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.serverId = getParams('serverId') || 'center';
this.nid = getParams('nid') || '';
this.state = {
envName: '',
visible: false,
showmore: false,
};
// this.params = window.location.hash.split('?')[1]||'';
this.typeMap = {
// 操作映射提示
U: 'publish',
I: aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete'),
D: 'publish',
};
this.typeMapName = {
// 操作映射名
U: aliwareIntl.get('com.alibaba.nacos.page.configRollback.updated'),
I: aliwareIntl.get('com.alibaba.nacos.page.configRollback.inserted'),
D: aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete'),
};
}
constructor(props) {
super(props);
this.field = new Field(this);
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.serverId = getParams('serverId') || 'center';
this.nid = getParams('nid') || '';
this.state = {
envName: '',
visible: false,
showmore: false
};
//this.params = window.location.hash.split('?')[1]||'';
this.typeMap = { //操作映射提示
'U': 'publish',
'I': aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete'),
'D': 'publish'
};
this.typeMapName = { //操作映射名
'U': aliwareIntl.get('com.alibaba.nacos.page.configRollback.updated'),
'I': aliwareIntl.get('com.alibaba.nacos.page.configRollback.inserted'),
'D': aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete')
};
}
componentDidMount() {
this.getDataDetail();
}
componentDidMount() {
this.getDataDetail();
}
toggleMore() {
this.setState({
showmore: !this.state.showmore
});
}
getDataDetail() {
let self = this;
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || 'center';
let url = `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`;
request({
url: url,
success: function (result) {
if (result != null) {
let data = result;
let envName = self.serverId;
self.id = data.id; //详情的id
self.field.setValue('dataId', data.dataId);
self.field.setValue('content', data.content);
self.field.setValue('appName', data.appName);
self.field.setValue('opType', self.typeMapName[data.opType.trim()]);
self.opType = data.opType; //当前回滚类型I:插入,D:删除,U:'更新'
self.field.setValue('group', data.group);
self.field.setValue('md5', data.md5);
self.field.setValue('envName', envName);
self.setState({
envName: envName
});
}
}
});
}
goList() {
let tenant = getParams('namespace');
this.props.history.push(`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}&namespace=${tenant}`);
}
toggleMore() {
this.setState({
showmore: !this.state.showmore,
});
}
onOpenConfirm() {
let self = this;
let type = 'post';
if (this.opType.trim() === 'I') {
type = 'delete';
getDataDetail() {
const self = this;
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || 'center';
const url = `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`;
request({
url,
success(result) {
if (result != null) {
const data = result;
const envName = self.serverId;
self.id = data.id; // 详情的id
self.field.setValue('dataId', data.dataId);
self.field.setValue('content', data.content);
self.field.setValue('appName', data.appName);
self.field.setValue('opType', self.typeMapName[data.opType.trim()]);
self.opType = data.opType; // 当前回滚类型I:插入,D:删除,U:'更新'
self.field.setValue('group', data.group);
self.field.setValue('md5', data.md5);
self.field.setValue('envName', envName);
self.setState({
envName,
});
}
Dialog.confirm({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.configRollback.please_confirm_rollback'),
content: <div style={{ marginTop: '-20px' }}>
<h3>{aliwareIntl.get('com.alibaba.nacos.page.configRollback.determine')} {aliwareIntl.get('com.alibaba.nacos.page.configRollback.the_following_configuration')}</h3>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}>
{self.field.getValue("dataId")}
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Group:</span>
<span style={{ color: '#c7254e' }}>
{self.field.getValue("group")}
</span>
</p>
},
});
}
</div>,
onOk: function () {
self.tenant = getParams('namespace') || '';
self.serverId = getParams('serverId') || 'center';
self.dataId = self.field.getValue("dataId");
self.group = self.field.getValue("group");
let postData = {
appName: self.field.getValue("appName"),
dataId: self.dataId,
group: self.group,
content: self.field.getValue("content"),
tenant: self.tenant
};
goList() {
const tenant = getParams('namespace');
this.props.history.push(
`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${
this.dataId
}&namespace=${tenant}`
);
}
let url = `/nacos/v1/cs/configs`;
if (self.opType.trim() === 'I') {
url = `/nacos/v1/cs/configs?dataId=${self.dataId}&group=${self.group}`;
postData = {};
}
// ajax
request({
type: type,
contentType: 'application/x-www-form-urlencoded',
url: url,
data: postData,
success: function (data) {
if (data === true) {
Dialog.alert({ language: aliwareIntl.currentLanguageCode || 'zh-cn', content: aliwareIntl.get('com.alibaba.nacos.page.configRollback.rollback_successful') });
}
}
});
}
});
onOpenConfirm() {
const self = this;
let type = 'post';
if (this.opType.trim() === 'I') {
type = 'delete';
}
render() {
const init = this.field.init;
const formItemLayout = {
labelCol: {
fixedSpan: 6
},
wrapperCol: {
span: 18
}
Dialog.confirm({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.configRollback.please_confirm_rollback'),
content: (
<div style={{ marginTop: '-20px' }}>
<h3>
{aliwareIntl.get('com.alibaba.nacos.page.configRollback.determine')}{' '}
{aliwareIntl.get('com.alibaba.nacos.page.configRollback.the_following_configuration')}
</h3>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}>{self.field.getValue('dataId')}</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Group:</span>
<span style={{ color: '#c7254e' }}>{self.field.getValue('group')}</span>
</p>
</div>
),
onOk() {
self.tenant = getParams('namespace') || '';
self.serverId = getParams('serverId') || 'center';
self.dataId = self.field.getValue('dataId');
self.group = self.field.getValue('group');
let postData = {
appName: self.field.getValue('appName'),
dataId: self.dataId,
group: self.group,
content: self.field.getValue('content'),
tenant: self.tenant,
};
return (
<div style={{ padding: 10 }}>
<h1>{aliwareIntl.get('com.alibaba.nacos.page.configRollback.configuration_rollback')}</h1>
<Form field={this.field}>
<FormItem label="Data ID:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('dataId')} />
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>{this.state.showmore ? aliwareIntl.get('com.alibaba.nacos.page.configRollback.retracted') : aliwareIntl.get('com.alibaba.nacos.page.configRollback.for_more_advanced')}</a>
</div>
</FormItem>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<FormItem label="Group:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('group')} />
</FormItem>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.home')} {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('appName')} />
</FormItem>
</div>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.action_type')} required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('opType')} />
</FormItem>
<FormItem label="MD5:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('md5')} />
</FormItem>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.configuration')} required {...formItemLayout}>
<Input.TextArea htmlType="text" multiple rows={15} readOnly={true} {...init('content')} />
</FormItem>
<FormItem label=" " {...formItemLayout}>
<Button type="primary" style={{ marginRight: 10 }} onClick={this.onOpenConfirm.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.configRollback.rollback')}</Button>
<Button type="normal" onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.configRollback.return')}</Button>
</FormItem>
let url = '/nacos/v1/cs/configs';
if (self.opType.trim() === 'I') {
url = `/nacos/v1/cs/configs?dataId=${self.dataId}&group=${self.group}`;
postData = {};
}
</Form>
// ajax
request({
type,
contentType: 'application/x-www-form-urlencoded',
url,
data: postData,
success(data) {
if (data === true) {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: aliwareIntl.get(
'com.alibaba.nacos.page.configRollback.rollback_successful'
),
});
}
},
});
},
});
}
render() {
const { init } = this.field;
const formItemLayout = {
labelCol: {
fixedSpan: 6,
},
wrapperCol: {
span: 18,
},
};
return (
<div style={{ padding: 10 }}>
<h1>{aliwareIntl.get('com.alibaba.nacos.page.configRollback.configuration_rollback')}</h1>
<Form field={this.field}>
<FormItem label="Data ID:" required {...formItemLayout}>
<Input htmlType="text" readOnly {...init('dataId')} />
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
{this.state.showmore
? aliwareIntl.get('com.alibaba.nacos.page.configRollback.retracted')
: aliwareIntl.get('com.alibaba.nacos.page.configRollback.for_more_advanced')}
</a>
</div>
);
}
</FormItem>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<FormItem label="Group:" required {...formItemLayout}>
<Input htmlType="text" readOnly {...init('group')} />
</FormItem>
<FormItem
label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.home')}
{...formItemLayout}
>
<Input htmlType="text" readOnly {...init('appName')} />
</FormItem>
</div>
<FormItem
label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.action_type')}
required
{...formItemLayout}
>
<Input htmlType="text" readOnly {...init('opType')} />
</FormItem>
<FormItem label="MD5:" required {...formItemLayout}>
<Input htmlType="text" readOnly {...init('md5')} />
</FormItem>
<FormItem
label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.configuration')}
required
{...formItemLayout}
>
<Input.TextArea htmlType="text" multiple rows={15} readOnly {...init('content')} />
</FormItem>
<FormItem label=" " {...formItemLayout}>
<Button
type="primary"
style={{ marginRight: 10 }}
onClick={this.onOpenConfirm.bind(this)}
>
{aliwareIntl.get('com.alibaba.nacos.page.configRollback.rollback')}
</Button>
<Button type="normal" onClick={this.goList.bind(this)}>
{aliwareIntl.get('com.alibaba.nacos.page.configRollback.return')}
</Button>
</FormItem>
</Form>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ConfigRollback;
export default ConfigRollback;

2
console/src/main/resources/static/src/pages/ConfigurationManagement/ConfigRollback/index.js
View File

@ -13,4 +13,4 @@
import ConfigRollback from './ConfigRollback';
export default ConfigRollback;
export default ConfigRollback;

530
console/src/main/resources/static/src/pages/ConfigurationManagement/ConfigSync/ConfigSync.js
View File

@ -17,258 +17,306 @@ import SuccessDialog from '../../../components/SuccessDialog';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ConfigSync extends React.Component {
constructor(props) {
super(props);
this.field = new Field(this);
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || '';
this.serverId = getParams('serverId') || '';
constructor(props) {
super(props);
this.field = new Field(this);
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || '';
this.serverId = getParams('serverId') || '';
this.state = {
configType: 0,
this.state = {
configType: 0,
envvalues: [],
commonvalue: [],
envComponent: '',
envGroups: [],
envlist: [],
loading: false,
showmore: false
};
this.codeValue = '';
this.mode = 'text';
this.ips = '';
}
componentDidMount() {
envvalues: [],
commonvalue: [],
envComponent: '',
envGroups: [],
envlist: [],
loading: false,
showmore: false,
};
this.codeValue = '';
this.mode = 'text';
this.ips = '';
}
this.getDataDetail();
// this.getDomain();
}
toggleMore() {
this.setState({
showmore: !this.state.showmore
});
}
getEnvList(value) {
this.setState({
envvalues: value
});
this.envs = value;
}
getDomain() {
let self = this;
request({
url: `/diamond-ops/env/domain`,
success: function (data) {
componentDidMount() {
this.getDataDetail();
// this.getDomain();
}
if (data.code === 200) {
let envGroups = data.data.envGroups;
toggleMore() {
this.setState({
showmore: !this.state.showmore,
});
}
self.setState({
envGroups: envGroups
});
}
}
});
}
getDataDetail() {
let self = this;
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || 'center';
let url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${this.dataId}/group/${this.group}/tenant/${this.tenant}?id=`;
if (this.tenant === 'global' || !this.tenant) {
url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${this.dataId}/group/${this.group}?id=`;
getEnvList(value) {
this.setState({
envvalues: value,
});
this.envs = value;
}
getDomain() {
const self = this;
request({
url: '/diamond-ops/env/domain',
success(data) {
if (data.code === 200) {
const { envGroups } = data.data;
self.setState({
envGroups,
});
}
request({
url: url,
beforeSend: function () {
self.openLoading();
},
success: function (result) {
if (result.code === 200) {
let data = result.data;
},
});
}
self.field.setValue('dataId', data.dataId);
//self.field.setValue('content', data.content);
self.field.setValue('appName', data.appName);
//self.field.setValue('envs', self.serverId);
self.field.setValue('group', data.group);
//self.field.setValue('md5', data.md5);
self.field.setValue('content', data.content || ''
//let envlist = [];
// let envvalues = [];
// for (let i = 0; i < data.envs.length; i++) {
// let obj = data.envs[i]
// envlist.push({
// label: obj.name,
// value: obj.serverId
// })
// envvalues.push(obj.serverId);
// }
getDataDetail() {
const self = this;
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || 'center';
let url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${
this.dataId
}/group/${this.group}/tenant/${this.tenant}?id=`;
if (this.tenant === 'global' || !this.tenant) {
url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${this.dataId}/group/${
this.group
}?id=`;
}
request({
url,
beforeSend() {
self.openLoading();
},
success(result) {
if (result.code === 200) {
const { data = {} } = result;
); let env = data.envs || [];
let envvalues = [];
let envlist = [];
for (let i = 0; i < env.length; i++) {
envlist.push({
value: env[i].serverId,
label: env[i].name
});
if (env[i].serverId === self.serverId) {
envvalues.push(self.serverId);
}
}
self.setState({
envlist: envlist,
envvalues: envvalues
// self.setState({
// envname: env.name,
// })
//self.serverId = env.serverId;
});
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.configsync.error'),
content: result.message
});
}
},
complete: function () {
self.closeLoading();
self.field.setValue('dataId', data.dataId);
// self.field.setValue('content', data.content);
self.field.setValue('appName', data.appName);
// self.field.setValue('envs', self.serverId);
self.field.setValue('group', data.group);
// self.field.setValue('md5', data.md5);
self.field.setValue('content', data.content || '');
const env = data.envs || [];
const envvalues = [];
const envlist = [];
for (let i = 0; i < env.length; i++) {
envlist.push({
value: env[i].serverId,
label: env[i].name,
});
if (env[i].serverId === self.serverId) {
envvalues.push(self.serverId);
}
});
}
}
self.setState({
envlist,
envvalues,
// self.setState({
// envname: env.name,
// })
// self.serverId = env.serverId;
});
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.configsync.error'),
content: result.message,
});
}
},
complete() {
self.closeLoading();
},
});
}
goList() {
goList() {
this.props.history.push(
`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`
);
}
//console.log(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`)
this.props.history.push(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`);
}
sync() {
let self = this;
let payload = {
dataId: this.field.getValue('dataId'),
appName: this.field.getValue('appName'),
group: this.field.getValue('group'),
content: this.field.getValue('content'),
betaIps: this.ips,
targetEnvs: this.envs
};
request({
type: 'put',
contentType: 'application/json',
url: `/diamond-ops/configList/serverId/${this.serverId}/dataId/${payload.dataId}/group/${payload.group}?id=`,
data: JSON.stringify(payload),
success: function (res) {
let _payload = {};
_payload.maintitle = aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration_main');
_payload.title = aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration');
_payload.content = '';
_payload.dataId = payload.dataId;
_payload.group = payload.group;
if (res.code === 200) {
_payload.isok = true;
} else {
_payload.isok = false;
_payload.message = res.message;
}
self.refs['success'].openDialog(_payload);
},
error: function () { }
});
}
syncResult() {
let dataId = this.field.getValue('dataId');
let gruop = this.field.getValue('group');
this.props.history.push(`/diamond-ops/static/pages/config-sync/index.html?serverId=center&dataId=${dataId}&group=${gruop}`);
}
changeEnv(values) {
this.targetEnvs = values;
this.setState({
envvalues: values
});
}
getIps(value) {
this.ips = value;
}
goResult() {
this.props.history.push(`/consistencyEfficacy?serverId=${this.serverId}&dataId=${this.dataId}&group=${this.group}`);
}
openLoading() {
this.setState({
loading: true
});
}
closeLoading() {
this.setState({
loading: false
});
}
render() {
const { init } = this.field;
const formItemLayout = {
labelCol: {
span: 2
},
wrapperCol: {
span: 22
}
};
return (
<div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative', width: '100%' }} visible={this.state.loading} tip="Loading..." color="#333">
<h1>{aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration')}</h1>
<Form field={this.field}>
<Form.Item label="Data ID:" required {...formItemLayout}>
<Input htmlType="text" disabled={'disabled'} {...init('dataId')} />
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>{this.state.showmore ? aliwareIntl.get('com.alibaba.nacos.page.configsync.retracted') : aliwareIntl.get('com.alibaba.nacos.page.configsync.for_more_advanced_options')}</a>
</div>
</Form.Item>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<Form.Item label="Group ID:" required {...formItemLayout}>
<Input htmlType="text" disabled={'disabled'} {...init('group')} />
</Form.Item>
<Form.Item label={aliwareIntl.get('com.alibaba.nacos.page.configsync.home')} required {...formItemLayout}>
<Input htmlType="text" disabled={'disabled'} {...init('appName')} />
</Form.Item>
</div>
<Form.Item label={aliwareIntl.get('com.alibaba.nacos.page.configsync.belongs_to_the_environment')} required {...formItemLayout}>
<Input htmlType="text" disabled={'disabled'} {...init('envs')} />
</Form.Item>
<Form.Item label={aliwareIntl.get('com.alibaba.nacos.page.configsync.configuration')} required {...formItemLayout}>
<Input.TextArea htmlType="text" multiple rows={15} disabled={'disabled'} {...init('content')} />
</Form.Item>
<Form.Item label={aliwareIntl.get('com.alibaba.nacos.page.configsync.target')} required {...formItemLayout}>
<div>
<Checkbox.Group value={this.state.envvalues} onChange={this.changeEnv.bind(this)} dataSource={this.state.envlist} />
</div>
</Form.Item>
<Form.Item label=" " {...formItemLayout}>
<div style={{ textAlign: 'right' }}>
<Button type="primary" onClick={this.sync.bind(this)} style={{ marginRight: 10 }}>{aliwareIntl.get('com.alibaba.nacos.page.configsync.sync')}</Button>
{}
<Button type="light" onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.configsync.return')}</Button>
</div>
</Form.Item>
</Form>
<SuccessDialog ref="success" />
</Loading>
</div>
sync() {
const self = this;
const payload = {
dataId: this.field.getValue('dataId'),
appName: this.field.getValue('appName'),
group: this.field.getValue('group'),
content: this.field.getValue('content'),
betaIps: this.ips,
targetEnvs: this.envs,
};
request({
type: 'put',
contentType: 'application/json',
url: `/diamond-ops/configList/serverId/${this.serverId}/dataId/${payload.dataId}/group/${
payload.group
}?id=`,
data: JSON.stringify(payload),
success(res) {
const _payload = {};
_payload.maintitle = aliwareIntl.get(
'com.alibaba.nacos.page.configsync.sync_configuration_main'
);
}
_payload.title = aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration');
_payload.content = '';
_payload.dataId = payload.dataId;
_payload.group = payload.group;
if (res.code === 200) {
_payload.isok = true;
} else {
_payload.isok = false;
_payload.message = res.message;
}
self.refs.success.openDialog(_payload);
},
error() {},
});
}
syncResult() {
const dataId = this.field.getValue('dataId');
const gruop = this.field.getValue('group');
this.props.history.push(
`/diamond-ops/static/pages/config-sync/index.html?serverId=center&dataId=${dataId}&group=${gruop}`
);
}
changeEnv(values) {
this.targetEnvs = values;
this.setState({
envvalues: values,
});
}
getIps(value) {
this.ips = value;
}
goResult() {
this.props.history.push(
`/consistencyEfficacy?serverId=${this.serverId}&dataId=${this.dataId}&group=${this.group}`
);
}
openLoading() {
this.setState({
loading: true,
});
}
closeLoading() {
this.setState({
loading: false,
});
}
render() {
const { init } = this.field;
const formItemLayout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 22,
},
};
return (
<div style={{ padding: 10 }}>
<Loading
shape="flower"
style={{ position: 'relative', width: '100%' }}
visible={this.state.loading}
tip="Loading..."
color="#333"
>
<h1>{aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration')}</h1>
<Form field={this.field}>
<Form.Item label="Data ID:" required {...formItemLayout}>
<Input htmlType="text" disabled={'disabled'} {...init('dataId')} />
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
{this.state.showmore
? aliwareIntl.get('com.alibaba.nacos.page.configsync.retracted')
: aliwareIntl.get(
'com.alibaba.nacos.page.configsync.for_more_advanced_options'
)}
</a>
</div>
</Form.Item>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<Form.Item label="Group ID:" required {...formItemLayout}>
<Input htmlType="text" disabled={'disabled'} {...init('group')} />
</Form.Item>
<Form.Item
label={aliwareIntl.get('com.alibaba.nacos.page.configsync.home')}
required
{...formItemLayout}
>
<Input htmlType="text" disabled={'disabled'} {...init('appName')} />
</Form.Item>
</div>
<Form.Item
label={aliwareIntl.get(
'com.alibaba.nacos.page.configsync.belongs_to_the_environment'
)}
required
{...formItemLayout}
>
<Input htmlType="text" disabled={'disabled'} {...init('envs')} />
</Form.Item>
<Form.Item
label={aliwareIntl.get('com.alibaba.nacos.page.configsync.configuration')}
required
{...formItemLayout}
>
<Input.TextArea
htmlType="text"
multiple
rows={15}
disabled={'disabled'}
{...init('content')}
/>
</Form.Item>
<Form.Item
label={aliwareIntl.get('com.alibaba.nacos.page.configsync.target')}
required
{...formItemLayout}
>
<div>
<Checkbox.Group
value={this.state.envvalues}
onChange={this.changeEnv.bind(this)}
dataSource={this.state.envlist}
/>
</div>
</Form.Item>
<Form.Item label=" " {...formItemLayout}>
<div style={{ textAlign: 'right' }}>
<Button type="primary" onClick={this.sync.bind(this)} style={{ marginRight: 10 }}>
{aliwareIntl.get('com.alibaba.nacos.page.configsync.sync')}
</Button>
{}
<Button type="light" onClick={this.goList.bind(this)}>
{aliwareIntl.get('com.alibaba.nacos.page.configsync.return')}
</Button>
</div>
</Form.Item>
</Form>
<SuccessDialog ref="success" />
</Loading>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ConfigSync;
export default ConfigSync;

2
console/src/main/resources/static/src/pages/ConfigurationManagement/ConfigSync/index.js
View File

@ -13,4 +13,4 @@
import ConfigSync from './ConfigSync';
export default ConfigSync;
export default ConfigSync;

1690
console/src/main/resources/static/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js
View File

File diff suppressed because it is too large Load Diff

2
console/src/main/resources/static/src/pages/ConfigurationManagement/ConfigurationManagement/index.js
View File

@ -13,4 +13,4 @@
import ConfigurationManagement from './ConfigurationManagement';
export default ConfigurationManagement;
export default ConfigurationManagement;

220
console/src/main/resources/static/src/pages/ConfigurationManagement/HistoryDetail/HistoryDetail.js
View File

@ -12,113 +12,137 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
import { Button, Field, Form, Input } from '@alifd/next';
const FormItem = Form.Item;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class HistoryDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
showmore: false
};
this.edasAppName = getParams('edasAppName');
this.edasAppId = getParams('edasAppId');
this.inApp = this.edasAppName;
this.field = new Field(this);
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.serverId = getParams('serverId') || 'center';
this.nid = getParams('nid') || '123509854';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
//this.params = window.location.hash.split('?')[1]||'';
this.typeMap = {
'U': aliwareIntl.get('com.alibaba.nacos.page.historyDetail.update'),
'I': aliwareIntl.get('com.alibaba.nacos.page.historyDetail.insert'),
'D': aliwareIntl.get('com.alibaba.nacos.page.historyDetail.delete')
};
}
static propTypes = {
history: PropTypes.object,
};
componentDidMount() {
this.getDataDetail();
}
toggleMore() {
this.setState({
showmore: !this.state.showmore
});
}
getDataDetail() {
let self = this;
constructor(props) {
super(props);
this.state = {
showmore: false,
};
this.edasAppName = getParams('edasAppName');
this.edasAppId = getParams('edasAppId');
this.inApp = this.edasAppName;
this.field = new Field(this);
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.serverId = getParams('serverId') || 'center';
this.nid = getParams('nid') || '123509854';
this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
// this.params = window.location.hash.split('?')[1]||'';
this.typeMap = {
U: aliwareIntl.get('com.alibaba.nacos.page.historyDetail.update'),
I: aliwareIntl.get('com.alibaba.nacos.page.historyDetail.insert'),
D: aliwareIntl.get('com.alibaba.nacos.page.historyDetail.delete'),
};
}
request({
url: `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`,
success: function (result) {
if (result != null) {
let data = result;
self.field.setValue('dataId', data.dataId);
self.field.setValue('content', data.content);
self.field.setValue('appName', self.inApp ? self.edasAppName : data.appName);
self.field.setValue('envs', self.serverId);
self.field.setValue('opType', self.typeMap[data.opType.trim()]);
self.field.setValue('group', data.group);
self.field.setValue('md5', data.md5);
}
}
});
}
goList() {
componentDidMount() {
this.getDataDetail();
}
//console.log(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`)
this.props.history.push(`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}&namespace=${this.tenant}`);
}
render() {
const init = this.field.init;
const formItemLayout = {
labelCol: {
fixedSpan: 6
},
wrapperCol: {
span: 18
}
};
return (
<div style={{ padding: 10 }}>
<h1>{aliwareIntl.get('com.alibaba.nacos.page.historyDetail.history_details')}</h1>
<Form field={this.field}>
toggleMore() {
this.setState({
showmore: !this.state.showmore,
});
}
<FormItem label="Data ID:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('dataId')} />
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>{this.state.showmore ? aliwareIntl.get('com.alibaba.nacos.page.historyDetail.recipient_from') : aliwareIntl.get('com.alibaba.nacos.page.historyDetail.more_advanced_options')}</a>
</div>
</FormItem>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<FormItem label="Group:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('group')} />
</FormItem>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.historyDetail.home')} {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('appName')} />
</FormItem>
</div>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.historyDetail.action_type')} required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('opType')} />
</FormItem>
<FormItem label="MD5:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('md5')} />
</FormItem>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.historyDetail.configure_content')} required {...formItemLayout}>
<Input.TextArea htmlType="text" multiple rows={15} readOnly={true} {...init('content')} />
</FormItem>
<FormItem label=" " {...formItemLayout}>
<Button type="primary" onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.historyDetail.return')}</Button>
getDataDetail() {
const self = this;
</FormItem>
</Form>
request({
url: `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`,
success(result) {
if (result != null) {
const data = result;
self.field.setValue('dataId', data.dataId);
self.field.setValue('content', data.content);
self.field.setValue('appName', self.inApp ? self.edasAppName : data.appName);
self.field.setValue('envs', self.serverId);
self.field.setValue('opType', self.typeMap[data.opType.trim()]);
self.field.setValue('group', data.group);
self.field.setValue('md5', data.md5);
}
},
});
}
goList() {
this.props.history.push(
`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${
this.dataId
}&namespace=${this.tenant}`
);
}
render() {
const { init } = this.field;
const formItemLayout = {
labelCol: {
fixedSpan: 6,
},
wrapperCol: {
span: 18,
},
};
return (
<div style={{ padding: 10 }}>
<h1>{aliwareIntl.get('com.alibaba.nacos.page.historyDetail.history_details')}</h1>
<Form field={this.field}>
<Form.Item label="Data ID:" required {...formItemLayout}>
<Input htmlType="text" readOnly {...init('dataId')} />
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
{this.state.showmore
? aliwareIntl.get('com.alibaba.nacos.page.historyDetail.recipient_from')
: aliwareIntl.get('com.alibaba.nacos.page.historyDetail.more_advanced_options')}
</a>
</div>
);
}
</Form.Item>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<Form.Item label="Group:" required {...formItemLayout}>
<Input htmlType="text" readOnly {...init('group')} />
</Form.Item>
<Form.Item
label={aliwareIntl.get('com.alibaba.nacos.page.historyDetail.home')}
{...formItemLayout}
>
<Input htmlType="text" readOnly {...init('appName')} />
</Form.Item>
</div>
<Form.Item
label={aliwareIntl.get('com.alibaba.nacos.page.historyDetail.action_type')}
required
{...formItemLayout}
>
<Input htmlType="text" readOnly {...init('opType')} />
</Form.Item>
<Form.Item label="MD5:" required {...formItemLayout}>
<Input htmlType="text" readOnly {...init('md5')} />
</Form.Item>
<Form.Item
label={aliwareIntl.get('com.alibaba.nacos.page.historyDetail.configure_content')}
required
{...formItemLayout}
>
<Input.TextArea htmlType="text" multiple rows={15} readOnly {...init('content')} />
</Form.Item>
<Form.Item label=" " {...formItemLayout}>
<Button type="primary" onClick={this.goList.bind(this)}>
{aliwareIntl.get('com.alibaba.nacos.page.historyDetail.return')}
</Button>
</Form.Item>
</Form>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default HistoryDetail;
export default HistoryDetail;

2
console/src/main/resources/static/src/pages/ConfigurationManagement/HistoryDetail/index.js
View File

@ -13,4 +13,4 @@
import HistoryDetail from './HistoryDetail';
export default HistoryDetail;
export default HistoryDetail;

653
console/src/main/resources/static/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js
View File

@ -17,302 +17,391 @@ import RegionGroup from '../../../components/RegionGroup';
import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class HistoryRollback extends React.Component {
constructor(props) {
super(props);
constructor(props) {
super(props);
this.field = new Field(this);
this.appName = getParams('appName') || '';
this.preAppName = this.appName;
this.group = getParams('group') || '';
this.preGroup = this.group;
this.field = new Field(this);
this.appName = getParams('appName') || '';
this.preAppName = this.appName;
this.group = getParams('group') || '';
this.preGroup = this.group;
this.dataId = getParams('dataId') || '';
this.preDataId = this.dataId;
this.serverId = getParams('serverId') || '';
this.state = {
value: "",
visible: false,
total: 0,
pageSize: 10,
currentPage: 1,
dataSource: [],
fieldValue: [],
showAppName: false,
showgroup: false,
dataId: this.dataId,
group: this.group,
appName: this.appName,
selectValue: [],
loading: false
};
let obj = {
dataId: this.dataId || '',
group: this.preGroup || '',
appName: this.appName || '',
serverId: this.serverId || ''
};
setParams(obj);
this.dataId = getParams('dataId') || '';
this.preDataId = this.dataId;
this.serverId = getParams('serverId') || '';
this.state = {
value: '',
visible: false,
total: 0,
pageSize: 10,
currentPage: 1,
dataSource: [],
fieldValue: [],
showAppName: false,
showgroup: false,
dataId: this.dataId,
group: this.group,
appName: this.appName,
selectValue: [],
loading: false,
};
const obj = {
dataId: this.dataId || '',
group: this.preGroup || '',
appName: this.appName || '',
serverId: this.serverId || '',
};
setParams(obj);
}
componentDidMount() {
this.field.setValue('group', this.group);
this.field.setValue('dataId', this.dataId);
// this.getData()
}
openLoading() {
this.setState({
loading: true,
});
}
closeLoading() {
this.setState({
loading: false,
});
}
/**
* 回车事件
*/
keyDownSearch(e) {
const theEvent = e || window.event;
const code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code === 13) {
this.getData();
return false;
}
return true;
}
UNSAFE_componentWillMount() {
window.addEventListener('keydown', this.keyDownSearch.bind(this), false);
}
componentWillUnmount() {
window.removeEventListener('keydown', this.keyDownSearch.bind(this));
}
onSearch() {}
onChange() {}
cleanAndGetData(needclean = false) {
if (needclean) {
this.dataId = '';
this.group = '';
this.setState({
group: '',
dataId: '',
});
setParams({
group: '',
dataId: '',
});
}
componentDidMount() {
this.field.setValue('group', this.group);
this.field.setValue('dataId', this.dataId);
//this.getData()
}
openLoading() {
this.setState({
loading: true
});
}
closeLoading() {
this.setState({
loading: false
});
}
/**
* 回车事件
*/
keyDownSearch(e) {
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code === 13) {
this.getData();
return false;
this.getData();
}
getData(pageNo = 1) {
const self = this;
this.serverId = getParams('serverId') || '';
if (!this.dataId) return false;
request({
beforeSend() {
self.openLoading();
},
url: `/nacos/v1/cs/history?search=accurate&dataId=${this.dataId}&group=${
this.group
}&&pageNo=${pageNo}&pageSize=${this.state.pageSize}`,
success(data) {
if (data != null) {
self.setState({
dataSource: data.pageItems || [],
total: data.totalCount,
currentPage: data.pageNumber,
});
}
return true;
}
UNSAFE_componentWillMount() {
window.addEventListener('keydown', this.keyDownSearch.bind(this), false);
}
componentWillUnMount() {
window.removeEventListener('keydown', this.keyDownSearch.bind(this));
}
onSearch() { }
},
complete() {
self.closeLoading();
},
});
}
onChange() { }
cleanAndGetData(needclean = false) {
if (needclean) {
this.dataId = '';
this.group = '';
this.setState({
group: '',
dataId: ''
});
setParams({
group: '',
dataId: ''
});
}
showMore() {}
this.getData();
}
getData(pageNo = 1) {
let self = this;
this.serverId = getParams('serverId') || '';
if (!this.dataId) return false;
request({
beforeSend: function () {
self.openLoading();
},
url: `/nacos/v1/cs/history?search=accurate&dataId=${this.dataId}&group=${this.group}&&pageNo=${pageNo}&pageSize=${this.state.pageSize}`,
success: function (data) {
if (data != null) {
self.setState({
dataSource: data.pageItems || [],
total: data.totalCount,
currentPage: data.pageNumber
});
}
},
complete: function () {
self.closeLoading();
}
});
}
showMore() { }
renderCol(value, index, record) {
return <div>
<a onClick={this.goDetail.bind(this, record)} style={{ marginRight: 5 }}>{aliwareIntl.get('com.alibaba.nacos.page.historyRollback.details')}</a>
<span style={{ marginRight: 5 }}>|</span>
<a style={{ marginRight: 5 }} onClick={this.goRollBack.bind(this, record)}>{aliwareIntl.get('com.alibaba.nacos.page.historyRollback.rollback')}</a>
</div>;
}
changePage(value) {
this.setState({
currentPage: value
});
this.getData(value);
}
onInputUpdate() { }
chooseFieldChange(fieldValue) {
renderCol(value, index, record) {
return (
<div>
<a onClick={this.goDetail.bind(this, record)} style={{ marginRight: 5 }}>
{aliwareIntl.get('com.alibaba.nacos.page.historyRollback.details')}
</a>
<span style={{ marginRight: 5 }}>|</span>
<a style={{ marginRight: 5 }} onClick={this.goRollBack.bind(this, record)}>
{aliwareIntl.get('com.alibaba.nacos.page.historyRollback.rollback')}
</a>
</div>
);
}
this.setState({
fieldValue
});
}
showSelect(value) {
this.setState({
selectValue: value
});
if (value.indexOf('appName') !== -1) {
this.setState({
showAppName: true
});
} else {
this.setState({
showAppName: false
});
}
if (value.indexOf('group') !== -1) {
this.setState({
showgroup: true
});
} else {
this.setState({
showgroup: false
});
}
this.chooseFieldChange(value);
}
getAppName(value) {
this.appName = value;
this.setState({
appName: value
});
}
getDataId(value) {
this.dataId = value;
this.setState({
dataId: value
});
}
getGroup(value) {
changePage(value) {
this.setState({
currentPage: value,
});
this.getData(value);
}
this.group = value;
this.setState({
group: value
});
}
selectAll() {
this.dataId = this.field.getValue("dataId");
this.group = this.field.getValue("group");
if (!this.dataId || !this.group) {
return false;
}
if (this.dataId !== this.preDataId) {
setParams('dataId', this.dataId);
this.preDataId = this.dataId;
}
if (this.group !== this.preGroup) {
setParams('group', this.preGroup);
this.preGroup = this.group;
}
this.getData();
}
resetAll() {
this.dataId = '';
this.group = '';
this.setState({
selectValue: [],
dataId: '',
appName: '',
group: '',
showAppName: false,
showgroup: false
});
setParams({
group: '',
dataId: ''
});
}
chooseEnv(value) {
console.log(value);
}
renderLastTime(value, index, record) {
return aliwareIntl.intlTimeFormat(record.lastModifiedTime);
}
goDetail(record) {
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
this.props.history.push(`/historyDetail?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&nid=${record.id}&namespace=${this.tenant}`);
}
goRollBack(record) {
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
this.props.history.push(`/configRollback?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&nid=${record.id}&namespace=${this.tenant}&nid=${record.id}`);
}
render() {
const pubnodedata = aliwareIntl.get('pubnodata');
onInputUpdate() {}
const locale = {
empty: pubnodedata
};
chooseFieldChange(fieldValue) {
this.setState({
fieldValue,
});
}
const { init } = this.field;
this.init = init;
showSelect(value) {
this.setState({
selectValue: value,
});
if (value.indexOf('appName') !== -1) {
this.setState({
showAppName: true,
});
} else {
this.setState({
showAppName: false,
});
}
if (value.indexOf('group') !== -1) {
this.setState({
showgroup: true,
});
} else {
this.setState({
showgroup: false,
});
}
this.chooseFieldChange(value);
}
return (
<div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative', width: "100%" }} visible={this.state.loading} tip="Loading..." color="#333">
<RegionGroup left={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.to_configure')} namespaceCallBack={this.cleanAndGetData.bind(this)} />
{/**<div className={'namespacewrapper'}>
getAppName(value) {
this.appName = value;
this.setState({
appName: value,
});
}
getDataId(value) {
this.dataId = value;
this.setState({
dataId: value,
});
}
getGroup(value) {
this.group = value;
this.setState({
group: value,
});
}
selectAll() {
this.dataId = this.field.getValue('dataId');
this.group = this.field.getValue('group');
if (!this.dataId || !this.group) {
return false;
}
if (this.dataId !== this.preDataId) {
setParams('dataId', this.dataId);
this.preDataId = this.dataId;
}
if (this.group !== this.preGroup) {
setParams('group', this.preGroup);
this.preGroup = this.group;
}
this.getData();
}
resetAll() {
this.dataId = '';
this.group = '';
this.setState({
selectValue: [],
dataId: '',
appName: '',
group: '',
showAppName: false,
showgroup: false,
});
setParams({
group: '',
dataId: '',
});
}
chooseEnv(value) {}
renderLastTime(value, index, record) {
return aliwareIntl.intlTimeFormat(record.lastModifiedTime);
}
goDetail(record) {
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
this.props.history.push(
`/historyDetail?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${
record.group
}&nid=${record.id}&namespace=${this.tenant}`
);
}
goRollBack(record) {
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
this.props.history.push(
`/configRollback?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${
record.group
}&nid=${record.id}&namespace=${this.tenant}&nid=${record.id}`
);
}
render() {
const pubnodedata = aliwareIntl.get('pubnodata');
const locale = {
empty: pubnodedata,
};
const { init } = this.field;
this.init = init;
return (
<div style={{ padding: 10 }}>
<Loading
shape="flower"
style={{ position: 'relative', width: '100%' }}
visible={this.state.loading}
tip="Loading..."
color="#333"
>
<RegionGroup
left={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.to_configure')}
namespaceCallBack={this.cleanAndGetData.bind(this)}
/>
{/** <div className={'namespacewrapper'}>
<NameSpaceList namespaceCallBack={this.cleanAndGetData.bind(this)} />
</div>**/}
</div>* */}
<div>
<Form inline field={this.field}>
<div>
<Form inline field={this.field}>
<Form.Item label="Data ID:" required>
<Input
placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.dataid')}
style={{ width: 200 }}
{...this.init('dataId', {
rules: [
{
required: true,
message: aliwareIntl.get(
'com.alibaba.nacos.page.form.Data_Id_can_not_be_empty'
),
},
],
})}
/>
</Form.Item>
<Form.Item label="Group:" required>
<Input
placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.group')}
style={{ width: 200 }}
{...this.init('group', {
rules: [
{
required: true,
message: aliwareIntl.get(
'com.alibaba.nacos.page.listeningToQuery.group_can_not_be_empty'
),
},
],
})}
/>
</Form.Item>
<Form.Item label="Data ID:" required>
<Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.dataid')}
style={{ width: 200 }}
{...this.init('dataId', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.page.form.Data_Id_can_not_be_empty')
}]
})} />
</Form.Item>
<Form.Item label="Group:" required>
<Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.group')} style={{ width: 200 }} {...this.init('group', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.group_can_not_be_empty')
}]
})} />
</Form.Item>
<Form.Item label="">
<Form.Submit validate type="primary" onClick={this.selectAll.bind(this)} style={{ marginRight: 10 }}>{aliwareIntl.get('com.alibaba.nacos.page.historyrollback.query')}</Form.Submit>
</Form.Item>
</Form>
</div>
<div style={{ position: 'relative', width: '100%', overflow: 'hidden', height: '40px' }}>
<h3 style={{ height: 30, width: '100%', lineHeight: '30px', padding: 0, margin: 0, paddingLeft: 10, borderLeft: '3px solid #09c' }}>{aliwareIntl.get('com.alibaba.nacos.page.historyRollback.queryresult')}<strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>{aliwareIntl.get('com.alibaba.nacos.page.historyRollback.article_meet')}</h3>
</div>
<div>
<Table dataSource={this.state.dataSource} locale={locale} language={aliwareIntl.currentLanguageCode}>
<Table.Column title="Data ID" dataIndex="dataId" />
<Table.Column title="Group" dataIndex="group" />
<Table.Column title={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.last_update_time')} dataIndex="time" cell={this.renderLastTime.bind(this)} />
<Table.Column title={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.operation')} cell={this.renderCol.bind(this)} />
</Table>
</div>
<div style={{ marginTop: 10, textAlign: 'right' }}>
<Pagination current={this.state.currentPage} language={aliwareIntl.currentLanguageCode} total={this.state.total} pageSize={this.state.pageSize} onChange={this.changePage.bind(this)} />,
</div>
</Loading>
</div>
);
}
<Form.Item label="">
<Form.Submit
validate
type="primary"
onClick={this.selectAll.bind(this)}
style={{ marginRight: 10 }}
>
{aliwareIntl.get('com.alibaba.nacos.page.historyrollback.query')}
</Form.Submit>
</Form.Item>
</Form>
</div>
<div style={{ position: 'relative', width: '100%', overflow: 'hidden', height: '40px' }}>
<h3
style={{
height: 30,
width: '100%',
lineHeight: '30px',
padding: 0,
margin: 0,
paddingLeft: 10,
borderLeft: '3px solid #09c',
}}
>
{aliwareIntl.get('com.alibaba.nacos.page.historyRollback.queryresult')}
<strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
{aliwareIntl.get('com.alibaba.nacos.page.historyRollback.article_meet')}
</h3>
</div>
<div>
<Table
dataSource={this.state.dataSource}
locale={locale}
language={aliwareIntl.currentLanguageCode}
>
<Table.Column title="Data ID" dataIndex="dataId" />
<Table.Column title="Group" dataIndex="group" />
<Table.Column
title={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.last_update_time')}
dataIndex="time"
cell={this.renderLastTime.bind(this)}
/>
<Table.Column
title={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.operation')}
cell={this.renderCol.bind(this)}
/>
</Table>
</div>
<div style={{ marginTop: 10, textAlign: 'right' }}>
<Pagination
current={this.state.currentPage}
language={aliwareIntl.currentLanguageCode}
total={this.state.total}
pageSize={this.state.pageSize}
onChange={this.changePage.bind(this)}
/>
,
</div>
</Loading>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default HistoryRollback;
export default HistoryRollback;

2
console/src/main/resources/static/src/pages/ConfigurationManagement/HistoryRollback/index.js
View File

@ -13,4 +13,4 @@
import HistoryRollback from './HistoryRollback';
export default HistoryRollback;
export default HistoryRollback;

497
console/src/main/resources/static/src/pages/ConfigurationManagement/ListeningToQuery/ListeningToQuery.js
View File

@ -16,208 +16,321 @@ import RegionGroup from '../../../components/RegionGroup';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
import { Field, Form, Grid, Input, Loading, Pagination, Select, Table } from '@alifd/next';
const FormItem = Form.Item;
const { Row, Col } = Grid;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ListeningToQuery extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
visible: false,
loading: false,
total: 0,
pageSize: 10,
currentPage: 1,
dataSource: []
};
this.field = new Field(this);
this.group = getParams('group') || '';
this.dataId = getParams('dataId') || '';
this.serverId = getParams('serverId') || '';
this.tenant = getParams('namespace') || '';
}
constructor(props) {
super(props);
this.state = {
value: '',
visible: false,
loading: false,
total: 0,
pageSize: 10,
currentPage: 1,
dataSource: [],
};
this.field = new Field(this);
this.group = getParams('group') || '';
this.dataId = getParams('dataId') || '';
this.serverId = getParams('serverId') || '';
this.tenant = getParams('namespace') || '';
}
componentDidMount() {
this.field.setValue('type', 0);
this.field.setValue('group', this.group);
this.field.setValue('dataId', this.dataId);
}
componentDidMount() {
this.field.setValue('type', 0);
this.field.setValue('group', this.group);
this.field.setValue('dataId', this.dataId);
}
onSearch() { }
onSearch() {}
onChange() { }
openLoading() {
this.setState({
loading: true
});
onChange() {}
openLoading() {
this.setState({
loading: true,
});
}
closeLoading() {
this.setState({
loading: false,
});
}
queryTrackQuery = () => {
const self = this;
let queryUrl = '';
const type = this.getValue('type');
if (type === 1) {
const ip = this.getValue('ip');
queryUrl = `/nacos/v1/cs/listener?ip=${ip}`;
const tenant = window.nownamespace || getParams('namespace') || '';
if (tenant) {
queryUrl += `&tenant=${tenant}`;
}
} else {
const dataId = this.getValue('dataId');
const group = this.getValue('group');
if (!dataId || !group) return false;
queryUrl = `/nacos/v1/cs/configs/listener?dataId=${dataId}&group=${group}`;
}
closeLoading() {
this.setState({
loading: false
});
}
queryTrackQuery() {
var self = this;
var queryUrl = "";
var type = this.getValue('type');
if (type === 1) {
var ip = this.getValue('ip');
queryUrl = `/nacos/v1/cs/listener?ip=${ip}`;
let tenant = window.nownamespace || getParams('namespace') || '';
if (tenant) {
queryUrl += '&tenant=' + tenant;
request({
url: queryUrl,
beforeSend() {
self.openLoading();
},
success(data) {
if (data.collectStatus === 200) {
const dataSoureTmp = [];
const status = data.lisentersGroupkeyStatus;
for (const key in status) {
if (type === 1) {
const obj = {};
let [dataId, group] = key.split('+');
obj.dataId = dataId;
obj.group = group;
obj.md5 = status[key];
dataSoureTmp.push(obj);
} else {
const obj = {};
obj.ip = key;
obj.md5 = status[key];
dataSoureTmp.push(obj);
}
} else {
var dataId = this.getValue('dataId');
var group = this.getValue('group');
if (!dataId || !group) return false;
queryUrl = `/nacos/v1/cs/configs/listener?dataId=${dataId}&group=${group}`;
}
self.setState({
dataSource: dataSoureTmp || [],
total: data.length,
});
}
request({
url: queryUrl,
beforeSend: function () {
self.openLoading();
},
success: function (data) {
if (data.collectStatus === 200) {
let dataSoureTmp = [];
let status = data.lisentersGroupkeyStatus;
for (var key in status) {
if (type === 1) {
let obj = {};
obj.dataId = key.split("+")[0];
obj.group = key.split("+")[1];
obj.md5 = status[key];
dataSoureTmp.push(obj);
} else {
let obj = {};
obj.ip = key;
obj.md5 = status[key];
dataSoureTmp.push(obj);
}
}
self.setState({
dataSource: dataSoureTmp || [],
total: data.length
});
}
},
complete: function () {
self.closeLoading();
}
});
}
},
complete() {
self.closeLoading();
},
});
};
showMore() { }
changePage(value) {
this.setState({
currentPage: value
});
}
resetSearch() {
this.field.reset();
this.forceUpdate();
}
renderStatus(values, index, record) {
return <div>{record.pushStatus === true ? <span style={{ color: 'green' }}>{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.success')}</span> : <span style={{ color: 'red' }}>{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.failure')}</span>}
</div>;
}
getQueryLater() {
setTimeout(() => {
//子组件可能优先于父组件所以延迟执行
this.queryTrackQuery();
});
}
render() {
const { init, getValue } = this.field;
this.init = init;
this.getValue = getValue;
const pubnodedata = aliwareIntl.get('pubnodata');
showMore() {}
const locale = {
empty: pubnodedata
};
const selectDataSource = [
{
label: aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.configuration'),
value: 0
},
{
label: "IP",
value: 1
}
]
return (
<div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative' }} visible={this.state.loading} tip="Loading..." color="#333">
<RegionGroup left={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.listener_query')} namespaceCallBack={this.getQueryLater.bind(this)} />
{/**<div className={'namespacewrapper'}>
<NameSpaceList namespaceCallBack={this.getQueryLater.bind(this)} />
</div>**/}
<Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
<Col span="24">
<Form inline field={this.field}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_dimension')}>
<Select dataSource={selectDataSource} style={{ width: 200 }} {...this.init('type')} language={aliwareIntl.currentLanguageCode} />
</FormItem>
<FormItem label="Data ID:" style={{
display: this.getValue('type') === 0 ? '' : 'none'
}} required>
<Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_enter_the_dataid')}
style={{ width: 200 }}
{...this.init('dataId', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.page.form.Data_Id_can_not_be_empty')
}]
})} />
</FormItem>
<FormItem label="Group:" style={{
display: this.getValue('type') === 0 ? '' : 'none'
}} required>
<Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_input_group')} style={{ width: 200 }} {...this.init('group', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.group_can_not_be_empty')
}]
})} />
</FormItem>
<FormItem label="IP:" style={{
display: this.getValue('type') === 0 ? 'none' : ''
}}>
<Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_input_ip')} style={{ width: 200, boxSize: 'border-box' }} {...this.init('ip')} />
</FormItem>
<FormItem label="">
<Form.Submit validate type="primary" onClick={this.queryTrackQuery.bind(this)} style={{ marginRight: 10 }}>{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query')}</Form.Submit>
{}
</FormItem>
</Form>
</Col>
</Row>
<div style={{ position: 'relative' }}>
<h3 style={{ height: 28, lineHeight: '28px', paddingLeft: 10, borderLeft: '3px solid #09c', margin: 0, marginBottom: 10 }}>{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_results:_query')}<strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.article_meet_the_requirements_of_the_configuration.')}</h3>
</div>
<Row style={{ padding: 0 }}>
<Col span="24" style={{ padding: 0 }}>
{this.getValue('type') === 1 ? <Table dataSource={this.state.dataSource} fixedHeader={true} maxBodyHeight={500} locale={locale} language={aliwareIntl.currentLanguageCode}>
<Table.Column title="Data ID" dataIndex="dataId" />
<Table.Column title="Group" dataIndex="group" />
<Table.Column title="MD5" dataIndex="md5" />
</Table> : <Table dataSource={this.state.dataSource} fixedHeader={true} maxBodyHeight={400} locale={locale} language={aliwareIntl.currentLanguageCode}>
<Table.Column title="IP" dataIndex="ip" />
<Table.Column title="MD5" dataIndex="md5" />
</Table>}
</Col>
</Row>
<div style={{ marginTop: 10, textAlign: 'right' }}>
<Pagination current={this.state.currentPage} total={this.state.total} pageSize={this.state.pageSize} onChange={this.changePage.bind(this)} language={aliwareIntl.currentLanguageCode} />,
</div>
</Loading>
</div>
);
}
changePage = value => {
this.setState({
currentPage: value,
});
};
resetSearch() {
this.field.reset();
this.forceUpdate();
}
renderStatus(values, index, record) {
return (
<div>
{record.pushStatus === true ? (
<span style={{ color: 'green' }}>
{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.success')}
</span>
) : (
<span style={{ color: 'red' }}>
{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.failure')}
</span>
)}
</div>
);
}
getQueryLater = () => {
setTimeout(() => {
// 子组件可能优先于父组件所以延迟执行
this.queryTrackQuery();
});
};
render() {
const { init, getValue } = this.field;
this.init = init;
this.getValue = getValue;
const pubnodedata = aliwareIntl.get('pubnodata');
const locale = {
empty: pubnodedata,
};
const selectDataSource = [
{
label: aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.configuration'),
value: 0,
},
{
label: 'IP',
value: 1,
},
];
return (
<div style={{ padding: 10 }}>
<Loading
shape="flower"
style={{ position: 'relative' }}
visible={this.state.loading}
tip="Loading..."
color="#333"
>
<RegionGroup
left={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.listener_query')}
namespaceCallBack={this.getQueryLater}
/>
<Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
<Col span="24">
<Form inline field={this.field}>
<FormItem
label={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_dimension')}
>
<Select
dataSource={selectDataSource}
style={{ width: 200 }}
{...this.init('type')}
language={aliwareIntl.currentLanguageCode}
/>
</FormItem>
<FormItem
label="Data ID:"
style={{
display: this.getValue('type') === 0 ? '' : 'none',
}}
required
>
<Input
placeholder={aliwareIntl.get(
'com.alibaba.nacos.page.listeningToQuery.please_enter_the_dataid'
)}
style={{ width: 200 }}
{...this.init('dataId', {
rules: [
{
required: true,
message: aliwareIntl.get(
'com.alibaba.nacos.page.form.Data_Id_can_not_be_empty'
),
},
],
})}
/>
</FormItem>
<FormItem
label="Group:"
style={{
display: this.getValue('type') === 0 ? '' : 'none',
}}
required
>
<Input
placeholder={aliwareIntl.get(
'com.alibaba.nacos.page.listeningToQuery.please_input_group'
)}
style={{ width: 200 }}
{...this.init('group', {
rules: [
{
required: true,
message: aliwareIntl.get(
'com.alibaba.nacos.page.listeningToQuery.group_can_not_be_empty'
),
},
],
})}
/>
</FormItem>
<FormItem
label="IP:"
style={{
display: this.getValue('type') === 0 ? 'none' : '',
}}
>
<Input
placeholder={aliwareIntl.get(
'com.alibaba.nacos.page.listeningToQuery.please_input_ip'
)}
style={{ width: 200, boxSize: 'border-box' }}
{...this.init('ip')}
/>
</FormItem>
<FormItem label="">
<Form.Submit
validate
type="primary"
onClick={this.queryTrackQuery}
style={{ marginRight: 10 }}
>
{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query')}
</Form.Submit>
{}
</FormItem>
</Form>
</Col>
</Row>
<div style={{ position: 'relative' }}>
<h3
style={{
height: 28,
lineHeight: '28px',
paddingLeft: 10,
borderLeft: '3px solid #09c',
margin: 0,
marginBottom: 10,
}}
>
{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_results:_query')}
<strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
{aliwareIntl.get(
'com.alibaba.nacos.page.listeningToQuery.article_meet_the_requirements_of_the_configuration.'
)}
</h3>
</div>
<Row style={{ padding: 0 }}>
<Col span="24" style={{ padding: 0 }}>
{this.getValue('type') === 1 ? (
<Table
dataSource={this.state.dataSource}
fixedHeader
maxBodyHeight={500}
locale={locale}
language={aliwareIntl.currentLanguageCode}
>
<Table.Column title="Data ID" dataIndex="dataId" />
<Table.Column title="Group" dataIndex="group" />
<Table.Column title="MD5" dataIndex="md5" />
</Table>
) : (
<Table
dataSource={this.state.dataSource}
fixedHeader
maxBodyHeight={400}
locale={locale}
language={aliwareIntl.currentLanguageCode}
>
<Table.Column title="IP" dataIndex="ip" />
<Table.Column title="MD5" dataIndex="md5" />
</Table>
)}
</Col>
</Row>
<div style={{ marginTop: 10, textAlign: 'right' }}>
<Pagination
current={this.state.currentPage}
total={this.state.total}
pageSize={this.state.pageSize}
onChange={this.changePage}
language={aliwareIntl.currentLanguageCode}
/>
,
</div>
</Loading>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ListeningToQuery;
export default ListeningToQuery;

2
console/src/main/resources/static/src/pages/ConfigurationManagement/ListeningToQuery/index.js
View File

@ -13,4 +13,4 @@
import ListeningToQuery from './ListeningToQuery';
export default ListeningToQuery;
export default ListeningToQuery;

885
console/src/main/resources/static/src/pages/ConfigurationManagement/NewConfig/NewConfig.js
View File

@ -16,399 +16,536 @@ import $ from 'jquery';
import SuccessDialog from '../../../components/SuccessDialog';
import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
import { Balloon, Button, Dialog, Field, Form, Icon, Input, Loading, Message, Select, Radio } from '@alifd/next';
import {
Balloon,
Button,
Dialog,
Field,
Form,
Icon,
Input,
Loading,
Message,
Select,
Radio,
} from '@alifd/next';
const FormItem = Form.Item;
const { Group: RadioGroup } = Radio;
const { AutoComplete: Combobox } = Select;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class NewConfig extends React.Component {
constructor(props) {
super(props);
this.field = new Field(this);
this.edasAppName = getParams('edasAppName') || '';
this.edasAppId = getParams('edasAppId') || '';
this.inApp = this.edasAppName;
this.field.setValue('appName', this.inApp ? this.edasAppName : '');
this.inEdas = window.globalConfig.isParentEdas();
this.dataId = getParams('dataId') || '';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.searchDataId = getParams('searchDataId') || '';
this.searchGroup = getParams('searchGroup') || '';
this.state = {
configType: 'text',
codeValue: ``,
envname: '',
targetEnvName: '',
groups: [],
groupNames: [],
envlist: [],
tagLst: [],
config_tags: [],
envvalues: [],
showmore: false,
loading: false,
encrypt: false,
addonBefore: '',
showGroupWarning: false
};
this.codeValue = '';
this.mode = 'text';
this.ips = '';
}
constructor(props) {
super(props);
this.field = new Field(this);
this.edasAppName = getParams('edasAppName') || '';
this.edasAppId = getParams('edasAppId') || '';
this.inApp = this.edasAppName;
this.field.setValue('appName', this.inApp ? this.edasAppName : '');
this.inEdas = window.globalConfig.isParentEdas();
this.dataId = getParams('dataId') || '';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.searchDataId = getParams('searchDataId') || '';
this.searchGroup = getParams('searchGroup') || '';
this.state = {
configType: 'text',
codeValue: '',
envname: '',
targetEnvName: '',
groups: [],
groupNames: [],
envlist: [],
tagLst: [],
config_tags: [],
envvalues: [],
showmore: false,
loading: false,
encrypt: false,
addonBefore: '',
showGroupWarning: false,
};
this.codeValue = '';
this.mode = 'text';
this.ips = '';
}
componentDidMount() {
this.betaips = document.getElementById('betaips');
//this.createCodeMirror('text', '');
this.chontenttab = document.getElementById('chontenttab'); //diff标签
this.tenant = getParams('namespace') || '';
this.field.setValue('group', this.group);
if (!window.monaco) {
window.importEditor(() => {
this.initMoacoEditor();
});
} else {
this.initMoacoEditor();
}
componentDidMount() {
this.betaips = document.getElementById('betaips');
// this.createCodeMirror('text', '');
this.chontenttab = document.getElementById('chontenttab'); // diff标签
this.tenant = getParams('namespace') || '';
this.field.setValue('group', this.group);
if (!window.monaco) {
window.importEditor(() => {
this.initMoacoEditor();
});
} else {
this.initMoacoEditor();
}
changeModel(type) {
if (!this.monacoEditor) {
$('#container').empty();
this.monacoEditor = window.monaco.editor.create(document.getElementById('container'), {
model: null
});
return;
}
let oldModel = this.monacoEditor.getModel();
let oldValue = this.monacoEditor.getValue();
let newModel = window.monaco.editor.createModel(oldValue, type);
this.monacoEditor.setModel(newModel);
//this.monacoEditor.setValue('xx')
if (oldModel) {
oldModel.dispose();
}
}
changeModel(type) {
if (!this.monacoEditor) {
$('#container').empty();
this.monacoEditor = window.monaco.editor.create(document.getElementById('container'), {
model: null,
});
return;
}
initMoacoEditor() {
const oldModel = this.monacoEditor.getModel();
const oldValue = this.monacoEditor.getValue();
const newModel = window.monaco.editor.createModel(oldValue, type);
this.monacoEditor.setModel(newModel);
// this.monacoEditor.setValue('xx')
if (oldModel) {
oldModel.dispose();
}
}
initMoacoEditor() {
this.monacoEditor = window.monaco.editor.create(document.getElementById('container'), {
value: this.codeValue,
language: this.state.configType,
codeLens: true,
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
lineNumbersMinChars: true,
theme: 'vs-dark',
wordWrapColumn: 120,
folding: true,
showFoldingControls: 'always',
wordWrap: 'wordWrapColumn',
cursorStyle: 'line',
automaticLayout: true,
});
}
this.monacoEditor = window.monaco.editor.create(document.getElementById('container'), {
value: this.codeValue,
language: this.state.configType,
codeLens: true,
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
lineNumbersMinChars: true,
theme: 'vs-dark',
wordWrapColumn: 120,
folding: true,
showFoldingControls: 'always',
wordWrap: 'wordWrapColumn',
cursorStyle: 'line',
automaticLayout: true
setGroup(value) {
this.group = value || '';
this.field.setValue('group', this.group);
if (this.inEdas) {
this.setState({
showGroupWarning: this.group !== '' && this.state.groupNames.indexOf(value) < 0,
});
}
}
setConfigTags(value) {
if (value.length > 5) {
value.pop();
}
value.forEach((v, i) => {
if (v.indexOf(',') !== -1 || v.indexOf('=') !== -1) {
value.splice(i, 1);
}
});
this.setState({
config_tags: value,
});
}
onInputUpdate(value) {
if (this.inputtimmer) {
clearTimeout(this.inputtimmer);
}
this.inputtimmer = setTimeout(() => {
const { tagLst } = this.state;
let hastag = false;
tagLst.forEach((v, i) => {
if (v.value === value) {
hastag = true;
}
});
if (!hastag) {
tagLst.push({
value,
label: value,
time: Math.random(),
});
}
this.setState({ tagLst });
}, 500);
}
toggleMore() {
this.setState({
showmore: !this.state.showmore,
});
}
goList() {
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || '';
this.props.history.push(
`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${
this.searchDataId
}&namespace=${this.tenant}`
);
}
openLoading() {
this.setState({
loading: true,
});
}
closeLoading() {
this.setState({
loading: false,
});
}
newChangeConfig(value) {
this.setState({
configType: value,
});
this.changeModel(value);
}
setCodeValue(value) {
this.setState({
codeValue: value,
});
}
publishConfig() {
this.field.validate((errors, values) => {
if (errors) {
return;
}
let content = '';
const self = this;
if (this.monacoEditor) {
content = this.monacoEditor.getValue();
} else {
content = this.codeValue;
}
if (!content) {
return;
}
this.tenant = getParams('namespace') || '';
const payload = {
dataId: self.state.addonBefore + this.field.getValue('dataId'),
group: this.field.getValue('group'),
content,
desc: this.field.getValue('desc'),
config_tags: this.state.config_tags.join(),
type: this.state.configType,
appName: this.inApp ? this.edasAppId : this.field.getValue('appName'),
tenant: this.tenant,
};
this.serverId = getParams('serverId') || 'center';
const url = '/nacos/v1/cs/configs';
request({
type: 'post',
contentType: 'application/x-www-form-urlencoded',
url,
data: payload,
beforeSend: () => {
this.openLoading();
},
success(res) {
const _payload = {};
_payload.maintitle = aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing_main');
_payload.title = aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing');
_payload.content = '';
_payload.dataId = payload.dataId;
_payload.group = payload.group;
if (res === true) {
self.group = payload.group;
self.dataId = payload.dataId;
setParams({ group: payload.group, dataId: payload.dataId }); // 设置参数
_payload.isok = true;
} else {
_payload.isok = false;
_payload.message = res.message;
}
self.refs.success.openDialog(_payload);
},
complete() {
self.closeLoading();
},
error(res) {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: aliwareIntl.get('com.alibaba.nacos.page.newconfig.publish_failed'),
});
self.closeLoading();
},
});
});
}
changeEnv(values) {
this.targetEnvs = values;
this.setState({
envvalues: values,
});
}
changeBeta(selected) {
if (selected) {
this.betaips.style.display = 'block';
} else {
this.betaips.style.display = 'none';
}
}
getIps(value) {
this.ips = value;
}
setGroup(value) {
this.group = value || '';
this.field.setValue('group', this.group);
if (this.inEdas) {
this.setState({
showGroupWarning: this.group !== '' && this.state.groupNames.indexOf(value) < 0
});
}
validateChart(rule, value, callback) {
const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) {
callback(aliwareIntl.get('com.alibaba.nacos.page.newconfig.do_not_ente'));
} else {
callback();
}
}
setConfigTags(value) {
if (value.length > 5) {
value.pop();
}
value.forEach((v, i) => {
if (v.indexOf(',') !== -1 || v.indexOf('=') !== -1) {
value.splice(i, 1);
}
});
this.setState({
config_tags: value
});
}
render() {
const { init } = this.field;
const formItemLayout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 22,
},
};
onInputUpdate(value) {
if (this.inputtimmer) {
clearTimeout(this.inputtimmer);
}
this.inputtimmer = setTimeout(() => {
let tagLst = this.state.tagLst,
hastag = false;
tagLst.forEach((v, i) => {
if (v.value === value) {
hastag = true;
// const list = [{
// value: 0,
// label: 'TEXT'
// }, {
// value: 1,
// label: 'JSON'
// }, {
// value: 2,
// label: 'XML'
// }];
const list = [
{
value: 'text',
label: 'TEXT',
},
{
value: 'json',
label: 'JSON',
},
{
value: 'xml',
label: 'XML',
},
{
value: 'yaml',
label: 'YAML',
},
{
value: 'text/html',
label: 'HTML',
},
{
value: 'properties',
label: 'Properties',
},
];
return (
<div style={{ padding: 10 }}>
<Loading
shape={'flower'}
tip={'Loading...'}
style={{ width: '100%', position: 'relative' }}
visible={this.state.loading}
color={'#333'}
>
<h1>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing')}</h1>
<Form field={this.field}>
<FormItem label={'Data ID:'} required {...formItemLayout}>
<Input
{...init('dataId', {
rules: [
{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.page.newconfig'),
},
{
max: 255,
message: aliwareIntl.get(
'com.alibaba.nacos.page.newconfig.dataId_is_not_empty'
),
},
{ validator: this.validateChart.bind(this) },
],
})}
addonTextBefore={
this.state.addonBefore ? (
<div style={{ minWidth: 100, color: '#373D41' }}>{this.state.addonBefore}</div>
) : null
}
});
if (!hastag) {
tagLst.push({
value: value,
label: value,
time: Math.random()
});
}
this.setState({ tagLst: tagLst });
}, 500);
}
/>
</FormItem>
<FormItem label={'Group:'} required {...formItemLayout}>
<Combobox
style={{ width: '100%' }}
size={'large'}
hasArrow
dataSource={this.state.groups}
placeholder={aliwareIntl.get('com.alibaba.nacos.page.newconfig.group_placeholder')}
defaultValue={this.group}
{...init('group', {
rules: [
{
required: true,
message: aliwareIntl.get(
'com.alibaba.nacos.page.newconfig.the_more_advanced'
),
},
{
max: 127,
message: aliwareIntl.get(
'com.alibaba.nacos.page.newconfig.group_is_not_empty'
),
},
{ validator: this.validateChart.bind(this) },
],
})}
onChange={this.setGroup.bind(this)}
hasClear
language={aliwareIntl.currentLanguageCode}
/>
</FormItem>
<FormItem
label={' '}
{...formItemLayout}
style={{ display: this.state.showGroupWarning ? 'block' : 'none' }}
>
<Message type={'warning'} size={'medium'} animation={false}>
{aliwareIntl.get(
'nacos.page.newconfig.Note_You_are_to_be_a_custom_packet_the_new_configuration,_make_sure_that_the_client_use_the_Pandora_version_higher_than_3._4._0,_otherwise_it_may_read_less_than_the_configuration.0'
)}
</Message>
</FormItem>
<FormItem label={''} {...formItemLayout}>
<div>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
{this.state.showmore
? aliwareIntl.get('com.alibaba.nacos.page.newconfig.Data_ID_length')
: aliwareIntl.get('com.alibaba.nacos.page.newconfig.collapse')}
</a>
</div>
</FormItem>
toggleMore() {
this.setState({
showmore: !this.state.showmore
});
}
goList() {
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || '';
//console.log(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`)
this.props.history.push(`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${this.searchDataId}&namespace=${this.tenant}`);
}
openLoading() {
this.setState({
loading: true
});
}
closeLoading() {
this.setState({
loading: false
});
}
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<FormItem label={aliwareIntl.get('nacos.page.newconfig.Tags')} {...formItemLayout}>
<Select
size={'medium'}
hasArrow
style={{ width: '100%', height: '100%!important' }}
autoWidth
multiple
mode="tag"
filterLocal
placeholder={aliwareIntl.get(
'nacos.page.configurationManagement.Please_enter_tag'
)}
dataSource={this.state.tagLst}
value={this.state.config_tags}
onChange={this.setConfigTags.bind(this)}
hasClear
language={aliwareIntl.currentLanguageCode}
/>
</FormItem>
newChangeConfig(value) {
this.setState({
configType: value
});
this.changeModel(value);
}
setCodeValue(value) {
this.setState({
codeValue: value
});
}
publishConfig() {
this.field.validate((errors, values) => {
if (errors) {
return;
}
let content = '';
let self = this;
if (this.monacoEditor) {
content = this.monacoEditor.getValue();
} else {
content = this.codeValue;
}
if (!content) {
return;
}
this.tenant = getParams('namespace') || '';
let payload = {
dataId: self.state.addonBefore + this.field.getValue('dataId'),
group: this.field.getValue('group'),
content: content,
desc: this.field.getValue('desc'),
config_tags: this.state.config_tags.join(),
type: this.state.configType,
appName: this.inApp ? this.edasAppId : this.field.getValue('appName'),
tenant: this.tenant
};
this.serverId = getParams('serverId') || 'center';
let url = `/nacos/v1/cs/configs`;
request({
type: 'post',
contentType: 'application/x-www-form-urlencoded',
url: url,
data: payload,
beforeSend: () => {
this.openLoading();
},
success: function (res) {
let _payload = {};
_payload.maintitle = aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing_main');
_payload.title = aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing');
_payload.content = '';
_payload.dataId = payload.dataId;
_payload.group = payload.group;
if (res === true) {
self.group = payload.group;
self.dataId = payload.dataId;
setParams({ group: payload.group, dataId: payload.dataId }); //设置参数
_payload.isok = true;
} else {
_payload.isok = false;
_payload.message = res.message;
}
self.refs['success'].openDialog(_payload);
},
complete: function () {
self.closeLoading();
},
error: function (res) {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: aliwareIntl.get('com.alibaba.nacos.page.newconfig.publish_failed')
});
self.closeLoading();
}
});
});
}
changeEnv(values) {
this.targetEnvs = values;
this.setState({
envvalues: values
});
}
changeBeta(selected) {
if (selected) {
this.betaips.style.display = 'block';
} else {
this.betaips.style.display = 'none';
}
}
getIps(value) {
this.ips = value;
}
validateChart(rule, value, callback) {
const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) {
callback(aliwareIntl.get('com.alibaba.nacos.page.newconfig.do_not_ente'));
} else {
callback();
}
}
render() {
const { init } = this.field;
const formItemLayout = {
labelCol: {
span: 2
},
wrapperCol: {
span: 22
}
};
// const list = [{
// value: 0,
// label: 'TEXT'
// }, {
// value: 1,
// label: 'JSON'
// }, {
// value: 2,
// label: 'XML'
// }];
const list = [{
value: 'text',
label: 'TEXT'
}, {
value: 'json',
label: 'JSON'
}, {
value: 'xml',
label: 'XML'
}, {
value: 'yaml',
label: 'YAML'
}, {
value: 'text/html',
label: 'HTML'
}, {
value: 'properties',
label: 'Properties'
}];
return (
<div style={{ padding: 10 }}>
<Loading shape={"flower"} tip={"Loading..."} style={{ width: '100%', position: 'relative' }} visible={this.state.loading} color={"#333"}>
<h1>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing')}</h1>
<Form field={this.field}>
<FormItem label={"Data ID:"} required {...formItemLayout}>
<Input {...init('dataId', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.page.newconfig')
}, {
max: 255,
message: aliwareIntl.get('com.alibaba.nacos.page.newconfig.dataId_is_not_empty')
}, { validator: this.validateChart.bind(this) }]
})} addonTextBefore={this.state.addonBefore ? <div style={{ minWidth: 100, color: "#373D41" }}>{this.state.addonBefore}</div> : null} />
</FormItem>
<FormItem label={"Group:"} required {...formItemLayout}>
<Combobox style={{ width: '100%' }} size={"large"} hasArrow dataSource={this.state.groups} placeholder={aliwareIntl.get("com.alibaba.nacos.page.newconfig.group_placeholder")} defaultValue={this.group} {...init('group', {
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.page.newconfig.the_more_advanced')
}, {
max: 127,
message: aliwareIntl.get('com.alibaba.nacos.page.newconfig.group_is_not_empty')
}, { validator: this.validateChart.bind(this) }]
})} onChange={this.setGroup.bind(this)} hasClear language={aliwareIntl.currentLanguageCode}>
</Combobox>
</FormItem>
<FormItem label={" "} {...formItemLayout} style={{ display: this.state.showGroupWarning ? "block" : "none" }}>
<Message type={'warning'} size={'medium'} animation={false}>{aliwareIntl.get('nacos.page.newconfig.Note_You_are_to_be_a_custom_packet_the_new_configuration,_make_sure_that_the_client_use_the_Pandora_version_higher_than_3._4._0,_otherwise_it_may_read_less_than_the_configuration.0')}</Message>
</FormItem>
<FormItem label={""} {...formItemLayout}>
<div>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>{this.state.showmore ? aliwareIntl.get('com.alibaba.nacos.page.newconfig.Data_ID_length') : aliwareIntl.get('com.alibaba.nacos.page.newconfig.collapse')}</a>
</div>
</FormItem>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<FormItem label={aliwareIntl.get('nacos.page.newconfig.Tags')} {...formItemLayout}>
<Select size={"medium"} hasArrow style={{ width: '100%', height: '100%!important' }} autoWidth={true} multiple={true} mode="tag" filterLocal={true} placeholder={aliwareIntl.get('nacos.page.configurationManagement.Please_enter_tag')} dataSource={this.state.tagLst} value={this.state.config_tags} onChange={this.setConfigTags.bind(this)} hasClear language={aliwareIntl.currentLanguageCode}>
</Select>
</FormItem>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.newconfig.Group_ID_cannot_be_longer')} {...formItemLayout}>
<Input {...init('appName')} readOnly={this.inApp} />
</FormItem>
</div>
<FormItem label={aliwareIntl.get('nacos.page.newconfig.Description')} {...formItemLayout}>
<Input.TextArea htmlType={"text"} multiple rows={3} {...init('desc')} />
</FormItem>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.newconfig.the_target_environment')} {...formItemLayout}>
<RadioGroup dataSource={list} value={this.state.configType} onChange={this.newChangeConfig.bind(this)} />
</FormItem>
<FormItem label={<span>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.configuration_format')}<Balloon trigger={<Icon type={"help"} size={'small'} style={{ color: '#1DC11D', marginRight: 5, verticalAlign: 'middle', marginTop: 2 }} />} align={"t"} style={{ marginRight: 5 }} triggerType={"hover"}>
<p>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.configure_contents_of')}</p>
<p>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.full_screen')}</p>
</Balloon>:</span>} required {...formItemLayout}>
<div id={"container"} style={{ width: '100%', height: 300 }}></div>
</FormItem>
<FormItem {...formItemLayout} label={""}>
<div style={{ textAlign: 'right' }}>
<Button type={"primary"} style={{ marginRight: 10 }} onClick={this.publishConfig.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.esc_exit')}</Button>
<Button type={"light"} onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.release')}</Button>
</div>
</FormItem>
</Form>
<SuccessDialog ref={"success"} />
</Loading>
<FormItem
label={aliwareIntl.get(
'com.alibaba.nacos.page.newconfig.Group_ID_cannot_be_longer'
)}
{...formItemLayout}
>
<Input {...init('appName')} readOnly={this.inApp} />
</FormItem>
</div>
);
}
<FormItem
label={aliwareIntl.get('nacos.page.newconfig.Description')}
{...formItemLayout}
>
<Input.TextArea htmlType={'text'} multiple rows={3} {...init('desc')} />
</FormItem>
<FormItem
label={aliwareIntl.get('com.alibaba.nacos.page.newconfig.the_target_environment')}
{...formItemLayout}
>
<RadioGroup
dataSource={list}
value={this.state.configType}
onChange={this.newChangeConfig.bind(this)}
/>
</FormItem>
<FormItem
label={
<span>
{aliwareIntl.get('com.alibaba.nacos.page.newconfig.configuration_format')}
<Balloon
trigger={
<Icon
type={'help'}
size={'small'}
style={{
color: '#1DC11D',
marginRight: 5,
verticalAlign: 'middle',
marginTop: 2,
}}
/>
}
align={'t'}
style={{ marginRight: 5 }}
triggerType={'hover'}
>
<p>
{aliwareIntl.get('com.alibaba.nacos.page.newconfig.configure_contents_of')}
</p>
<p>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.full_screen')}</p>
</Balloon>
:
</span>
}
required
{...formItemLayout}
>
<div id={'container'} style={{ width: '100%', height: 300 }} />
</FormItem>
<FormItem {...formItemLayout} label={''}>
<div style={{ textAlign: 'right' }}>
<Button
type={'primary'}
style={{ marginRight: 10 }}
onClick={this.publishConfig.bind(this)}
>
{aliwareIntl.get('com.alibaba.nacos.page.newconfig.esc_exit')}
</Button>
<Button type={'light'} onClick={this.goList.bind(this)}>
{aliwareIntl.get('com.alibaba.nacos.page.newconfig.release')}
</Button>
</div>
</FormItem>
</Form>
<SuccessDialog ref={'success'} />
</Loading>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default NewConfig;
export default NewConfig;

2
console/src/main/resources/static/src/pages/ConfigurationManagement/NewConfig/index.js
View File

@ -13,4 +13,4 @@
import NewConfig from './NewConfig';
export default NewConfig;
export default NewConfig;

566
console/src/main/resources/static/src/pages/NameSpace/NameSpace.js
View File

@ -20,273 +20,347 @@ import EditorNameSpace from '../../components/EditorNameSpace';
import { getParams, setParams, request, aliwareIntl } from '../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class NameSpace extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
defaultNamespace: "",
dataSource: []
constructor(props) {
super(props);
this.state = {
loading: false,
defaultNamespace: '',
dataSource: [],
};
}
};
}
componentDidMount() {
this.getNameSpaces(0);
}
componentDidMount() {
this.getNameSpaces(0);
}
getNameSpaces(delayTime = 2000) {
let self = this;
// let serverId = getParams('serverId') || 'center';
self.openLoading();
setTimeout(() => {
request({
type: 'get',
beforeSend: function () { },
url: `/nacos/v1/console/namespaces`,
success: res => {
if (res.code === 200) {
let data = res.data || [];
window.namespaceList = data;
getNameSpaces(delayTime = 2000) {
const self = this;
// let serverId = getParams('serverId') || 'center';
self.openLoading();
setTimeout(() => {
request({
type: 'get',
beforeSend() {},
url: '/nacos/v1/console/namespaces',
success: res => {
if (res.code === 200) {
const data = res.data || [];
window.namespaceList = data;
for (var i = 0; i < data.length; i++) {
if (data[i].type === 1) {
this.setState({
defaultNamespace: data[i].namespace
});
}
}
this.setState({
dataSource: data
});
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.namespace.prompt'),
content: res.message
});
}
},
complete: function () {
self.closeLoading();
},
error: res => {
window.namespaceList = [{
"namespace": "",
"namespaceShowName": "公共空间",
"type": 0
}];
}
});
}, delayTime);
}
openLoading() {
this.setState({
loading: true
});
}
closeLoading() {
this.setState({
loading: false
});
}
detailNamespace(record) {
let namespace = record.namespace; //获取ak,sk
request({
url: `/nacos/v1/console/namespaces?show=all&namespaceId=${namespace}`,
beforeSend: () => {
this.openLoading();
},
success: res => {
if (res !== null) {
Dialog.alert({
style: { width: "500px" },
needWrapper: false,
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('nacos.page.namespace.Namespace_details'),
content: <div>
<div style={{ marginTop: '10px' }}>
<p>
<span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('nacos.page.namespace.namespace_name')}</span>
<span style={{ color: '#c7254e' }}>
{res.namespaceShowName}
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('nacos.page.namespace.namespace_ID')}</span>
<span style={{ color: '#c7254e' }}>
{res.namespace}
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('com.alibaba.nacos.page.namespace.configuration')}</span>
<span style={{ color: '#c7254e' }}>
{res.configCount} / {res.quota}
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('nacos.page.configdetail.Description')}</span>
<span style={{ color: '#c7254e' }}>
{res.namespaceDesc}
</span>
</p>
</div>
</div>
});
}
},
complete: () => {
this.closeLoading();
}
});
}
removeNamespace(record) {
// let serverId = getParams('serverId') || 'center';
Dialog.confirm({
title: aliwareIntl.get('nacos.page.namespace.remove_the_namespace'),
content: <div style={{ marginTop: '-20px' }}>
<h3>{aliwareIntl.get('nacos.page.namespace.sure_you_want_to_delete_the_following_namespaces?')}</h3>
<p>
<span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('nacos.page.namespace.namespace_name')}</span>
<span style={{ color: '#c7254e' }}>
{record.namespaceShowName}
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('nacos.page.namespace.namespace_ID')}</span>
<span style={{ color: '#c7254e' }}>
{record.namespace}
</span>
</p>
</div>,
language: aliwareIntl.currentLanguageCode || 'zh-cn',
onOk: () => {
let url = `/nacos/v1/console/namespaces?namespaceId=${record.namespace}`;
request({
url: url,
type: 'delete',
success: res => {
let _payload = {};
_payload.title = aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.configuration_management');
if (res === true) {
let urlnamespace = getParams('namespace');
if (record.namespace === urlnamespace) {
setParams('namespace', this.state.defaultNamespace);
}
Dialog.confirm({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: aliwareIntl.get('nacos.page.namespace._Remove_the_namespace_success'),
title: aliwareIntl.get('nacos.page.namespace.deleted_successfully')
});
} else {
Dialog.confirm({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: res.message,
title: "删除失败"
});
}
this.getNameSpaces();
}
for (let i = 0; i < data.length; i++) {
if (data[i].type === 1) {
this.setState({
defaultNamespace: data[i].namespace,
});
}
}
});
}
refreshNameSpace() {
request({
type: 'get',
url: `/nacos/v1/console/namespaces`,
success: res => {
if (res.code === 200) {
window.namespaceList = res.data;
}
this.setState({
dataSource: data,
});
} else {
Dialog.alert({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.namespace.prompt'),
content: res.message,
});
}
},
complete() {
self.closeLoading();
},
error: res => {
window.namespaceList = [
{
namespace: '',
namespaceShowName: '公共空间',
type: 0,
},
error: res => {
window.namespaceList = [{
"namespace": "",
"namespaceShowName": "公共空间",
"type": 0
}];;
];
},
});
}, delayTime);
}
openLoading() {
this.setState({
loading: true,
});
}
closeLoading() {
this.setState({
loading: false,
});
}
detailNamespace(record) {
const { namespace } = record; // 获取ak,sk
request({
url: `/nacos/v1/console/namespaces?show=all&namespaceId=${namespace}`,
beforeSend: () => {
this.openLoading();
},
success: res => {
if (res !== null) {
Dialog.alert({
style: { width: '500px' },
needWrapper: false,
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('nacos.page.namespace.Namespace_details'),
content: (
<div>
<div style={{ marginTop: '10px' }}>
<p>
<span style={{ color: '#999', marginRight: 5 }}>
{aliwareIntl.get('nacos.page.namespace.namespace_name')}
</span>
<span style={{ color: '#c7254e' }}>{res.namespaceShowName}</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>
{aliwareIntl.get('nacos.page.namespace.namespace_ID')}
</span>
<span style={{ color: '#c7254e' }}>{res.namespace}</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>
{aliwareIntl.get('com.alibaba.nacos.page.namespace.configuration')}
</span>
<span style={{ color: '#c7254e' }}>
{res.configCount} / {res.quota}
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>
{aliwareIntl.get('nacos.page.configdetail.Description')}
</span>
<span style={{ color: '#c7254e' }}>{res.namespaceDesc}</span>
</p>
</div>
</div>
),
});
}
},
complete: () => {
this.closeLoading();
},
});
}
removeNamespace(record) {
// let serverId = getParams('serverId') || 'center';
Dialog.confirm({
title: aliwareIntl.get('nacos.page.namespace.remove_the_namespace'),
content: (
<div style={{ marginTop: '-20px' }}>
<h3>
{aliwareIntl.get(
'nacos.page.namespace.sure_you_want_to_delete_the_following_namespaces?'
)}
</h3>
<p>
<span style={{ color: '#999', marginRight: 5 }}>
{aliwareIntl.get('nacos.page.namespace.namespace_name')}
</span>
<span style={{ color: '#c7254e' }}>{record.namespaceShowName}</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>
{aliwareIntl.get('nacos.page.namespace.namespace_ID')}
</span>
<span style={{ color: '#c7254e' }}>{record.namespace}</span>
</p>
</div>
),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
onOk: () => {
const url = `/nacos/v1/console/namespaces?namespaceId=${record.namespace}`;
request({
url,
type: 'delete',
success: res => {
const _payload = {};
_payload.title = aliwareIntl.get(
'com.alibaba.nacos.page.configurationManagement.configuration_management'
);
if (res === true) {
const urlnamespace = getParams('namespace');
if (record.namespace === urlnamespace) {
setParams('namespace', this.state.defaultNamespace);
}
Dialog.confirm({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: aliwareIntl.get('nacos.page.namespace._Remove_the_namespace_success'),
title: aliwareIntl.get('nacos.page.namespace.deleted_successfully'),
});
} else {
Dialog.confirm({
language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: res.message,
title: '删除失败',
});
}
this.getNameSpaces();
},
});
}
},
});
}
openToEdit(record) {
this.refs['editgroup'].openDialog(record);
}
renderOption(value, index, record) {
let _delinfo = <a onClick={this.removeNamespace.bind(this, record)} style={{ marginRight: 10 }}>{aliwareIntl.get('com.alibaba.nacos.page.namespace.delete')}</a>;
if (record.type === 1 || record.type === 0) {
_delinfo = <span style={{ marginRight: 10, cursor: 'not-allowed' }} disabled={true}>{aliwareIntl.get('com.alibaba.nacos.page.namespace.delete')}</span>;
refreshNameSpace() {
request({
type: 'get',
url: '/nacos/v1/console/namespaces',
success: res => {
if (res.code === 200) {
window.namespaceList = res.data;
}
let _detailinfo = <a onClick={this.detailNamespace.bind(this, record)} style={{ marginRight: 10 }}>{aliwareIntl.get('nacos.page.namespace.details')}</a>;
},
error: res => {
window.namespaceList = [
{
namespace: '',
namespaceShowName: '公共空间',
type: 0,
},
];
},
});
}
let _editinfo = <a onClick={this.openToEdit.bind(this, record)}>{aliwareIntl.get('com.alibaba.nacos.page.namespace.edit')}</a>;
if (record.type === 0 || record.type === 1) {
_editinfo = <span style={{ marginRight: 10, cursor: 'not-allowed' }} disabled={true}>{aliwareIntl.get('com.alibaba.nacos.page.namespace.edit')}</span>;
}
return <div>
{_detailinfo}
{_delinfo}
{_editinfo}
</div>;
openToEdit(record) {
this.refs.editgroup.openDialog(record);
}
renderOption(value, index, record) {
let _delinfo = (
<a onClick={this.removeNamespace.bind(this, record)} style={{ marginRight: 10 }}>
{aliwareIntl.get('com.alibaba.nacos.page.namespace.delete')}
</a>
);
if (record.type === 1 || record.type === 0) {
_delinfo = (
<span style={{ marginRight: 10, cursor: 'not-allowed' }} disabled>
{aliwareIntl.get('com.alibaba.nacos.page.namespace.delete')}
</span>
);
}
addNameSpace() {
this.refs['newnamespace'].openDialog(this.state.dataSource);
const _detailinfo = (
<a onClick={this.detailNamespace.bind(this, record)} style={{ marginRight: 10 }}>
{aliwareIntl.get('nacos.page.namespace.details')}
</a>
);
let _editinfo = (
<a onClick={this.openToEdit.bind(this, record)}>
{aliwareIntl.get('com.alibaba.nacos.page.namespace.edit')}
</a>
);
if (record.type === 0 || record.type === 1) {
_editinfo = (
<span style={{ marginRight: 10, cursor: 'not-allowed' }} disabled>
{aliwareIntl.get('com.alibaba.nacos.page.namespace.edit')}
</span>
);
}
renderName(value, index, record) {
return (
<div>
{_detailinfo}
{_delinfo}
{_editinfo}
</div>
);
}
let name = record.namespaceShowName;
if (record.type === 0) {
name = aliwareIntl.get('com.alibaba.nacos.page.namespace.public');
}
return <div>{name}</div>;
addNameSpace() {
this.refs.newnamespace.openDialog(this.state.dataSource);
}
renderName(value, index, record) {
let name = record.namespaceShowName;
if (record.type === 0) {
name = aliwareIntl.get('com.alibaba.nacos.page.namespace.public');
}
renderConfigCount(value, index, record) {
return <div>{value} / {record.quota}</div>;
}
render() {
const pubnodedata = aliwareIntl.get('pubnodata');
return <div>{name}</div>;
}
const locale = {
empty: pubnodedata
};
return <div style={{ padding: 10 }} className='clearfix'>
<RegionGroup left={aliwareIntl.get('nacos.page.namespace.Namespace')} />
<div className="fusion-demo">
<Loading shape="flower" tip="Loading..." color="#333" style={{ width: '100%' }} visible={this.state.loading}>
<div>
<div style={{ textAlign: 'right', marginBottom: 10 }}>
renderConfigCount(value, index, record) {
return (
<div>
{value} / {record.quota}
</div>
);
}
<Button type="primary" style={{ marginRight: 0, marginTop: 10 }} onClick={this.addNameSpace.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.namespace.add')}</Button>
</div>
<div>
<Table dataSource={this.state.dataSource} locale={locale} language={aliwareIntl.currentLanguageCode}>
<Table.Column title={aliwareIntl.get('com.alibaba.nacos.page.namespace.namespace_names')} dataIndex="namespaceShowName" cell={this.renderName.bind(this)} />
<Table.Column title={aliwareIntl.get('nacos.page.namespace.namespace_number')} dataIndex="namespace" />
<Table.Column title={aliwareIntl.get('com.alibaba.nacos.page.namespace.configuration')} dataIndex="configCount" cell={this.renderConfigCount.bind(this)} />
render() {
const pubnodedata = aliwareIntl.get('pubnodata');
<Table.Column title={aliwareIntl.get('com.alibaba.nacos.page.namespace.operation')} dataIndex="time" cell={this.renderOption.bind(this)} />
</Table>
</div>
</div>
const locale = {
empty: pubnodedata,
};
return (
<div style={{ padding: 10 }} className="clearfix">
<RegionGroup left={aliwareIntl.get('nacos.page.namespace.Namespace')} />
<div className="fusion-demo">
<Loading
shape="flower"
tip="Loading..."
color="#333"
style={{ width: '100%' }}
visible={this.state.loading}
>
<div>
<div style={{ textAlign: 'right', marginBottom: 10 }}>
<Button
type="primary"
style={{ marginRight: 0, marginTop: 10 }}
onClick={this.addNameSpace.bind(this)}
>
{aliwareIntl.get('com.alibaba.nacos.page.namespace.add')}
</Button>
</div>
<div>
<Table
dataSource={this.state.dataSource}
locale={locale}
language={aliwareIntl.currentLanguageCode}
>
<Table.Column
title={aliwareIntl.get('com.alibaba.nacos.page.namespace.namespace_names')}
dataIndex="namespaceShowName"
cell={this.renderName.bind(this)}
/>
<Table.Column
title={aliwareIntl.get('nacos.page.namespace.namespace_number')}
dataIndex="namespace"
/>
<Table.Column
title={aliwareIntl.get('com.alibaba.nacos.page.namespace.configuration')}
dataIndex="configCount"
cell={this.renderConfigCount.bind(this)}
/>
<DeleteDialog ref="delete" />
<NewNameSpace ref={'newnamespace'} getNameSpaces={this.getNameSpaces.bind(this)} />
<EditorNameSpace ref={'editgroup'} getNameSpaces={this.getNameSpaces.bind(this)} />
</Loading>
<Table.Column
title={aliwareIntl.get('com.alibaba.nacos.page.namespace.operation')}
dataIndex="time"
cell={this.renderOption.bind(this)}
/>
</Table>
</div>
</div>
</div>;
}
<DeleteDialog ref="delete" />
<NewNameSpace ref={'newnamespace'} getNameSpaces={this.getNameSpaces.bind(this)} />
<EditorNameSpace ref={'editgroup'} getNameSpaces={this.getNameSpaces.bind(this)} />
</Loading>
</div>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default NameSpace;
export default NameSpace;

2
console/src/main/resources/static/src/pages/NameSpace/index.js
View File

@ -13,4 +13,4 @@
import NameSpace from './NameSpace';
export default NameSpace;
export default NameSpace;

293
console/src/main/resources/static/src/pages/ServiceManagement/ServiceDetail/EditClusterDialog.js
View File

@ -14,156 +14,161 @@
import React from 'react';
import { request } from '../../../globalLib';
import { Dialog, Form, Input, Switch, Select, Message } from '@alifd/next';
import { I18N, DIALOG_FORM_LAYOUT } from './constant'
import { I18N, DIALOG_FORM_LAYOUT } from './constant';
const FormItem = Form.Item;
const Option = Select.Option
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class EditClusterDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
editCluster: {},
editClusterDialogVisible: false
constructor(props) {
super(props);
this.state = {
editCluster: {},
editClusterDialogVisible: false,
};
this.show = this.show.bind(this);
}
show(_editCluster) {
let editCluster = _editCluster;
const { metadata = {} } = editCluster;
editCluster.metadataText = Object.keys(metadata)
.map(k => `${k}=${metadata[k]}`)
.join(',');
this.setState({
editCluster,
editClusterDialogVisible: true,
});
}
hide() {
this.setState({ editClusterDialogVisible: false });
}
onConfirm() {
const { openLoading, closeLoading, getServiceDetail } = this.props;
const {
name,
serviceName,
metadataText,
defaultCheckPort,
useIPPort4Check,
healthChecker,
} = this.state.editCluster;
request({
method: 'POST',
url: '/nacos/v1/ns/cluster/update',
data: {
serviceName,
clusterName: name,
metadata: metadataText,
checkPort: defaultCheckPort,
useInstancePort4Check: useIPPort4Check,
healthChecker: JSON.stringify(healthChecker),
},
dataType: 'text',
beforeSend: () => openLoading(),
success: res => {
if (res !== 'ok') {
Message.error(res);
return;
}
this.show = this.show.bind(this)
}
this.hide();
getServiceDetail();
},
complete: () => closeLoading(),
});
}
show(editCluster) {
const { metadata = {} } = editCluster
editCluster.metadataText = Object.keys(metadata).map(k => `${k}=${metadata[k]}`).join(',')
this.setState({
editCluster,
editClusterDialogVisible: true
})
}
onChangeCluster(changeVal) {
const { editCluster = {} } = this.state;
this.setState({
editCluster: Object.assign({}, editCluster, changeVal),
});
}
hide() {
this.setState({ editClusterDialogVisible: false })
}
onConfirm() {
const { openLoading, closeLoading, getServiceDetail } = this.props
const { name, serviceName, metadataText, defaultCheckPort, useIPPort4Check, healthChecker } = this.state.editCluster
request({
method: 'POST',
url: '/nacos/v1/ns/cluster/update',
data: {
serviceName,
clusterName: name,
metadata: metadataText,
checkPort: defaultCheckPort,
useInstancePort4Check: useIPPort4Check,
healthChecker: JSON.stringify(healthChecker)
},
dataType: 'text',
beforeSend: () => openLoading(),
success: res => {
if (res !== 'ok') {
Message.error(res)
return
}
this.hide()
getServiceDetail()
},
complete: () => closeLoading()
})
}
onChangeCluster(changeVal) {
const { editCluster = {} } = this.state
this.setState({
editCluster: Object.assign({}, editCluster, changeVal)
})
}
render() {
const { editCluster = {}, editClusterDialogVisible } = this.state
const {
healthChecker = {},
useIPPort4Check,
defaultCheckPort = '80',
metadataText = ''
} = editCluster
const { type, path, headers } = healthChecker
const healthCheckerChange = changeVal => this.onChangeCluster({
healthChecker: Object.assign({}, healthChecker, changeVal)
})
return (
<Dialog
className="cluster-edit-dialog"
title={I18N.UPDATE_CLUSTER}
visible={editClusterDialogVisible}
onOk={() => this.onConfirm()}
onCancel={() => this.hide()}
onClose={() => this.hide()}
render() {
const { editCluster = {}, editClusterDialogVisible } = this.state;
const {
healthChecker = {},
useIPPort4Check,
defaultCheckPort = '80',
metadataText = '',
} = editCluster;
const { type, path, headers } = healthChecker;
const healthCheckerChange = changeVal =>
this.onChangeCluster({
healthChecker: Object.assign({}, healthChecker, changeVal),
});
return (
<Dialog
className="cluster-edit-dialog"
title={I18N.UPDATE_CLUSTER}
visible={editClusterDialogVisible}
onOk={() => this.onConfirm()}
onCancel={() => this.hide()}
onClose={() => this.hide()}
>
<Form {...DIALOG_FORM_LAYOUT}>
<Form.Item label={`${I18N.CHECK_TYPE}:`}>
<Select
className="in-select"
defaultValue={type}
onChange={type => healthCheckerChange({ type })}
>
<Form {...DIALOG_FORM_LAYOUT}>
<FormItem label={`${I18N.CHECK_TYPE}:`}>
<Select
className="in-select"
defaultValue={type}
onChange={type => healthCheckerChange({ type })}
>
<Option value="TCP">TCP</Option>
<Option value="HTTP">HTTP</Option>
</Select>
</FormItem>
<FormItem label={`${I18N.CHECK_PORT}:`}>
<Input className="in-text"
value={defaultCheckPort}
onChange={defaultCheckPort => this.onChangeCluster({ defaultCheckPort })}
/>
</FormItem>
<FormItem label={`${I18N.USE_IP_PORT_CHECK}:`}>
<Switch
checked={useIPPort4Check}
onChange={useIPPort4Check => this.onChangeCluster({ useIPPort4Check })}
/>
</FormItem>
{
type === 'HTTP'
? (<div>
<div className="next-row next-form-item next-left next-medium">
<div className="next-col next-col-fixed-12 next-form-item-label">
<label>{`${I18N.CHECK_PATH}:`}</label>
</div>
<div className="next-col next-col-12 next-form-item-control">
<Input
className="in-text"
value={path}
onChange={path => healthCheckerChange({ path })}
/>
</div>
</div>
<div className="next-row next-form-item next-left next-medium">
<div className="next-col next-col-fixed-12 next-form-item-label">
<label>{`${I18N.CHECK_HEADERS}:`}</label>
</div>
<div className="next-col next-col-12 next-form-item-control">
<Input
className="in-text"
value={headers}
onChange={headers => healthCheckerChange({ headers })}
/>
</div>
</div>
</div>)
: null
}
<FormItem label={`${I18N.METADATA}:`}>
<Input
className="in-text"
value={metadataText}
onChange={metadataText => this.onChangeCluster({ metadataText })}
/>
</FormItem>
</Form>
</Dialog>
)
}
<Select.Option value="TCP">TCP</Select.Option>
<Select.Option value="HTTP">HTTP</Select.Option>
</Select>
</Form.Item>
<Form.Item label={`${I18N.CHECK_PORT}:`}>
<Input
className="in-text"
value={defaultCheckPort}
onChange={defaultCheckPort => this.onChangeCluster({ defaultCheckPort })}
/>
</Form.Item>
<Form.Item label={`${I18N.USE_IP_PORT_CHECK}:`}>
<Switch
checked={useIPPort4Check}
onChange={useIPPort4Check => this.onChangeCluster({ useIPPort4Check })}
/>
</Form.Item>
{type === 'HTTP' ? (
<div>
<div className="next-row next-form-item next-left next-medium">
<div className="next-col next-col-fixed-12 next-form-item-label">
<label>{`${I18N.CHECK_PATH}:`}</label>
</div>
<div className="next-col next-col-12 next-form-item-control">
<Input
className="in-text"
value={path}
onChange={path => healthCheckerChange({ path })}
/>
</div>
</div>
<div className="next-row next-form-item next-left next-medium">
<div className="next-col next-col-fixed-12 next-form-item-label">
<label>{`${I18N.CHECK_HEADERS}:`}</label>
</div>
<div className="next-col next-col-12 next-form-item-control">
<Input
className="in-text"
value={headers}
onChange={headers => healthCheckerChange({ headers })}
/>
</div>
</div>
</div>
) : null}
<Form.Item label={`${I18N.METADATA}:`}>
<Input
className="in-text"
value={metadataText}
onChange={metadataText => this.onChangeCluster({ metadataText })}
/>
</Form.Item>
</Form>
</Dialog>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default EditClusterDialog;

184
console/src/main/resources/static/src/pages/ServiceManagement/ServiceDetail/EditInstanceDialog.js
View File

@ -14,103 +14,103 @@
import React from 'react';
import { request } from '../../../globalLib';
import { Dialog, Form, Input, Switch, Message } from '@alifd/next';
import { I18N, DIALOG_FORM_LAYOUT } from './constant'
import { I18N, DIALOG_FORM_LAYOUT } from './constant';
const FormItem = Form.Item;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class EditInstanceDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
editInstance: {},
editInstanceDialogVisible: false
constructor(props) {
super(props);
this.state = {
editInstance: {},
editInstanceDialogVisible: false,
};
this.show = this.show.bind(this);
}
show(_editInstance) {
let editInstance = _editInstance;
const { metadata = {} } = editInstance;
if (Object.keys(metadata).length) {
editInstance.metadataText = Object.keys(metadata)
.map(k => `${k}=${metadata[k]}`)
.join(',');
}
this.setState({ editInstance, editInstanceDialogVisible: true });
}
hide() {
this.setState({ editInstanceDialogVisible: false });
}
onConfirm() {
const { serviceName, clusterName, getInstanceList, openLoading, closeLoading } = this.props;
const { ip, port, weight, enabled, metadataText } = this.state.editInstance;
request({
method: 'POST',
url: '/nacos/v1/ns/instance/update',
data: { serviceName, clusterName, ip, port, weight, enable: enabled, metadata: metadataText },
dataType: 'text',
beforeSend: () => openLoading(),
success: res => {
if (res !== 'ok') {
Message.error(res);
return;
}
this.show = this.show.bind(this)
}
this.hide();
getInstanceList();
},
complete: () => closeLoading(),
});
}
show(editInstance) {
const { metadata = {} } = editInstance
if (Object.keys(metadata).length) {
editInstance.metadataText = Object.keys(metadata).map(k => `${k}=${metadata[k]}`).join(',')
}
this.setState({ editInstance, editInstanceDialogVisible: true })
}
onChangeCluster(changeVal) {
const { editInstance = {} } = this.state;
this.setState({
editInstance: Object.assign({}, editInstance, changeVal),
});
}
hide() {
this.setState({ editInstanceDialogVisible: false })
}
onConfirm() {
const { serviceName, clusterName, getInstanceList, openLoading, closeLoading } = this.props
const { ip, port, weight, enabled, metadataText } = this.state.editInstance
request({
method: 'POST',
url: '/nacos/v1/ns/instance/update',
data: { serviceName, clusterName, ip, port, weight, enable: enabled, metadata: metadataText },
dataType: 'text',
beforeSend: () => openLoading(),
success: res => {
if (res !== 'ok') {
Message.error(res)
return
}
this.hide()
getInstanceList()
},
complete: () => closeLoading()
})
}
onChangeCluster(changeVal) {
const { editInstance = {} } = this.state
this.setState({
editInstance: Object.assign({}, editInstance, changeVal)
})
}
render() {
const { editInstanceDialogVisible, editInstance } = this.state
return (
<Dialog
className="instance-edit-dialog"
title={I18N.UPDATE_INSTANCE}
visible={editInstanceDialogVisible}
onOk={() => this.onConfirm()}
onCancel={() => this.hide()}
onClose={() => this.hide()}
>
<Form {...DIALOG_FORM_LAYOUT}>
<FormItem label="IP:">
<p>{editInstance.ip}</p>
</FormItem>
<FormItem label={`${I18N.PORT}:`}>
<p>{editInstance.port}</p>
</FormItem>
<FormItem label={`${I18N.WEIGHT}:`}>
<Input
className="in-text"
value={editInstance.weight}
onChange={weight => this.onChangeCluster({ weight })}
/>
</FormItem>
<FormItem label={`${I18N.WHETHER_ONLINE}:`}>
<Switch
checked={editInstance.enabled}
onChange={enabled => this.onChangeCluster({ enabled })} />
</FormItem>
<FormItem label={`${I18N.METADATA}:`}>
<Input
className="in-text"
value={editInstance.metadataText}
onChange={metadataText => this.onChangeCluster({ metadataText })}
/>
</FormItem>
</Form>
</Dialog>
)
}
render() {
const { editInstanceDialogVisible, editInstance } = this.state;
return (
<Dialog
className="instance-edit-dialog"
title={I18N.UPDATE_INSTANCE}
visible={editInstanceDialogVisible}
onOk={() => this.onConfirm()}
onCancel={() => this.hide()}
onClose={() => this.hide()}
>
<Form {...DIALOG_FORM_LAYOUT}>
<Form.Item label="IP:">
<p>{editInstance.ip}</p>
</Form.Item>
<Form.Item label={`${I18N.PORT}:`}>
<p>{editInstance.port}</p>
</Form.Item>
<Form.Item label={`${I18N.WEIGHT}:`}>
<Input
className="in-text"
value={editInstance.weight}
onChange={weight => this.onChangeCluster({ weight })}
/>
</Form.Item>
<Form.Item label={`${I18N.WHETHER_ONLINE}:`}>
<Switch
checked={editInstance.enabled}
onChange={enabled => this.onChangeCluster({ enabled })}
/>
</Form.Item>
<Form.Item label={`${I18N.METADATA}:`}>
<Input
className="in-text"
value={editInstance.metadataText}
onChange={metadataText => this.onChangeCluster({ metadataText })}
/>
</Form.Item>
</Form>
</Dialog>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default EditInstanceDialog;

227
console/src/main/resources/static/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js
View File

@ -12,130 +12,123 @@
*/
import React from 'react';
import {request} from '../../../globalLib';
import {Dialog, Form, Input, Select, Message} from '@alifd/next';
import {I18N, DIALOG_FORM_LAYOUT} from './constant'
import { request } from '../../../globalLib';
import { Dialog, Form, Input, Select, Message } from '@alifd/next';
import { I18N, DIALOG_FORM_LAYOUT } from './constant';
const FormItem = Form.Item;
const Option = Select.Option
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class EditServiceDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
isCreate: false,
editService: {},
editServiceDialogVisible: false
constructor(props) {
super(props);
this.state = {
isCreate: false,
editService: {},
editServiceDialogVisible: false,
};
this.show = this.show.bind(this);
}
show(_editService = {}) {
let editService = _editService;
const { metadata = {}, name } = editService;
if (Object.keys(metadata).length) {
editService.metadataText = Object.keys(metadata)
.map(k => `${k}=${metadata[k]}`)
.join(',');
}
this.setState({ editService, editServiceDialogVisible: true, isCreate: !name });
}
hide() {
this.setState({ editServiceDialogVisible: false });
}
onConfirm() {
const { isCreate } = this.state;
const editService = Object.assign({}, this.state.editService);
const { name, protectThreshold, healthCheckMode, metadataText } = editService;
request({
method: isCreate ? 'PUT' : 'POST',
url: `/nacos/v1/ns/service/${isCreate ? 'create' : 'update'}`,
data: { serviceName: name, protectThreshold, healthCheckMode, metadata: metadataText },
dataType: 'text',
beforeSend: () => this.setState({ loading: true }),
success: res => {
if (res !== 'ok') {
Message.error(res);
return;
}
this.show = this.show.bind(this)
}
show(editService = {}) {
const {metadata = {}, name} = editService
if (Object.keys(metadata).length) {
editService.metadataText = Object.keys(metadata).map(k => `${k}=${metadata[k]}`).join(',')
if (isCreate) {
this.props.queryServiceList();
} else {
this.props.getServiceDetail();
}
this.setState({editService, editServiceDialogVisible: true, isCreate: !name})
}
},
error: res => Message.error(res.responseText || res.statusText),
complete: () => this.setState({ loading: false }),
});
this.hide();
}
hide() {
this.setState({editServiceDialogVisible: false})
}
onChangeCluster(changeVal) {
const { editService = {} } = this.state;
this.setState({
editService: Object.assign({}, editService, changeVal),
});
}
onConfirm() {
const {isCreate} = this.state
const editService = Object.assign({}, this.state.editService)
const {name, protectThreshold, healthCheckMode, metadataText} = editService
request({
method: isCreate ? 'PUT' : 'POST',
url: `/nacos/v1/ns/service/${isCreate ? 'create' : 'update'}`,
data: {serviceName: name, protectThreshold, healthCheckMode, metadata: metadataText},
dataType: 'text',
beforeSend: () => this.setState({loading: true}),
success: res => {
if (res !== 'ok') {
Message.error(res)
return
}
if (isCreate) {
this.props.queryServiceList()
} else {
this.props.getServiceDetail()
}
},
error: res => Message.error(res.responseText || res.statusText),
complete: () => this.setState({loading: false})
})
this.hide()
}
onChangeCluster(changeVal) {
const {editService = {}} = this.state
this.setState({
editService: Object.assign({}, editService, changeVal)
})
}
render() {
const {isCreate, editService, editServiceDialogVisible} = this.state
const {
name,
protectThreshold,
healthCheckMode,
metadataText
} = editService
return (
<Dialog
className="service-detail-edit-dialog"
title={isCreate ? I18N.CREATE_SERVICE : I18N.UPDATE_SERVICE}
visible={editServiceDialogVisible}
onOk={() => this.onConfirm()}
onCancel={() => this.hide()}
onClose={() => this.hide()}
render() {
const { isCreate, editService, editServiceDialogVisible } = this.state;
const { name, protectThreshold, healthCheckMode, metadataText } = editService;
return (
<Dialog
className="service-detail-edit-dialog"
title={isCreate ? I18N.CREATE_SERVICE : I18N.UPDATE_SERVICE}
visible={editServiceDialogVisible}
onOk={() => this.onConfirm()}
onCancel={() => this.hide()}
onClose={() => this.hide()}
>
<Form {...DIALOG_FORM_LAYOUT}>
<Form.Item label={`${I18N.SERVICE_NAME}:`}>
{!isCreate ? (
<p>{name}</p>
) : (
<Input
className="in-text"
value={name}
onChange={name => this.onChangeCluster({ name })}
/>
)}
</Form.Item>
<Form.Item label={`${I18N.PROTECT_THRESHOLD}:`}>
<Input
className="in-text"
value={protectThreshold}
onChange={protectThreshold => this.onChangeCluster({ protectThreshold })}
/>
</Form.Item>
<Form.Item label={`${I18N.HEALTH_CHECK_PATTERN}:`}>
<Select
className="in-select"
defaultValue={healthCheckMode}
onChange={healthCheckMode => this.onChangeCluster({ healthCheckMode })}
>
<Form {...DIALOG_FORM_LAYOUT}>
<FormItem label={`${I18N.SERVICE_NAME}:`}>
{
!isCreate
? <p>{name}</p>
: <Input
className="in-text"
value={name}
onChange={name => this.onChangeCluster({name})}
/>
}
</FormItem>
<FormItem label={`${I18N.PROTECT_THRESHOLD}:`}>
<Input
className="in-text"
value={protectThreshold}
onChange={protectThreshold => this.onChangeCluster({protectThreshold})}
/>
</FormItem>
<FormItem label={`${I18N.HEALTH_CHECK_PATTERN}:`}>
<Select
className="in-select"
defaultValue={healthCheckMode}
onChange={healthCheckMode => this.onChangeCluster({healthCheckMode})}
>
<Option value="server">{I18N.HEALTH_CHECK_PATTERN_SERVICE}</Option>
<Option value="client">{I18N.HEALTH_CHECK_PATTERN_CLIENT}</Option>
<Option value="none">{I18N.HEALTH_CHECK_PATTERN_NONE}</Option>
</Select>
</FormItem>
<FormItem label={`${I18N.METADATA}:`}>
<Input
className="in-text"
value={metadataText}
onChange={metadataText => this.onChangeCluster({metadataText})}
/>
</FormItem>
</Form>
</Dialog>
)
}
<Select.Option value="server">{I18N.HEALTH_CHECK_PATTERN_SERVICE}</Select.Option>
<Select.Option value="client">{I18N.HEALTH_CHECK_PATTERN_CLIENT}</Select.Option>
<Select.Option value="none">{I18N.HEALTH_CHECK_PATTERN_NONE}</Select.Option>
</Select>
</Form.Item>
<Form.Item label={`${I18N.METADATA}:`}>
<Input
className="in-text"
value={metadataText}
onChange={metadataText => this.onChangeCluster({ metadataText })}
/>
</Form.Item>
</Form>
</Dialog>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default EditServiceDialog;

249
console/src/main/resources/static/src/pages/ServiceManagement/ServiceDetail/InstanceTable.js
View File

@ -12,137 +12,150 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { request } from '../../../globalLib';
import { Button, Pagination, Table } from '@alifd/next';
import { I18N, HEALTHY_COLOR_MAPPING } from './constant'
import EditInstanceDialog from "./EditInstanceDialog";
import { I18N, HEALTHY_COLOR_MAPPING } from './constant';
import EditInstanceDialog from './EditInstanceDialog';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class InstanceTable extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
instance: { count: 0, list: [] },
pageNum: 1,
pageSize: 10
}
}
static propTypes = {
clusterName: PropTypes.string,
serviceName: PropTypes.string,
};
componentDidMount() {
this.getInstanceList()
}
constructor(props) {
super(props);
this.state = {
loading: false,
instance: { count: 0, list: [] },
pageNum: 1,
pageSize: 10,
};
}
openLoading() {
this.setState({ loading: true })
}
componentDidMount() {
this.getInstanceList();
}
closeLoading() {
this.setState({ loading: false })
}
openLoading() {
this.setState({ loading: true });
}
getInstanceList() {
const { clusterName, serviceName } = this.props
if (!clusterName) return
const { pageSize, pageNum } = this.state
request({
url: '/nacos/v1/ns/catalog/instanceList',
data: {
serviceName,
clusterName,
pgSize: pageSize,
startPg: pageNum
},
beforeSend: () => this.openLoading(),
success: instance => this.setState({ instance }),
complete: () => this.closeLoading()
})
}
closeLoading() {
this.setState({ loading: false });
}
openInstanceDialog(instance) {
this.refs.editInstanceDialog.show(instance)
}
getInstanceList() {
const { clusterName, serviceName } = this.props;
if (!clusterName) return;
const { pageSize, pageNum } = this.state;
request({
url: '/nacos/v1/ns/catalog/instanceList',
data: {
serviceName,
clusterName,
pgSize: pageSize,
startPg: pageNum,
},
beforeSend: () => this.openLoading(),
success: instance => this.setState({ instance }),
complete: () => this.closeLoading(),
});
}
switchState(index, record) {
const { instance } = this.state
const { ip, port, weight, enabled } = record
const { clusterName, serviceName } = this.props
const newVal = Object.assign({}, instance)
newVal.list[index]['enabled'] = !enabled
request({
method: 'POST',
url: '/nacos/v1/ns/instance/update',
data: { serviceName, clusterName, ip, port, weight, enable: !enabled },
dataType: 'text',
beforeSend: () => this.openLoading(),
success: () => this.setState({ instance: newVal }),
complete: () => this.closeLoading()
})
}
openInstanceDialog(instance) {
this.refs.editInstanceDialog.show(instance);
}
onChangePage(pageNum) {
this.setState({ pageNum }, () => this.getInstanceList())
}
switchState(index, record) {
const { instance } = this.state;
const { ip, port, weight, enabled } = record;
const { clusterName, serviceName } = this.props;
const newVal = Object.assign({}, instance);
newVal.list[index].enabled = !enabled;
request({
method: 'POST',
url: '/nacos/v1/ns/instance/update',
data: { serviceName, clusterName, ip, port, weight, enable: !enabled },
dataType: 'text',
beforeSend: () => this.openLoading(),
success: () => this.setState({ instance: newVal }),
complete: () => this.closeLoading(),
});
}
rowColor = ({ healthy }) => ({ className: `row-bg-${HEALTHY_COLOR_MAPPING[`${healthy}`]}` })
onChangePage(pageNum) {
this.setState({ pageNum }, () => this.getInstanceList());
}
render() {
const { clusterName, serviceName } = this.props
const { instance, pageSize, loading } = this.state
return instance.count ? (
<div>
<Table dataSource={instance.list} loading={loading} getRowProps={this.rowColor}>
<Table.Column width={138} title="IP" dataIndex="ip" />
<Table.Column width={100} title={I18N.PORT} dataIndex="port" />
<Table.Column width={100} title={I18N.WEIGHT} dataIndex="weight" />
<Table.Column width={100} title={I18N.HEALTHY} dataIndex="healthy" cell={val => `${val}`} />
<Table.Column
title={I18N.METADATA}
dataIndex="metadata"
cell={metadata => Object.keys(metadata).map(k => `${k}=${metadata[k]}`).join(',')}
/>
<Table.Column
title={I18N.OPERATION}
width={150}
cell={(value, index, record) => (
<div>
<Button
type="normal"
className="edit-btn"
onClick={() => this.openInstanceDialog(record)}
>{I18N.EDITOR}</Button>
<Button
type={record.enabled ? 'normal' : 'secondary'}
onClick={() => this.switchState(index, record)}
>{I18N[record.enabled ? 'OFFLINE' : 'ONLINE']}</Button>
</div>
)} />
</Table>
{
instance.count > pageSize
? (
<Pagination
className="pagination"
total={instance.count}
pageSize={pageSize}
onChange={currentPage => this.onChangePage(currentPage)}
/>
)
: null
}
<EditInstanceDialog
ref="editInstanceDialog"
serviceName={serviceName}
clusterName={clusterName}
openLoading={() => this.openLoading()}
closeLoading={() => this.closeLoading()}
getInstanceList={() => this.getInstanceList()}
/>
</div>
) : null
}
rowColor = ({ healthy }) => ({ className: `row-bg-${HEALTHY_COLOR_MAPPING[`${healthy}`]}` });
render() {
const { clusterName, serviceName } = this.props;
const { instance, pageSize, loading } = this.state;
return instance.count ? (
<div>
<Table dataSource={instance.list} loading={loading} getRowProps={this.rowColor}>
<Table.Column width={138} title="IP" dataIndex="ip" />
<Table.Column width={100} title={I18N.PORT} dataIndex="port" />
<Table.Column width={100} title={I18N.WEIGHT} dataIndex="weight" />
<Table.Column
width={100}
title={I18N.HEALTHY}
dataIndex="healthy"
cell={val => `${val}`}
/>
<Table.Column
title={I18N.METADATA}
dataIndex="metadata"
cell={metadata =>
Object.keys(metadata)
.map(k => `${k}=${metadata[k]}`)
.join(',')
}
/>
<Table.Column
title={I18N.OPERATION}
width={150}
cell={(value, index, record) => (
<div>
<Button
type="normal"
className="edit-btn"
onClick={() => this.openInstanceDialog(record)}
>
{I18N.EDITOR}
</Button>
<Button
type={record.enabled ? 'normal' : 'secondary'}
onClick={() => this.switchState(index, record)}
>
{I18N[record.enabled ? 'OFFLINE' : 'ONLINE']}
</Button>
</div>
)}
/>
</Table>
{instance.count > pageSize ? (
<Pagination
className="pagination"
total={instance.count}
pageSize={pageSize}
onChange={currentPage => this.onChangePage(currentPage)}
/>
) : null}
<EditInstanceDialog
ref="editInstanceDialog"
serviceName={serviceName}
clusterName={clusterName}
openLoading={() => this.openLoading()}
closeLoading={() => this.closeLoading()}
getInstanceList={() => this.getInstanceList()}
/>
</div>
) : null;
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default InstanceTable;

257
console/src/main/resources/static/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js
View File

@ -14,152 +14,153 @@
import React from 'react';
import { request } from '../../../globalLib';
import { Button, Card, Form, Loading } from '@alifd/next';
import EditServiceDialog from './EditServiceDialog'
import EditClusterDialog from './EditClusterDialog'
import InstanceTable from './InstanceTable'
import queryString from 'query-string'
import { I18N } from './constant'
import './ServiceDetail.less'
import EditServiceDialog from './EditServiceDialog';
import EditClusterDialog from './EditClusterDialog';
import InstanceTable from './InstanceTable';
import queryString from 'query-string';
import { I18N } from './constant';
import './ServiceDetail.less';
const FormItem = Form.Item;
const pageFormLayout = {
labelCol: { fixedSpan: 10 },
wrapperCol: { span: 14 }
labelCol: { fixedSpan: 10 },
wrapperCol: { span: 14 },
};
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ServiceDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
serviceName: queryString.parse(props.location.search).name,
loading: false,
currentPage: 1,
clusters: [],
instances: {},
service: {},
pageSize: 10,
pageNum: {}
}
constructor(props) {
super(props);
this.state = {
serviceName: queryString.parse(props.location.search).name,
loading: false,
currentPage: 1,
clusters: [],
instances: {},
service: {},
pageSize: 10,
pageNum: {},
};
}
componentDidMount() {
if (!this.state.serviceName) {
this.props.history.goBack();
return;
}
this.getServiceDetail();
}
componentDidMount() {
if (!this.state.serviceName) {
this.props.history.goBack()
return
}
this.getServiceDetail()
}
getServiceDetail() {
const { serviceName } = this.state;
request({
url: `/nacos/v1/ns/catalog/serviceDetail?serviceName=${serviceName}`,
beforeSend: () => this.openLoading(),
success: ({ clusters = [], service = {} }) => this.setState({ service, clusters }),
complete: () => this.closeLoading(),
});
}
getServiceDetail() {
const { serviceName } = this.state
request({
url: `/nacos/v1/ns/catalog/serviceDetail?serviceName=${serviceName}`,
beforeSend: () => this.openLoading(),
success: ({ clusters = [], service = {} }) => this.setState({ service, clusters }),
complete: () => this.closeLoading()
})
}
openLoading() {
this.setState({ loading: true });
}
openLoading() {
this.setState({ loading: true })
}
closeLoading() {
this.setState({ loading: false });
}
closeLoading() {
this.setState({ loading: false })
}
openEditServiceDialog() {
this.refs.editServiceDialog.show(this.state.service);
}
openEditServiceDialog() {
this.refs.editServiceDialog.show(this.state.service)
}
openClusterDialog(cluster) {
this.refs.editClusterDialog.show(cluster);
}
openClusterDialog(cluster) {
this.refs.editClusterDialog.show(cluster)
}
render() {
const { serviceName, loading, service = {}, clusters } = this.state;
const { metadata = {} } = service;
const metadataText = Object.keys(metadata).map(key => `${key}=${metadata[key]}`).join(',');
return (
<div className="main-container service-detail">
<Loading
shape={'flower'}
tip={'Loading...'}
className="loading"
visible={loading}
color={'#333'}
>
<h1 style={{
position: 'relative',
width: '100%',
}}
>
{I18N.SERVICE_DETAILS}
<Button
type="primary"
className="header-btn"
onClick={() => this.props.history.goBack()}
>{I18N.BACK}</Button>
<Button
type="normal"
className="header-btn"
onClick={() => this.openEditServiceDialog()}
>{I18N.EDIT_SERVICE}</Button>
</h1>
render() {
const { serviceName, loading, service = {}, clusters } = this.state
const { metadata = {} } = service
const metadataText = Object.keys(metadata).map(key => `${key}=${metadata[key]}`).join(',')
return (
<div className="main-container service-detail">
<Loading
shape={"flower"}
tip={"Loading..."}
className="loading"
visible={loading}
color={"#333"}
>
<h1 style={{
position: 'relative',
width: '100%'
}}>
{I18N.SERVICE_DETAILS}
<Button
type="primary"
className="header-btn"
onClick={() => this.props.history.goBack()}
>{I18N.BACK}</Button>
<Button
type="normal"
className="header-btn"
onClick={() => this.openEditServiceDialog()}
>{I18N.EDIT_SERVICE}</Button>
</h1>
<Form style={{ width: '60%' }} {...pageFormLayout}>
<FormItem label={`${I18N.SERVICE_NAME}:`}>
<p>{service.name}</p>
</FormItem>
<FormItem label={`${I18N.PROTECT_THRESHOLD}:`}>
<p>{service.protectThreshold}</p>
</FormItem>
<FormItem label={`${I18N.HEALTH_CHECK_PATTERN}:`}>
<p>{service.healthCheckMode}</p>
</FormItem>
<FormItem label={`${I18N.METADATA}:`}>
<p>{metadataText}</p>
</FormItem>
</Form>
{
<Form style={{ width: '60%' }} {...pageFormLayout}>
<FormItem label={`${I18N.SERVICE_NAME}:`}>
<p>{service.name}</p>
</FormItem>
<FormItem label={`${I18N.PROTECT_THRESHOLD}:`}>
<p>{service.protectThreshold}</p>
</FormItem>
<FormItem label={`${I18N.HEALTH_CHECK_PATTERN}:`}>
<p>{service.healthCheckMode}</p>
</FormItem>
<FormItem label={`${I18N.METADATA}:`}>
<p>{metadataText}</p>
</FormItem>
</Form>
{
clusters.map(cluster => (
<Card
key={cluster.name}
className="cluster-card"
title={`${I18N.CLUSTER}:`}
subTitle={cluster.name}
contentHeight="auto"
extra={(
<Button
type="normal"
onClick={() => this.openClusterDialog(cluster)}
>{I18N.EDIT_CLUSTER}</Button>
<Card
key={cluster.name}
className="cluster-card"
title={`${I18N.CLUSTER}:`}
subTitle={cluster.name}
contentHeight="auto"
extra={(
<Button
type="normal"
onClick={() => this.openClusterDialog(cluster)}
>{I18N.EDIT_CLUSTER}</Button>
)}
>
<InstanceTable
clusterName={cluster.name}
serviceName={serviceName}
/>
</Card>
>
<InstanceTable
clusterName={cluster.name}
serviceName={serviceName}
/>
</Card>
))
}
</Loading>
<EditServiceDialog
ref="editServiceDialog"
openLoading={() => this.openLoading()}
closeLoading={() => this.closeLoading()}
getServiceDetail={() => this.getServiceDetail()}
/>
<EditClusterDialog
ref="editClusterDialog"
openLoading={() => this.openLoading()}
closeLoading={() => this.closeLoading()}
getServiceDetail={() => this.getServiceDetail()}
/>
</div>
);
}
</Loading>
<EditServiceDialog
ref="editServiceDialog"
openLoading={() => this.openLoading()}
closeLoading={() => this.closeLoading()}
getServiceDetail={() => this.getServiceDetail()}
/>
<EditClusterDialog
ref="editClusterDialog"
openLoading={() => this.openLoading()}
closeLoading={() => this.closeLoading()}
getServiceDetail={() => this.getServiceDetail()}
/>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ServiceDetail;

74
console/src/main/resources/static/src/pages/ServiceManagement/ServiceDetail/constant.js
View File

@ -13,131 +13,131 @@
import { aliwareIntl } from '../../../globalLib';
const getI18N = (key, prefix = 'com.alibaba.nacos.page.serviceDetail.') => aliwareIntl.get(prefix + key)
export const I18N = {}
const getI18N = (key, prefix = 'com.alibaba.nacos.page.serviceDetail.') => aliwareIntl.get(prefix + key);
export const I18N = {};
/**
* 服务列表
*/
I18N.SERVICE_DETAILS = getI18N('service_details')
I18N.SERVICE_DETAILS = getI18N('service_details');
/**
* 编辑服务
*/
I18N.EDIT_SERVICE = getI18N('edit_service')
I18N.EDIT_SERVICE = getI18N('edit_service');
/**
* 返回
*/
I18N.BACK = getI18N('back')
I18N.BACK = getI18N('back');
/**
* 服务名
*/
I18N.SERVICE_NAME = getI18N('service_name')
I18N.SERVICE_NAME = getI18N('service_name');
/**
* 保护阀值
*/
I18N.PROTECT_THRESHOLD = getI18N('protect_threshold')
I18N.PROTECT_THRESHOLD = getI18N('protect_threshold');
/**
* 健康检查模式
*/
I18N.HEALTH_CHECK_PATTERN = getI18N('health_check_pattern')
I18N.HEALTH_CHECK_PATTERN = getI18N('health_check_pattern');
/**
* 健康检查模式 - 服务端
*/
I18N.HEALTH_CHECK_PATTERN_SERVICE = getI18N('health_check_pattern.service')
I18N.HEALTH_CHECK_PATTERN_SERVICE = getI18N('health_check_pattern.service');
/**
* 健康检查模式 - 客户端
*/
I18N.HEALTH_CHECK_PATTERN_CLIENT = getI18N('health_check_pattern.client')
I18N.HEALTH_CHECK_PATTERN_CLIENT = getI18N('health_check_pattern.client');
/**
* 健康检查模式 - 禁止
*/
I18N.HEALTH_CHECK_PATTERN_NONE = getI18N('health_check_pattern.none')
I18N.HEALTH_CHECK_PATTERN_NONE = getI18N('health_check_pattern.none');
/**
* 元数据
*/
I18N.METADATA = getI18N('metadata')
I18N.METADATA = getI18N('metadata');
/**
* 更新服务
*/
I18N.UPDATE_SERVICE = getI18N('update_service')
I18N.UPDATE_SERVICE = getI18N('update_service');
/**
* 创建服务
*/
I18N.CREATE_SERVICE = getI18N('create_service')
I18N.CREATE_SERVICE = getI18N('create_service');
/**
* 集群
*/
I18N.CLUSTER = getI18N('cluster')
I18N.CLUSTER = getI18N('cluster');
/**
* 端口
*/
I18N.PORT = getI18N('port')
I18N.PORT = getI18N('port');
/**
* 权重
*/
I18N.WEIGHT = getI18N('weight')
I18N.WEIGHT = getI18N('weight');
/**
* 健康状态
*/
I18N.HEALTHY = getI18N('healthy')
I18N.HEALTHY = getI18N('healthy');
/**
* 操作
*/
I18N.OPERATION = getI18N('operation')
I18N.OPERATION = getI18N('operation');
/**
* 编辑
*/
I18N.EDITOR = getI18N('editor')
I18N.EDITOR = getI18N('editor');
/**
* 上线
*/
I18N.ONLINE = getI18N('online')
I18N.ONLINE = getI18N('online');
/**
* 下线
*/
I18N.OFFLINE = getI18N('offline')
I18N.OFFLINE = getI18N('offline');
/**
* 集群配置
*/
I18N.EDIT_CLUSTER = getI18N('edit_cluster')
I18N.EDIT_CLUSTER = getI18N('edit_cluster');
/**
* 检查类型
*/
I18N.CHECK_TYPE = getI18N('check_type')
I18N.CHECK_TYPE = getI18N('check_type');
/**
* 检查端口
*/
I18N.CHECK_PORT = getI18N('check_port')
I18N.CHECK_PORT = getI18N('check_port');
/**
* 使用IP端口检查
*/
I18N.USE_IP_PORT_CHECK = getI18N('use_ip_port_check')
I18N.USE_IP_PORT_CHECK = getI18N('use_ip_port_check');
/**
* 检查路径
*/
I18N.CHECK_PATH = getI18N('check_path')
I18N.CHECK_PATH = getI18N('check_path');
/**
* 检查头
*/
I18N.CHECK_HEADERS = getI18N('check_headers')
I18N.CHECK_HEADERS = getI18N('check_headers');
/**
* 更新集群
*/
I18N.UPDATE_CLUSTER = getI18N('update_cluster')
I18N.UPDATE_CLUSTER = getI18N('update_cluster');
/**
* 编辑实例
*/
I18N.UPDATE_INSTANCE = getI18N('update_instance')
I18N.UPDATE_INSTANCE = getI18N('update_instance');
/**
* 是否上线
*/
I18N.WHETHER_ONLINE = getI18N('whether_online')
I18N.WHETHER_ONLINE = getI18N('whether_online');
export const DIALOG_FORM_LAYOUT = {
labelCol: { fixedSpan: 12 },
wrapperCol: { span: 12 }
}
labelCol: { fixedSpan: 12 },
wrapperCol: { span: 12 },
};
export const HEALTHY_COLOR_MAPPING = {
'true': 'green',
'false': 'red'
}
true: 'green',
false: 'red',
};

4
console/src/main/resources/static/src/pages/ServiceManagement/ServiceDetail/index.js
View File

@ -11,6 +11,6 @@
* limitations under the License.
*/
import ServiceDetail from './ServiceDetail'
import ServiceDetail from './ServiceDetail';
export default ServiceDetail
export default ServiceDetail;

338
console/src/main/resources/static/src/pages/ServiceManagement/ServiceList/ServiceList.js
View File

@ -12,179 +12,205 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import RegionGroup from '../../../components/RegionGroup/index';
import {request, aliwareIntl} from '../../../globalLib';
import {Button, Field, Form, Grid, Input, Loading, Pagination, Table, Dialog, Message} from '@alifd/next';
import EditServiceDialog from '../ServiceDetail/EditServiceDialog'
import {I18N, STATUS_COLOR_MAPPING} from './constant'
import './ServiceList.less'
import { request, aliwareIntl } from '../../../globalLib';
import {
Button,
Field,
Form,
Grid,
Input,
Loading,
Pagination,
Table,
Dialog,
Message,
} from '@alifd/next';
import EditServiceDialog from '../ServiceDetail/EditServiceDialog';
import { I18N, STATUS_COLOR_MAPPING } from './constant';
import './ServiceList.less';
const FormItem = Form.Item;
const {Row, Col} = Grid;
const {Column} = Table
const { Row, Col } = Grid;
const { Column } = Table;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ServiceList extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
total: 0,
pageSize: 10,
currentPage: 1,
keyword: '',
dataSource: []
};
this.field = new Field(this);
}
static propTypes = {
history: PropTypes.object,
};
openLoading() {
this.setState({loading: true})
}
constructor(props) {
super(props);
this.state = {
loading: false,
total: 0,
pageSize: 10,
currentPage: 1,
keyword: '',
dataSource: [],
};
this.field = new Field(this);
}
closeLoading() {
this.setState({loading: false})
}
openLoading() {
this.setState({ loading: true });
}
openEditServiceDialog() {
this.refs.editServiceDialog.show(this.state.service)
}
closeLoading() {
this.setState({ loading: false });
}
queryServiceList() {
const {currentPage, pageSize, keyword} = this.state
const parameter = [`startPg=${currentPage}`, `pgSize=${pageSize}`, `keyword=${keyword}`]
openEditServiceDialog() {
this.refs.editServiceDialog.show(this.state.service);
}
queryServiceList() {
const { currentPage, pageSize, keyword } = this.state;
const parameter = [`startPg=${currentPage}`, `pgSize=${pageSize}`, `keyword=${keyword}`];
request({
url: `/nacos/v1/ns/catalog/serviceList?${parameter.join('&')}`,
beforeSend: () => this.openLoading(),
success: ({ count = 0, serviceList = [] } = {}) => {
this.setState({
dataSource: serviceList,
total: count,
});
},
error: () =>
this.setState({
dataSource: [],
total: 0,
currentPage: 0,
}),
complete: () => this.closeLoading(),
});
}
getQueryLater = () => {
setTimeout(() => this.queryServiceList());
};
deleteService(serviceName) {
Dialog.confirm({
title: I18N.PROMPT,
content: I18N.PROMPT_DELETE,
onOk: () => {
request({
url: `/nacos/v1/ns/catalog/serviceList?${parameter.join('&')}`,
beforeSend: () => this.openLoading(),
success: ({count = 0, serviceList = []} = {}) => this.setState({
dataSource: serviceList,
total: count
}),
error: () => this.setState({
dataSource: [],
total: 0,
currentPage: 0
}),
complete: () => this.closeLoading()
});
}
getQueryLater() {
setTimeout(() => this.queryServiceList());
}
deleteService(serviceName) {
Dialog.confirm({
title: I18N.PROMPT,
content: I18N.PROMPT_DELETE,
onOk: () => {
request({
method: 'DELETE',
url: `/nacos/v1/ns/service/remove?serviceName=${serviceName}`,
dataType: 'text',
beforeSend: () => this.openLoading(),
success: res => {
if (res !== 'ok') {
Message.error(res)
return
}
this.queryServiceList()
},
error: res => Message.error(res.responseText || res.statusText),
complete: () => this.closeLoading()
})
method: 'DELETE',
url: `/nacos/v1/ns/service/remove?serviceName=${serviceName}`,
dataType: 'text',
beforeSend: () => this.openLoading(),
success: res => {
if (res !== 'ok') {
Message.error(res);
return;
}
this.queryServiceList();
},
error: res => Message.error(res.responseText || res.statusText),
complete: () => this.closeLoading(),
});
}
},
});
}
rowColor = ({status}) => ({className: `row-bg-${STATUS_COLOR_MAPPING[status]}`})
rowColor = ({ status }) => ({ className: `row-bg-${STATUS_COLOR_MAPPING[status]}` });
render() {
const {keyword} = this.state
const {init, getValue} = this.field;
this.init = init;
this.getValue = getValue;
const locale = {empty: I18N.PUBNODEDATA}
render() {
const { keyword } = this.state;
const { init, getValue } = this.field;
this.init = init;
this.getValue = getValue;
const locale = { empty: I18N.PUBNODEDATA };
return (
<div className="main-container service-management">
<Loading
shape="flower"
style={{position: 'relative'}}
visible={this.state.loading}
tip="Loading..."
color="#333"
>
<RegionGroup
left={I18N.SERVICE_LIST}
namespaceCallBack={this.getQueryLater.bind(this)}
/>
<Row className="demo-row" style={{marginBottom: 10, padding: 0}}>
<Col span="24">
<Form inline field={this.field}>
<FormItem label={I18N.SERVICE_NAME}>
<Input
placeholder={I18N.ENTER_SERVICE_NAME}
style={{width: 200}}
value={keyword}
onChange={keyword => this.setState({keyword})}
/>
</FormItem>
<FormItem label="">
<Button
type="primary"
onClick={() => this.setState({currentPage: 1}, () => this.queryServiceList())}
style={{marginRight: 10}}
>{I18N.QUERY}</Button>
</FormItem>
</Form>
</Col>
</Row>
<Row style={{padding: 0}}>
<Col span="24" style={{padding: 0}}>
<Table
dataSource={this.state.dataSource}
fixedHeader={true}
maxBodyHeight={530}
locale={locale}
language={aliwareIntl.currentLanguageCode}
getRowProps={row => this.rowColor(row)}
>
<Column title={I18N.COLUMN_SERVICE_NAME} dataIndex="name"/>
<Column title={I18N.COLUMN_CLUSTER_COUNT} dataIndex="clusterCount"/>
<Column title={I18N.COLUMN_IP_COUNT} dataIndex="ipCount"/>
<Column title={I18N.COLUMN_HEALTH_STATUS} dataIndex="status"/>
<Column title={I18N.COLUMN_OPERATION} align="center" cell={(value, index, record) => (
<div>
<Button
type="normal"
onClick={() => this.props.history.push(`/serviceDetail?name=${record.name}`)}
>{I18N.DETAIL}</Button>
</div>
)}/>
</Table>
</Col>
</Row>
<div style={{marginTop: 10, textAlign: 'right'}}>
<Pagination
current={this.state.currentPage}
total={this.state.total}
pageSize={this.state.pageSize}
onChange={currentPage => this.setState({currentPage}, () => this.queryServiceList())}
language={aliwareIntl.currentLanguageCode}
/>
return (
<div className="main-container service-management">
<Loading
shape="flower"
style={{ position: 'relative' }}
visible={this.state.loading}
tip="Loading..."
color="#333"
>
<RegionGroup left={I18N.SERVICE_LIST} namespaceCallBack={this.getQueryLater} />
<Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
<Col span="24">
<Form inline field={this.field}>
<FormItem label={I18N.SERVICE_NAME}>
<Input
placeholder={I18N.ENTER_SERVICE_NAME}
style={{ width: 200 }}
value={keyword}
onChange={keyword => this.setState({ keyword })}
/>
</FormItem>
<FormItem label="">
<Button
type="primary"
onClick={() => this.setState({ currentPage: 1 }, () => this.queryServiceList())}
style={{ marginRight: 10 }}
>
{I18N.QUERY}
</Button>
</FormItem>
</Form>
</Col>
</Row>
<Row style={{ padding: 0 }}>
<Col span="24" style={{ padding: 0 }}>
<Table
dataSource={this.state.dataSource}
fixedHeader
maxBodyHeight={530}
locale={locale}
language={aliwareIntl.currentLanguageCode}
getRowProps={row => this.rowColor(row)}
>
<Column title={I18N.COLUMN_SERVICE_NAME} dataIndex="name" />
<Column title={I18N.COLUMN_CLUSTER_COUNT} dataIndex="clusterCount" />
<Column title={I18N.COLUMN_IP_COUNT} dataIndex="ipCount" />
<Column title={I18N.COLUMN_HEALTH_STATUS} dataIndex="status" />
<Column
title={I18N.COLUMN_OPERATION}
align="center"
cell={(value, index, record) => (
<div>
<Button
type="normal"
onClick={() =>
this.props.history.push(`/serviceDetail?name=${record.name}`)
}
>
{I18N.DETAIL}
</Button>
</div>
</Loading>
<EditServiceDialog
ref="editServiceDialog"
openLoading={() => this.openLoading()}
closeLoading={() => this.closeLoading()}
queryServiceList={() => this.setState({currentPage: 1}, () => this.queryServiceList())}
)}
/>
</div>
);
}
</Table>
</Col>
</Row>
<div style={{ marginTop: 10, textAlign: 'right' }}>
<Pagination
current={this.state.currentPage}
total={this.state.total}
pageSize={this.state.pageSize}
onChange={currentPage =>
this.setState({ currentPage }, () => this.queryServiceList())
}
language={aliwareIntl.currentLanguageCode}
/>
</div>
</Loading>
<EditServiceDialog
ref="editServiceDialog"
openLoading={() => this.openLoading()}
closeLoading={() => this.closeLoading()}
queryServiceList={() => this.setState({ currentPage: 1 }, () => this.queryServiceList())}
/>
</div>
);
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ServiceList;

46
console/src/main/resources/static/src/pages/ServiceManagement/ServiceList/constant.js
View File

@ -13,76 +13,76 @@
import { aliwareIntl } from '../../../globalLib';
const getI18N = (key, prefix = 'com.alibaba.nacos.page.serviceManagement.') => aliwareIntl.get(prefix + key)
export const I18N = {}
const getI18N = (key, prefix = 'com.alibaba.nacos.page.serviceManagement.') => aliwareIntl.get(prefix + key);
export const I18N = {};
/**
* 服务列表
*/
I18N.SERVICE_LIST = getI18N('service_list')
I18N.SERVICE_LIST = getI18N('service_list');
/**
* 服务名称
*/
I18N.SERVICE_NAME = getI18N('service_name')
I18N.SERVICE_NAME = getI18N('service_name');
/**
* 请输入服务名称
*/
I18N.ENTER_SERVICE_NAME = getI18N('please_enter_the_service_name')
I18N.ENTER_SERVICE_NAME = getI18N('please_enter_the_service_name');
/**
* 查询
*/
I18N.QUERY = getI18N('query')
I18N.QUERY = getI18N('query');
/**
* 查询
*/
I18N.PUBNODEDATA = getI18N('pubnodata', '')
I18N.PUBNODEDATA = getI18N('pubnodata', '');
/**
* 服务名
*/
I18N.COLUMN_SERVICE_NAME = getI18N('table.column.service_name')
I18N.COLUMN_SERVICE_NAME = getI18N('table.column.service_name');
/**
* 集群数目
*/
I18N.COLUMN_CLUSTER_COUNT = getI18N('table.column.cluster_count')
I18N.COLUMN_CLUSTER_COUNT = getI18N('table.column.cluster_count');
/**
* IP数目
*/
I18N.COLUMN_IP_COUNT = getI18N('table.column.ip_count')
I18N.COLUMN_IP_COUNT = getI18N('table.column.ip_count');
/**
* 健康程度
*/
I18N.COLUMN_HEALTH_STATUS = getI18N('table.column.health_status')
I18N.COLUMN_HEALTH_STATUS = getI18N('table.column.health_status');
/**
* 操作
*/
I18N.COLUMN_OPERATION = getI18N('table.column.operation')
I18N.COLUMN_OPERATION = getI18N('table.column.operation');
/**
* 详情
*/
I18N.DETAIL = getI18N('detail')
I18N.DETAIL = getI18N('detail');
/**
* 删除
*/
I18N.DELETE = getI18N('delete')
I18N.DELETE = getI18N('delete');
/**
* 提示
*/
I18N.PROMPT = getI18N('prompt')
I18N.PROMPT = getI18N('prompt');
/**
* 提示
*/
I18N.PROMPT_DELETE = getI18N('prompt_delete')
I18N.PROMPT_DELETE = getI18N('prompt_delete');
/**
* 删除
*/
I18N.DELETE = getI18N('delete')
I18N.DELETE = getI18N('delete');
/**
* 创建服务
*/
I18N.CREATE = getI18N('create')
I18N.CREATE = getI18N('create');
export const STATUS_COLOR_MAPPING = {
优: 'green',
良: 'light-green',
中: 'orange',
差: 'red'
}
优: 'green',
良: 'light-green',
中: 'orange',
差: 'red',
};

4
console/src/main/resources/static/src/pages/ServiceManagement/ServiceList/index.js
View File

@ -11,6 +11,6 @@
* limitations under the License.
*/
import ServiceList from './ServiceList'
import ServiceList from './ServiceList';
export default ServiceList
export default ServiceList;

44
console/src/main/resources/static/src/router.js
View File

@ -12,6 +12,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Router, Route, Switch } from 'dva/router';
import './lib.js';
import App from './containers/App';
@ -29,26 +30,29 @@ import ServiceList from './pages/ServiceManagement/ServiceList';
import ServiceDetail from './pages/ServiceManagement/ServiceDetail';
function RouterConfig({ history }) {
return (
<Router history={history}>
<Switch>
<App history={history}>
<Route path="/Namespace" component={Namespace} />
<Route path="/Newconfig" component={Newconfig} />
<Route path="/Configsync" component={Configsync} />
<Route path="/Configdetail" component={Configdetail} />
<Route path="/Configeditor" component={Configeditor} />
<Route path="/HistoryDetail" component={HistoryDetail} />
<Route path="/ConfigRollback" component={ConfigRollback} />
<Route path="/HistoryRollback" component={HistoryRollback} />
<Route path="/ListeningToQuery" component={ListeningToQuery} />
<Route path="/ConfigurationManagement" component={ConfigurationManagement} />
<Route path="/ServiceManagement" component={ServiceList} />
<Route path="/ServiceDetail" component={ServiceDetail} />
</App>
</Switch>
</Router>
);
return (
<Router history={history}>
<Switch>
<App history={history}>
<Route path="/Namespace" component={Namespace} />
<Route path="/Newconfig" component={Newconfig} />
<Route path="/Configsync" component={Configsync} />
<Route path="/Configdetail" component={Configdetail} />
<Route path="/Configeditor" component={Configeditor} />
<Route path="/HistoryDetail" component={HistoryDetail} />
<Route path="/ConfigRollback" component={ConfigRollback} />
<Route path="/HistoryRollback" component={HistoryRollback} />
<Route path="/ListeningToQuery" component={ListeningToQuery} />
<Route path="/ConfigurationManagement" component={ConfigurationManagement} />
<Route path="/ServiceManagement" component={ServiceList} />
<Route path="/ServiceDetail" component={ServiceDetail} />
</App>
</Switch>
</Router>
);
}
RouterConfig.propTypes = {
history: PropTypes.object,
};
export default RouterConfig;

2
console/src/main/resources/static/src/routes/IndexPage.js
View File

@ -18,7 +18,7 @@ import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
<div className="test"></div>
<div className="test" />
<h1 className={styles.title}>Yay! Welcome to dva!</h1>
<div className={styles.welcome} />
<ul className={styles.list}>

398
console/src/main/resources/static/src/serviceMock.js
View File

@ -12,202 +12,202 @@
*/
module.exports = {
"method": [
"get",
"post",
"put",
"delete",
"patch"
],
"serviceList": [
{
"registerName": "com.alibaba.nacos.service.dashlist",
"name": "",
"registerTo": null,
"url": "/diamond-ops/info",
"defaults": "{}",
"params": "{}",
"config": null,
"initialize": null,
"share": 0,
"exports": null,
"proxy": "",
"serviceDoc": null,
"ctime": "2018-05-19T07:24:01.000Z",
"mtime": "2018-08-28T10:19:46.000Z",
"author_id": 23,
"project_id": "nacos",
"is_mock": 0,
"method": 0,
"is_param": 0,
"is_proxy": 0,
"cookie": "{}",
"header": "{}",
"isJsonData": 0,
"paramsType": "[]",
"autoLoading": 0
},
{
"registerName": "com.alibaba.nacos.service.getLink",
"name": "getLink",
"registerTo": null,
"url": "/diamond-ops/viper/getLink",
"defaults": "{}",
"params": "{}",
"config": null,
"initialize": null,
"share": 0,
"exports": null,
"proxy": "",
"serviceDoc": null,
"ctime": "2017-12-03T07:38:56.000Z",
"mtime": "2018-08-28T10:19:46.000Z",
"author_id": 23,
"project_id": "nacos",
"is_mock": 0,
"method": 0,
"is_param": 0,
"is_proxy": 0,
"cookie": "{}",
"header": "{}",
"isJsonData": 0,
"paramsType": "[]",
"autoLoading": 0
},
{
"registerName": "com.alibaba.nacos.service.getLinks",
"name": "getLinks",
"registerTo": null,
"url": "/diamond-ops/viper/getLinks",
"defaults": "{}",
"params": "{}",
"config": null,
"initialize": null,
"share": 0,
"exports": null,
"proxy": "",
"serviceDoc": null,
"ctime": "2017-12-03T07:38:56.000Z",
"mtime": "2018-08-28T10:19:46.000Z",
"author_id": 23,
"project_id": "nacos",
"is_mock": 0,
"method": 0,
"is_param": 0,
"is_proxy": 0,
"cookie": "{}",
"header": "{}",
"isJsonData": 0,
"paramsType": "[]",
"autoLoading": 0
},
{
"registerName": "com.alibaba.nacos.service.deleteNameSpace",
"name": "删除命名空间",
"registerTo": null,
"url": "/diamond-ops/service/serverId/{serverId}/namespace/{namespace}",
"defaults": "{}",
"params": "{}",
"config": null,
"initialize": null,
"share": 0,
"exports": null,
"proxy": "",
"serviceDoc": null,
"ctime": "2017-12-03T07:38:56.000Z",
"mtime": "2018-08-28T10:19:46.000Z",
"author_id": 23,
"project_id": "nacos",
"is_mock": 0,
"method": 3,
"is_param": 0,
"is_proxy": 0,
"cookie": "{}",
"header": "{}",
"isJsonData": 0,
"paramsType": "[]",
"autoLoading": 0
},
{
"registerName": "com.alibaba.nacos.service.getMetaData",
"name": "获取metaData",
"registerTo": null,
"url": "/diamond-ops/meta/data",
"defaults": "{}",
"params": "{}",
"config": null,
"initialize": null,
"share": 0,
"exports": null,
"proxy": "",
"serviceDoc": null,
"ctime": "2017-12-03T07:38:56.000Z",
"mtime": "2018-08-28T10:19:46.000Z",
"author_id": 23,
"project_id": "nacos",
"is_mock": 0,
"method": 0,
"is_param": 0,
"is_proxy": 0,
"cookie": "{}",
"header": "{}",
"isJsonData": 0,
"paramsType": "[]",
"autoLoading": 0
},
{
"registerName": "com.alibaba.nacos.service.sendVerifyCode",
"name": "发送验证码",
"registerTo": null,
"url": "/diamond-ops/meta/sendVerifyCode",
"defaults": "{}",
"params": "{}",
"config": null,
"initialize": null,
"share": 0,
"exports": null,
"proxy": "",
"serviceDoc": null,
"ctime": "2017-12-03T07:38:56.000Z",
"mtime": "2018-08-28T10:19:46.000Z",
"author_id": 23,
"project_id": "nacos",
"is_mock": 0,
"method": 0,
"is_param": 0,
"is_proxy": 0,
"cookie": "{}",
"header": "{}",
"isJsonData": 0,
"paramsType": "[]",
"autoLoading": 0
},
{
"registerName": "com.alibaba.nacos.service.getDomain",
"name": "获取region",
"registerTo": null,
"url": "/diamond-ops/env/domain",
"defaults": "{}",
"params": "{}",
"config": null,
"initialize": null,
"share": 0,
"exports": null,
"proxy": "",
"serviceDoc": null,
"ctime": "2017-12-03T07:38:56.000Z",
"mtime": "2018-08-28T10:19:46.000Z",
"author_id": 23,
"project_id": "nacos",
"is_mock": 0,
"method": 0,
"is_param": 0,
"is_proxy": 0,
"cookie": "{}",
"header": "{}",
"isJsonData": 0,
"paramsType": "[]",
"autoLoading": 0
}
]
}
method: [
'get',
'post',
'put',
'delete',
'patch',
],
serviceList: [
{
registerName: 'com.alibaba.nacos.service.dashlist',
name: '',
registerTo: null,
url: '/diamond-ops/info',
defaults: '{}',
params: '{}',
config: null,
initialize: null,
share: 0,
exports: null,
proxy: '',
serviceDoc: null,
ctime: '2018-05-19T07:24:01.000Z',
mtime: '2018-08-28T10:19:46.000Z',
author_id: 23,
project_id: 'nacos',
is_mock: 0,
method: 0,
is_param: 0,
is_proxy: 0,
cookie: '{}',
header: '{}',
isJsonData: 0,
paramsType: '[]',
autoLoading: 0,
},
{
registerName: 'com.alibaba.nacos.service.getLink',
name: 'getLink',
registerTo: null,
url: '/diamond-ops/viper/getLink',
defaults: '{}',
params: '{}',
config: null,
initialize: null,
share: 0,
exports: null,
proxy: '',
serviceDoc: null,
ctime: '2017-12-03T07:38:56.000Z',
mtime: '2018-08-28T10:19:46.000Z',
author_id: 23,
project_id: 'nacos',
is_mock: 0,
method: 0,
is_param: 0,
is_proxy: 0,
cookie: '{}',
header: '{}',
isJsonData: 0,
paramsType: '[]',
autoLoading: 0,
},
{
registerName: 'com.alibaba.nacos.service.getLinks',
name: 'getLinks',
registerTo: null,
url: '/diamond-ops/viper/getLinks',
defaults: '{}',
params: '{}',
config: null,
initialize: null,
share: 0,
exports: null,
proxy: '',
serviceDoc: null,
ctime: '2017-12-03T07:38:56.000Z',
mtime: '2018-08-28T10:19:46.000Z',
author_id: 23,
project_id: 'nacos',
is_mock: 0,
method: 0,
is_param: 0,
is_proxy: 0,
cookie: '{}',
header: '{}',
isJsonData: 0,
paramsType: '[]',
autoLoading: 0,
},
{
registerName: 'com.alibaba.nacos.service.deleteNameSpace',
name: '删除命名空间',
registerTo: null,
url: '/diamond-ops/service/serverId/{serverId}/namespace/{namespace}',
defaults: '{}',
params: '{}',
config: null,
initialize: null,
share: 0,
exports: null,
proxy: '',
serviceDoc: null,
ctime: '2017-12-03T07:38:56.000Z',
mtime: '2018-08-28T10:19:46.000Z',
author_id: 23,
project_id: 'nacos',
is_mock: 0,
method: 3,
is_param: 0,
is_proxy: 0,
cookie: '{}',
header: '{}',
isJsonData: 0,
paramsType: '[]',
autoLoading: 0,
},
{
registerName: 'com.alibaba.nacos.service.getMetaData',
name: '获取metaData',
registerTo: null,
url: '/diamond-ops/meta/data',
defaults: '{}',
params: '{}',
config: null,
initialize: null,
share: 0,
exports: null,
proxy: '',
serviceDoc: null,
ctime: '2017-12-03T07:38:56.000Z',
mtime: '2018-08-28T10:19:46.000Z',
author_id: 23,
project_id: 'nacos',
is_mock: 0,
method: 0,
is_param: 0,
is_proxy: 0,
cookie: '{}',
header: '{}',
isJsonData: 0,
paramsType: '[]',
autoLoading: 0,
},
{
registerName: 'com.alibaba.nacos.service.sendVerifyCode',
name: '发送验证码',
registerTo: null,
url: '/diamond-ops/meta/sendVerifyCode',
defaults: '{}',
params: '{}',
config: null,
initialize: null,
share: 0,
exports: null,
proxy: '',
serviceDoc: null,
ctime: '2017-12-03T07:38:56.000Z',
mtime: '2018-08-28T10:19:46.000Z',
author_id: 23,
project_id: 'nacos',
is_mock: 0,
method: 0,
is_param: 0,
is_proxy: 0,
cookie: '{}',
header: '{}',
isJsonData: 0,
paramsType: '[]',
autoLoading: 0,
},
{
registerName: 'com.alibaba.nacos.service.getDomain',
name: '获取region',
registerTo: null,
url: '/diamond-ops/env/domain',
defaults: '{}',
params: '{}',
config: null,
initialize: null,
share: 0,
exports: null,
proxy: '',
serviceDoc: null,
ctime: '2017-12-03T07:38:56.000Z',
mtime: '2018-08-28T10:19:46.000Z',
author_id: 23,
project_id: 'nacos',
is_mock: 0,
method: 0,
is_param: 0,
is_proxy: 0,
cookie: '{}',
header: '{}',
isJsonData: 0,
paramsType: '[]',
autoLoading: 0,
},
],
};

15
console/src/main/resources/static/src/utils/ajaxrequest.js
View File

@ -14,13 +14,12 @@
import $ from 'jquery';
export default function ajaxrequest(options) {
let promise = $.ajax({
url: options.url,
timeout : options.timeout, //超时时间设置，单位毫秒设置为1小时
dataType: options.dataType,//返回的数据格式
type : options.type
});
return promise.done(data => ({ data }));
const promise = $.ajax({
url: options.url,
timeout: options.timeout, // 超时时间设置，单位毫秒设置为1小时
dataType: options.dataType, // 返回的数据格式
type: options.type,
});
return promise.done(data => ({ data }));
}

20
console/src/main/resources/static/src/utils/localstorage.js
View File

@ -12,14 +12,14 @@
*/
module.exports = {
set: function(key,value){
window.localStorage.setItem(key,value);
},
get: function(key) {
return window.localStorage.getItem(key);
},
remove: function(key) {
window.localStorage.removeItem(key);
}
set(key, value) {
window.localStorage.setItem(key, value);
},
get(key) {
return window.localStorage.getItem(key);
},
remove(key) {
window.localStorage.removeItem(key);
},
}
};

8
console/src/main/resources/static/src/utils/nacosutil.js
View File

@ -14,7 +14,7 @@
/* eslint-disable import/prefer-default-export */
export const throttle = (fn, delay) => {
let timer = null;
return function (...args) {
return function(...args) {
const context = this;
clearTimeout(timer);
timer = setTimeout(() => {
@ -26,14 +26,14 @@ export const throttle = (fn, delay) => {
export const getScrollTop = () => {
let scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
({ scrollTop } = document.documentElement);
} else if (document.body) {
scrollTop = document.body.scrollTop;
({ scrollTop } = document.body);
}
return scrollTop;
};
export const getLink = (link) => {
export const getLink = link => {
if (`${link}`.length > 1 && /^\/[^/]/.test(`${link}`)) {
return `${window.rootPath}${link}`;
}