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

Merge pull request #183 from jameslcj/feature_fe_module_gloablLib

Browse Source 
modulize the global params of fe
This commit is contained in:
yanlinly 2018-10-31 09:43:50 +08:00 committed by GitHub
commit 0add80d700
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 1011 additions and 1266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +0,0 @@
/*
* Copyright 1999-2018 Alibaba Group Holding Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

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

File diff suppressed because one or more lines are too long

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

@ -13,6 +13,7 @@
import React from 'react';
import { Dialog, Pagination, Transfer } from '@alifd/next';
import { request, aliwareIntl } from '../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -29,7 +30,7 @@ class BatchHandle extends React.Component {
dataSource: {}
};
}
componentDidMount() {}
componentDidMount() { }
openDialog(dataSource) {
this.setState({
visible: true,
@ -69,7 +70,7 @@ class BatchHandle extends React.Component {
}
getData() {
const dataSource = this.state.dataSource;
window.request({
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) {
@ -104,15 +105,12 @@ class BatchHandle extends React.Component {
render() {
// console.log("valueList: ", this.state.valueList, this.transfer);
return <Dialog visible={this.state.visible} language={window.pageLanguage || '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={window.pageLanguage || 'zh-cn'} />
{/* <div>
<Table dataSource={this.state.dataSourceList} language={window.aliwareIntl.currentLanguageCode}></Table>
</div> */}
<Pagination style={{ marginTop: 10 }} current={this.state.currentPage} language={window.pageLanguage || 'zh-cn'} total={this.state.total} pageSize={this.state.pageSize} onChange={this.changePage.bind(this)} type="simple" />
</div>
</Dialog>;
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中, 组件导出语句及其他信息请写在此行下面*****************************/

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

@ -13,6 +13,7 @@
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;
@ -22,7 +23,7 @@ class CloneDialog extends React.Component {
constructor(props) {
super(props);
this.allPolicy = [{ value: 'abort', label: window.aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0') }, { value: 'skip', label: window.aliwareIntl.get('nacos.component.CloneDialog.skip') }, { value: 'overwrite', label: window.aliwareIntl.get('nacos.component.CloneDialog.cover') }];
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,
@ -36,7 +37,7 @@ class CloneDialog extends React.Component {
records: [],
namespaces: [],
policy: this.defaultPolicy,
policyLabel: window.aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0'),
policyLabel: aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0'),
total: 0
};
this.field = new Field(this);
@ -50,13 +51,13 @@ class CloneDialog extends React.Component {
};
}
componentDidMount() {}
componentDidMount() { }
openDialog(payload, callback) {
let serverId = window.getParams('serverId') || 'center';
let serverId = getParams('serverId') || 'center';
this.checkData = payload.checkData;
this.callback = callback;
window.request({
request({
type: 'get',
url: `/diamond-ops/service/serverId/${serverId}/namespaceInfo`,
success: res => {
@ -86,8 +87,8 @@ class CloneDialog extends React.Component {
this.field.setValue('select', '');
} else {
Dialog.alert({
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('nacos.component.CloneDialog.get_the_namespace_failed'),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('nacos.component.CloneDialog.get_the_namespace_failed'),
content: res.message
});
}
@ -117,7 +118,7 @@ class CloneDialog extends React.Component {
getQuery() {
if (this.state.records.length > 0) {
return window.aliwareIntl.get('nacos.component.CloneDialog.|_the_selected_entry4');
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 '';
@ -130,10 +131,10 @@ class CloneDialog extends React.Component {
query += ' Group: ' + this.state.group + ',';
}
if (this.state.appName !== '') {
query += window.aliwareIntl.get('nacos.component.CloneDialog.HOME_Application') + this.state.appName + ',';
query += aliwareIntl.get('nacos.component.CloneDialog.HOME_Application') + this.state.appName + ',';
}
if (this.state.configTags.length !== 0) {
query += window.aliwareIntl.get('nacos.component.CloneDialog.tags') + this.state.configTags + ',';
query += aliwareIntl.get('nacos.component.CloneDialog.tags') + this.state.configTags + ',';
}
return query.substr(0, query.length - 1);
}
@ -152,30 +153,30 @@ class CloneDialog extends React.Component {
render() {
const init = this.field.init;
const footer = <div><Button type="primary" onClick={this.doClone.bind(this)} {...{ "disabled": this.state.total <= 0 }}>{window.aliwareIntl.get('nacos.component.CloneDialog.start_cloning')}</Button>
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={window.pageLanguage || 'zh-cn'} style={{ width: 555 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={window.aliwareIntl.get('nacos.component.CloneDialog.configuration_cloning\uFF08') + this.state.serverId + "）"}>
<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={window.aliwareIntl.get('nacos.component.CloneDialog.source_space')} {...this.formItemLayout}>
<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={window.aliwareIntl.get('nacos.component.CloneDialog.configuration_number')} {...this.formItemLayout}>
<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={window.aliwareIntl.get('nacos.component.CloneDialog.target_space')} {...this.formItemLayout}>
<Combobox style={{ width: '80%' }} size="medium" hasArrow placeholder={window.aliwareIntl.get('nacos.component.CloneDialog.select_namespace')} dataSource={this.state.namespaces} {...init('select', {
<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: window.aliwareIntl.get('nacos.component.CloneDialog.select_namespace') }]
})} language={window.aliwareIntl.currentLanguageCode}>
rules: [{ required: true, message: aliwareIntl.get('nacos.component.CloneDialog.select_namespace') }]
})} language={aliwareIntl.currentLanguageCode}>
</Combobox>
</FormItem>
<FormItem label={window.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={window.aliwareIntl.currentLanguageCode}>
<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>

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

@ -13,7 +13,8 @@
import React from 'react';
import './index.less';
import { Button,Dialog, Grid, Icon } from '@alifd/next';
import { aliwareIntl } from '../../globalLib';
import { Button, Dialog, Grid, Icon } from '@alifd/next';
const { Row, Col } = Grid;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class DeleteDialog extends React.Component {
@ -21,7 +22,7 @@ class DeleteDialog extends React.Component {
super(props);
this.state = {
visible: false,
title: window.aliwareIntl.get('nacos.component.DeleteDialog.Configuration_management'),
title: aliwareIntl.get('nacos.component.DeleteDialog.Configuration_management'),
content: '',
isok: true,
dataId: '',
@ -30,7 +31,7 @@ class DeleteDialog extends React.Component {
};
}
componentDidMount() {}
componentDidMount() { }
openDialog(payload) {
this.setState({
visible: true,
@ -48,9 +49,9 @@ class DeleteDialog extends React.Component {
});
}
render() {
const footer = <div style={{ textAlign: 'right' }}><Button type="primary" onClick={this.closeDialog.bind(this)}>{window.aliwareIntl.get('nacos.component.DeleteDialog.determine')}</Button></div>;
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={window.pageLanguage || 'zh-cn'} style={{ width: 555 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={window.aliwareIntl.get('nacos.component.DeleteDialog.deletetitle')}>
<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 }}>
@ -59,7 +60,7 @@ class DeleteDialog extends React.Component {
</Col>
<Col span={'20'}>
<div>
<h3>{this.state.isok ? window.aliwareIntl.get('nacos.component.DeleteDialog.deleted_successfully_configured') : window.aliwareIntl.get('nacos.component.DeleteDialog.delete_the_configuration_failed')}</h3>
<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' }}>

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

@ -12,6 +12,7 @@
*/
import React from 'react';
import { aliwareIntl } from '../../globalLib';
import './index.less';
import { Button, Dialog, Grid } from '@alifd/next';
const { Row, Col } = Grid;
@ -25,7 +26,7 @@ class DiffEditorDialog extends React.Component {
};
}
componentDidMount() {}
componentDidMount() { }
openDialog(letfcode, rightcode) {
this.setState({
dialogvisible: true
@ -67,19 +68,19 @@ class DiffEditorDialog extends React.Component {
this.props.publishConfig();
}
render() {
const footer = <div> <Button type="primary" onClick={this.confirmPub.bind(this)}>{window.aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.confirm_that_the')}</Button></div>;
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={window.aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.contents')} language={window.pageLanguage || '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' }}>{window.aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.of_the_current_area')}</Col>
<Col style={{ textAlign: 'center' }}>{window.aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.original_value')}</Col>
</Row>
</div>
<div style={{ clear: 'both', height: 480 }} ref="diffeditor"></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>
</div>
</div>
</Dialog>
</div>;
}

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

@ -13,6 +13,7 @@
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;
@ -56,9 +57,9 @@ class EditorNameSpace extends React.Component {
});
}
getNamespaceDetail(record){
getNamespaceDetail(record) {
this.field.setValues(record);
window.request({
request({
type: 'get',
url: `/nacos/v1/console/namespaces?show=all&namespaceId=${record.namespace}`,
success: res => {
@ -66,8 +67,8 @@ class EditorNameSpace extends React.Component {
this.field.setValue('namespaceDesc', res.namespaceDesc);
} else {
Dialog.alert({
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'),
content: res.message
});
}
@ -84,7 +85,7 @@ class EditorNameSpace extends React.Component {
if (errors) {
return;
}
window.request({
request({
type: 'put',
beforeSend: () => {
this.openLoading();
@ -92,9 +93,9 @@ class EditorNameSpace extends React.Component {
url: `/nacos/v1/console/namespaces`,
contentType: 'application/x-www-form-urlencoded',
data: {
"namespace":values.namespace,
"namespaceShowName":values.namespaceShowName,
"namespaceDesc":values.namespaceDesc
"namespace": values.namespace,
"namespaceShowName": values.namespaceShowName,
"namespaceDesc": values.namespaceDesc
},
success: res => {
if (res === true) {
@ -103,8 +104,8 @@ class EditorNameSpace extends React.Component {
this.refreshNameSpace(); //刷新全局namespace
} else {
Dialog.alert({
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.prompt'),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.prompt'),
content: res.message
});
}
@ -119,7 +120,7 @@ class EditorNameSpace extends React.Component {
refreshNameSpace() {
setTimeout(() => {
window.request({
request({
type: 'get',
url: `/nacos/v1/console/namespaces`,
success: res => {
@ -134,7 +135,7 @@ class EditorNameSpace extends React.Component {
const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) {
callback(window.aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.please_do'));
callback(aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.please_do'));
} else {
callback();
}
@ -149,26 +150,26 @@ class EditorNameSpace extends React.Component {
}
};
let footer = this.state.type === 0 ? <div></div> : <Button type="primary" onClick={this.handleSubmit.bind(this)}>{window.aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.public_space')}</Button>;
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={window.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={window.aliwareIntl.currentLanguageCode}>
<Loading tip={window.aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.edit_namespace')} style={{ width: '100%', position: 'relative' }} visible={this.state.loading}>
<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={window.aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.load')} required {...formItemLayout}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.load')} required {...formItemLayout}>
<Input {...this.field.init('namespaceShowName', {
rules: [{
required: true,
message: window.aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.namespace')
message: aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.namespace')
}, { validator: this.validateChart.bind(this) }]
})} disabled={this.state.type === 0 ? true : false} />
</FormItem>
<FormItem label={window.aliwareIntl.get('nacos.page.configdetail.Description')} required {...formItemLayout}>
<FormItem label={aliwareIntl.get('nacos.page.configdetail.Description')} required {...formItemLayout}>
<Input {...this.field.init('namespaceDesc', {
rules: [{
required: true,
message: window.aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.namespace')
}, { validator: this.validateChart.bind(this) }]
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>

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

@ -12,6 +12,7 @@
*/
import React from 'react';
import { aliwareIntl } from '../../globalLib';
import './index.less';
import { Button, Dialog, Form } from '@alifd/next';
const FormItem = Form.Item;
@ -41,7 +42,7 @@ class ExportDialog extends React.Component {
};
}
componentDidMount() {}
componentDidMount() { }
openDialog(payload) {
this.setState({
@ -65,7 +66,7 @@ class ExportDialog extends React.Component {
getQuery() {
if (this.state.records.length > 0) {
return window.aliwareIntl.get('nacos.component.ExportDialog.|_The_selected_entry0');
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 '';
@ -78,10 +79,10 @@ class ExportDialog extends React.Component {
query += ' Group: ' + this.state.group + ',';
}
if (this.state.appName !== '') {
query += window.aliwareIntl.get('nacos.component.ExportDialog.HOME_Application1') + this.state.appName + ',';
query += aliwareIntl.get('nacos.component.ExportDialog.HOME_Application1') + this.state.appName + ',';
}
if (this.state.configTags.length !== 0) {
query += window.aliwareIntl.get('nacos.component.ExportDialog.tags2') + this.state.configTags + ',';
query += aliwareIntl.get('nacos.component.ExportDialog.tags2') + this.state.configTags + ',';
}
return query.substr(0, query.length - 1);
}
@ -102,7 +103,7 @@ class ExportDialog extends React.Component {
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 '/authgw/' + window.edasprefix + baseLink;
}
return baseLink;
}
@ -110,18 +111,18 @@ class ExportDialog extends React.Component {
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 }}>{window.aliwareIntl.get('nacos.component.ExportDialog.export3')}</Button>
<Button type="primary" onClick={this.doExport.bind(this)} {...{ "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={window.pageLanguage || 'zh-cn'} style={{ width: 480 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={window.aliwareIntl.get('nacos.component.ExportDialog.export_configuration4') + this.state.serverId + "）"}>
<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={window.aliwareIntl.get('nacos.component.ExportDialog.source_space5')} {...this.formItemLayout}>
<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={window.aliwareIntl.get('nacos.component.ExportDialog.configuration_number6')} {...this.formItemLayout}>
<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>

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

@ -12,6 +12,7 @@
*/
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;
@ -28,9 +29,9 @@ class ImportDialog extends React.Component {
span: 20
}
};
this.allPolicy = [{ value: 'abort', label: window.aliwareIntl.get('nacos.component.ImportDialog.To_terminate_the_import0') }, { value: 'skip', label: window.aliwareIntl.get('nacos.component.ImportDialog.skip1') }, {
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: window.aliwareIntl.get('nacos.component.ImportDialog.cover2')
label: aliwareIntl.get('nacos.component.ImportDialog.cover2')
}];
this.defaultPolicy = 'abort';
this.state = {
@ -38,11 +39,11 @@ class ImportDialog extends React.Component {
serverId: '',
tenant: '',
policy: this.defaultPolicy,
policyLabel: window.aliwareIntl.get('nacos.component.ImportDialog.To_terminate_the_import0')
policyLabel: aliwareIntl.get('nacos.component.ImportDialog.To_terminate_the_import0')
};
}
componentDidMount() {}
componentDidMount() { }
openDialog(payload, callback) {
this.callback = callback;
@ -90,32 +91,32 @@ class ImportDialog extends React.Component {
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"}>{window.aliwareIntl.get('nacos.component.ImportDialog.You_can_only_upload._zip_file_format0') /*只能上传.zip格式的文件*/}</a>
</Balloon>;
const footer = <div><Upload language={window.pageLanguage || 'zh-cn'} listType={"text"} action={uploadLink} limit={1} accept={".zip"} onSuccess={(...args) => {
this.callback(args[0].retData, this.state.policyLabel);
this.closeDialog();
}} 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"}>{window.aliwareIntl.get('nacos.component.ImportDialog.Upload_File3')}</Button>
</Upload></div>;
<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) => {
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>;
return <div>
<Dialog visible={this.state.visible} footer={footer} footerAlign={"center"} language={window.pageLanguage || 'zh-cn'} style={{ width: 480 }} onCancel={this.closeDialog.bind(this)} onClose={this.closeDialog.bind(this)} title={window.aliwareIntl.get('nacos.component.ImportDialog.Import_configuration4') + this.state.serverId + "）"}>
<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={window.aliwareIntl.get('nacos.component.ImportDialog.target_space5')} {...this.formItemLayout}>
<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={window.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={window.aliwareIntl.currentLanguageCode}>
<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>
<div style={{ textAlign: "center" }}><Icon type={"warning"} style={{ color: '#ff8a00', marginRight: 5, verticalAlign: 'middle' }} />{window.aliwareIntl.get('nacos.component.ImportDialog.file_upload_directly_after_importing_the_configuration,_please_be_sure_to_exercise_caution7')}{helpTip}</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>;
}

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

@ -14,6 +14,7 @@
import React from 'react';
import './index.less';
import { Dialog } from '@alifd/next';
import { getParams, setParams, request, aliwareIntl } from '../../globalLib';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
/**
@ -22,8 +23,8 @@ import { Dialog } from '@alifd/next';
class NameSpaceList extends React.Component {
constructor(props) {
super(props);
this._namespace = window.getParams('namespace') || '';
// this._namespaceShowName = window.getParams('namespaceShowName') || '';
this._namespace = getParams('namespace') || '';
// this._namespaceShowName = getParams('namespaceShowName') || '';
this.state = {
nownamespace: window.nownamespace || this._namespace || '',
namespaceList: window.namespaceList || []
@ -39,7 +40,7 @@ class NameSpaceList extends React.Component {
getLink(linkKey, keyName) {
if (window[keyName] === null) {
window.request({
request({
url: "com.alibaba.nacos.service.getLink",
data: {
linkKey
@ -72,7 +73,7 @@ class NameSpaceList extends React.Component {
changeNameSpace(ns, nsName) {
this.setnamespace(ns || "");
window.setParams({
setParams({
namespace: ns || "",
namespaceShowName: nsName
});
@ -89,7 +90,7 @@ class NameSpaceList extends React.Component {
if (window.namespaceList) {
this.handleNameSpaces(window.namespaceList);
} else {
window.request({
request({
type: 'get',
url: `/nacos/v1/console/namespaces`,
success: res => {
@ -97,8 +98,8 @@ class NameSpaceList extends React.Component {
this.handleNameSpaces(res.data);
} else {
Dialog.alert({
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'),
content: res.message
});
}
@ -111,7 +112,7 @@ class NameSpaceList extends React.Component {
}
}
handleNameSpaces(data) {
let nownamespace = window.getParams("namespace") || "";
let nownamespace = getParams("namespace") || "";
// let namespaceShowName = this._namespaceShowName || data[0].namespaceShowName || '';
window.namespaceList = data;
@ -124,8 +125,8 @@ class NameSpaceList extends React.Component {
}
}
window.namespaceShowName = namespaceShowName;
window.setParams('namespace', nownamespace || "");
// window.setParams('namespaceShowName', namespaceShowName);
setParams('namespace', nownamespace || "");
// setParams('namespaceShowName', namespaceShowName);
this.props.setNowNameSpace && this.props.setNowNameSpace(namespaceShowName, nownamespace);
this.setState({
nownamespace: nownamespace,

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

@ -13,6 +13,7 @@
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;
@ -84,17 +85,16 @@ class NewNameSpace extends React.Component {
});
if (!flag) {
Dialog.alert({
content: window.aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.norepeat'),
language: window.aliwareIntl.currentLanguageCode
content: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.norepeat'),
language: aliwareIntl.currentLanguageCode
});
return;
}
// let serverId = window.getParams('serverId') || 'daily';
this.disabled = true;
this.setState({
disabled: true
});
window.request({
request({
type: 'post',
url: `/nacos/v1/console/namespaces`,
contentType: 'application/x-www-form-urlencoded',
@ -116,9 +116,9 @@ class NewNameSpace extends React.Component {
this.refreshNameSpace(); //刷新全局namespace
} else {
Dialog.alert({
title: window.aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.prompt'),
title: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.prompt'),
content: res.message,
language: window.aliwareIntl.currentLanguageCode
language: aliwareIntl.currentLanguageCode
});
}
},
@ -131,7 +131,7 @@ class NewNameSpace extends React.Component {
refreshNameSpace() {
setTimeout(() => {
window.request({
request({
type: 'get',
url: `/nacos/v1/console/namespaces`,
success: res => {
@ -147,7 +147,7 @@ class NewNameSpace extends React.Component {
const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) {
callback(window.aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.input'));
callback(aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.input'));
} else {
callback();
}
@ -163,30 +163,30 @@ class NewNameSpace extends React.Component {
};
let footer = <div>
<Button type="primary" onClick={this.handleSubmit.bind(this)} disabled={this.disabled}>{window.aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.confirm')}</Button>
<Button type="normal" onClick={this.closeDialog.bind(this)} style={{ marginLeft: 5 }}>{window.aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.cancel')}</Button>
<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={window.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={window.aliwareIntl.currentLanguageCode}><Form field={this.field}>
<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={window.aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.loading')} style={{ width: '100%', position: 'relative' }} visible={this.state.loading}>
<FormItem label={window.aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.name')} required {...formItemLayout}>
<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: window.aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.namespacenotnull')
message: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.namespacenotnull')
}, { validator: this.validateChart.bind(this) }]
})} style={{ width: '100%' }} />
</FormItem>
<FormItem label={window.aliwareIntl.get('nacos.page.configdetail.Description')} required {...formItemLayout}>
<FormItem label={aliwareIntl.get('nacos.page.configdetail.Description')} required {...formItemLayout}>
<Input {...this.field.init('namespaceDesc', {
rules: [{
required: true,
message: window.aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.namespacenotnull')
}, { validator: this.validateChart.bind(this) }]
rules: [{
required: true,
message: aliwareIntl.get('com.alibaba.nacos.component.NewNameSpace.namespacenotnull')
}, { validator: this.validateChart.bind(this) }]
})} style={{ width: '100%' }} />
</FormItem>
</FormItem>
</Loading>
</Form>
</Dialog>

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

@ -14,8 +14,8 @@
import React from 'react';
import { Button } from '@alifd/next';
import $ from 'jquery';
import ValidateDialog from '../ValidateDialog';
import NameSpaceList from '../NameSpaceList';
import { setParams, request } from '../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -136,7 +136,7 @@ class RegionGroup extends React.Component {
// TODO
this.nameSpaceList && this.nameSpaceList.getNameSpaces();
window.request({
request({
url: this.state.url,
data: {},
success: res => {
@ -152,7 +152,6 @@ class RegionGroup extends React.Component {
handleRegionList(data) {
let envcontent = '';
let envGroups = data.envGroups;
// let serverId = window.getParams('serverId') || '';
let instanceData = [];
for (let i = 0; i < envGroups.length; i++) {
let obj = envGroups[i].envs || [];
@ -165,7 +164,7 @@ class RegionGroup extends React.Component {
}
this.currRegionId = envcontent || instanceData[0] && instanceData[0].serverId;
window.setParam("serverId", this.currRegionId);
setParams("serverId", this.currRegionId);
this.setRegionBarRegionList(instanceData, this.currRegionId);
this.changeRegionBarRegionId(this.currRegionId);
@ -181,7 +180,7 @@ class RegionGroup extends React.Component {
changeTableData(serverId) {
console.log(serverId);
console.log(this.state.currRegionId);
window.setParam("serverId", serverId);
setParams("serverId", serverId);
if (this.state.currRegionId === serverId) {
return;
}
@ -196,8 +195,8 @@ class RegionGroup extends React.Component {
if (obj.serverId === serverId) {
let lastHash = window.location.hash.split("?")[0];
if (inEdas) {
window.setParam("serverId", obj.serverId);
// window.setParam('regionId', obj.serverId);
setParams("serverId", obj.serverId);
// setParams('regionId', obj.serverId);
let url = window.location.href;
console.log("url: ", url);
@ -219,7 +218,7 @@ class RegionGroup extends React.Component {
});
//window.location.href = '';
// return;
// window.setParam("serverId", serverId);
// setParams("serverId", serverId);
// this.setState({
// currRegionId: serverId
// });
@ -248,7 +247,6 @@ class RegionGroup extends React.Component {
render() {
return <div>
<ValidateDialog />
<div ref={ref => this.mainRef = ref} className="clearfix" >
<div style={{ overflow: "hidden" }}>
<div id="left" style={{ float: 'left', display: 'inline-block', marginRight: 20 }}>

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

@ -13,6 +13,7 @@
import React from 'react';
import './index.less';
import { getParams, aliwareIntl } from '../../globalLib';
import { Dialog, Loading, Tab } from '@alifd/next';
const TabPane = Tab.Item;
@ -57,7 +58,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;
@ -80,7 +81,7 @@ public class ConfigController {
}`;
}
componentDidMount() {}
componentDidMount() { }
openLoading() {
this.setState({
loading: true
@ -93,7 +94,7 @@ public class ConfigController {
}
getData() {
let namespace = window.getParams('namespace'); //获取ak,sk
let namespace = getParams('namespace'); //获取ak,sk
let obj = {
group: this.record.group || '',
dataId: this.record.dataId || '',
@ -178,7 +179,7 @@ public class ConfigExample {
}
getNodejsCode(data) {
return `TODO`;
return `TODO`;
}
getCppCode(data) {
@ -190,7 +191,7 @@ public class ConfigExample {
}
getPythonCode(data) {
return `TODO`;
return `TODO`;
}
openDialog(record) {
@ -250,9 +251,9 @@ public class ConfigExample {
const footer = <div></div>;
return (
<div>
<Dialog title={window.aliwareIntl.get('com.alibaba.nacos.component.ShowCodeing.Sample_code')} style={{ width: '80%' }} visible={this.state.dialogvisible} footer={footer} onClose={this.closeDialog.bind(this)} language={window.aliwareIntl.currentLanguageCode}>
<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={window.aliwareIntl.get('com.alibaba.nacos.component.ShowCodeing.loading')} style={{ width: '100%' }} visible={this.state.loading}>
<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)}>

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

@ -12,6 +12,7 @@
*/
import React from 'react';
import { aliwareIntl } from '../../globalLib';
import './index.less';
import { Button, Dialog, Grid, Icon } from '@alifd/next';
const { Row, Col } = Grid;
@ -22,7 +23,7 @@ class SuccessDialog extends React.Component {
super(props);
this.state = {
visible: false,
title: window.aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.Configuration_management'),
title: aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.Configuration_management'),
maintitle: '',
content: '',
isok: true,
@ -32,9 +33,9 @@ class SuccessDialog extends React.Component {
};
}
componentDidMount() {}
componentDidMount() { }
openDialog(payload) {
if(this.props.unpushtrace) {
if (this.props.unpushtrace) {
payload.title = '';
}
this.setState({
@ -54,9 +55,9 @@ class SuccessDialog extends React.Component {
});
}
render() {
const footer = <div style={{ textAlign: 'right' }}><Button type="primary" onClick={this.closeDialog.bind(this)}>{window.aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.determine')}</Button></div>;
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={window.aliwareIntl.currentLanguageCode}>
<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 }}>
@ -65,7 +66,7 @@ class SuccessDialog extends React.Component {
</Col>
<Col span={'20'}>
<div>
{this.state.isok ? <h3>{this.state.title}</h3> : <h3>{this.state.title} {window.aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.failure')}</h3>}
{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' }}>

213
console/src/main/resources/static/src/components/ValidateDialog/ValidateDialog.js
View File

@ -1,213 +0,0 @@
/*
* Copyright 1999-2018 Alibaba Group Holding Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { Button, Dialog, Input } from '@alifd/next';
import $ from 'jquery';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
class ValidateDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
dialCode: '86',
phoneNumber: '',
isValid: false,
errorInfoCode: 0,
visible: false,
btnText: window.aliwareIntl.get("nacos.component.validateDialog.Click_to_get_verification_code"),
defaultBtnText: window.aliwareIntl.get("nacos.component.validateDialog.Click_to_get_verification_code"),
disabled: false,
submitDisabled: false,
verifyCode: '',
codeType: '',
verifyDetail: '',
config: {},
requestId: ''
};
this.telRef = null;
this.disabled = false;
this.submitDisabled = false;
this.timer = null;
this.countTime = 60;
this.eventName = "validate";
}
componentDidMount() {
window.narutoEvent && window.narutoEvent.listen(this.eventName, _obj => {
console.log("_OBJ: ", _obj);
this.setState({
codeType: _obj.codeType,
verifyDetail: _obj.verifyDetail,
visible: true,
config: _obj.config || {}
});
});
// let country = this.getCountryNameByDialCode(this.state.dialCode);
// if (this.telRef) {
// $(this.telRef).intlTelInput({
// initialCountry: country,
// preferredCountries: ['cn'],
// // formatOnDisplay: false
// // utilsScript: "http://midwayfe.oss-cn-shanghai.aliyuncs.com/egg-multipart-test/intlTellInputUtils.js"
// })
// // $(this.telRef).intlTelInput("handleUtils");
// $(this.telRef).intlTelInput("setNumber", `${this.state.phoneNumber}`);
// $(this.telRef).on("countrychange", (e, dialCode) => {
// console.log("countrychange: ", dialCode)
// this.setState({
// dialCode
// });
// setTimeout(() => {
// this.onChangePhoneNumber()
// })
// })
// }
}
componentWillUnmount() {
if (this.telRef) {
$(this.telRef).unbind("countrychange");
$(this.telRef).intlTelInput("destroy");
}
window.narutoEvent && window.narutoEvent.remove(this.eventName);
clearInterval(this.timer);
}
getCountryNameByDialCode(dialCode) {
let countryName = 'cn';
let countryData = $.fn.intlTelInput.getCountryData();
countryData.some(obj => {
if (obj.dialCode === dialCode) {
countryName = obj.iso2;
return true;
}
return false;
});
return countryName;
}
onChangePhoneNumber() {
let dataObj = this.getTelInputInfo();
console.log(dataObj);
this.props.changeValue && this.props.changeValue(dataObj);
}
onClose() {
this.setState({
visible: false
});
}
onClickBtn() {
this.disabled = true;
this.setState({
disabled: true
});
window.request({
url: 'com.alibaba.nacos.service.sendVerifyCode', //以 com.alibaba. 开头最终会转换为真正的url地址
data: {
codeType: this.state.codeType
},
$data: {}, //替换{}中的内容
success: res => {
if (res && res.code === 200) {
this.setState({
requestId: res.data && res.data.window.requestId || ''
});
let count = this.countTime;
clearInterval(this.timer);
this.timer = setInterval(() => {
if (count === -1) {
this.initBtn();
return;
}
this.setState({
btnText: count
});
count--;
}, 1000);
}
}
});
}
initBtn() {
clearInterval(this.timer);
this.disabled = false;
this.setState({
disabled: false,
btnText: this.state.defaultBtnText
});
}
onValidateVerifyCode() {
if (!this.state.verifyCode) {
Dialog.alert({
content: window.aliwareIntl.get("nacos.component.validateDialog.fill_the_code"),
language: window.aliwareIntl.currentLanguageCode
});
return;
}
let config = this.state.config;
let data = Object.assign({}, config.data, {
codeType: this.state.codeType,
verifyCode: this.state.verifyCode,
requestId: this.state.requestId
});
let preSucess = config.success;
this.setState({
submitDisabled: true
});
this.submitDisabled = true;
window.request(Object.assign({}, config, {
data: data,
success: res => {
this.setState({
submitDisabled: false
});
this.submitDisabled = false;
if (res && res.code === 200) {
// window.location.reload && window.location.reload();
this.onClose();
this.initBtn();
typeof preSucess === "function" && preSucess(res);
} else {
Dialog.alert({
content: res.code === 400 ? window.aliwareIntl.get("nacos.component.validateDialog.verification_code_error") : res.message,
language: window.aliwareIntl.currentLanguageCode
});
}
}
}));
}
onChangeVerifyCode(verifyCode) {
this.setState({
verifyCode
});
}
render() {
let footer = <div><Button type="primary" onClick={this.onValidateVerifyCode.bind(this)} disabled={this.submitDisabled}>{window.aliwareIntl.get("nacos.component.validateDialog.confirm")}</Button><Button type="normal" onClick={this.onClose.bind(this)}>{window.aliwareIntl.get("nacos.component.validateDialog.cancel")}</Button></div>;
return <Dialog title={window.aliwareIntl.get("nacos.component.validateDialog.title")} style={{ color: '#73777A', width: 550 }} visible={this.state.visible} onOk={this.onValidateVerifyCode.bind(this)} onCancel={this.onClose.bind(this)} onClose={this.onClose.bind(this)} footer={footer} language={window.aliwareIntl.currentLanguageCode}>
<div>
<div style={{ marginBottom: 20 }}>
<span style={{ display: 'inline-block', verticalAlign: 'middle', width: 100, textAlign: 'right', marginRight: 10 }}>{window.aliwareIntl.get("nacos.component.validateDialog.phoneNumber")}</span><span>{this.state.verifyDetail}</span>
</div>
<div>
<span style={{ display: 'inline-block', verticalAlign: 'middle', width: 100, textAlign: 'right' }}>{window.aliwareIntl.get("nacos.component.validateDialog.Please_fill_out_the_verification_code")} </span>
<Input style={{ margin: '0 10px', height: 32, width: 200, verticalAlign: 'top' }} onChange={this.onChangeVerifyCode.bind(this)} />
<Button onClick={this.onClickBtn.bind(this)} disabled={this.disabled} style={{ minWidth: 150 }}>{this.state.btnText}</Button>
<p style={{ margin: "12px", color: "#999" }}>{window.aliwareIntl.get("nacos.component.validateDialog.remark")}</p>
</div>
</div>
</Dialog>;
}
}
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
export default ValidateDialog;

16
console/src/main/resources/static/src/components/ValidateDialog/index.js
View File

@ -1,16 +0,0 @@
/*
* Copyright 1999-2018 Alibaba Group Holding Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import ValidateDialog from './ValidateDialog';
export default ValidateDialog;

13
console/src/main/resources/static/src/components/ValidateDialog/index.less
View File

@ -1,13 +0,0 @@
/*
* Copyright 1999-2018 Alibaba Group Holding Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

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

@ -20,6 +20,7 @@ import { connect } from 'dva';
import MainLayout from '../layouts/MainLayout';
import { Message, Loading } from '@alifd/next';
import _menu from '../menu';
import { nacosEvent } from '../globalLib';
class App extends Component {
@ -27,14 +28,15 @@ class App extends Component {
super(props);
this.state = {
shownotice: 'none',
noticecontent: ''
noticecontent: '',
nacosLoading: {}
}
}
componentDidMount() {
//监听loading事件
window.narutoEvent.listenAllTask("narutoLoadingEvent", (narutoLoading) => {
nacosEvent.listenAllTask("nacosLoadingEvent", (nacosLoading) => {
this.setState({
narutoLoading
nacosLoading
})
});
}
@ -46,7 +48,7 @@ class App extends Component {
}
componentWillUnmount() {
window.narutoEvent.remove("narutoLoadingEvent");
nacosEvent.remove("nacosLoadingEvent");
}
openErr(message) {
@ -60,10 +62,9 @@ class App extends Component {
}
render() {
const { errcode, errinfo } = this.props;
return (
<Loading className="naruto-loading" shape="flower" tip="loading..." visible={false} fullScreen {...this.state.narutoLoading}>
<MainLayout navList={_menu.data}>
<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>

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

@ -16,12 +16,13 @@ import serviceConfig from './serviceMock';
import moment from 'moment';
import $ from 'jquery';
import i18DocObj from './i18ndoc';
const global = window;
/**
* 获取cookie值
* @param {*String} keyName cookie名
*/
window.aliwareGetCookieByKeyName = function (keyName) {
const aliwareGetCookieByKeyName = function (keyName) {
let result = '';
let cookieList = document.cookie && document.cookie.split(';') || [];
cookieList.forEach((str) => {
@ -33,10 +34,11 @@ window.aliwareGetCookieByKeyName = function (keyName) {
return result.trim();
};
/**
* 监听事件对象
*/
window.narutoEvent = (function (window) {
const nacosEvent = (function (_global) {
let eventListObj = {};
let ignoreEventListObj = {};
return {
@ -129,11 +131,12 @@ window.narutoEvent = (function (window) {
}
}
}
})(window);
})(global);
/**
* Naruto的工具类
* nacos的工具类
*/
window.narutoUtils = (function (window) {
const nacosUtils = (function (_global) {
let loadingCount = 0;
let loadingState = {
visible: false,
@ -156,7 +159,7 @@ window.narutoUtils = (function (window) {
*/
openLoading: function () {
loadingCount++;
window.narutoEvent.trigger("narutoLoadingEvent", Object.assign(loadingState, {
nacosEvent.trigger("nacosLoadingEvent", Object.assign(loadingState, {
visible: true,
spinning: true
}))
@ -168,7 +171,7 @@ window.narutoUtils = (function (window) {
loadingCount--;
if (loadingCount <= 0) {
loadingCount = 0;
window.narutoEvent.trigger("narutoLoadingEvent", Object.assign(loadingState, {
nacosEvent.trigger("nacosLoadingEvent", Object.assign(loadingState, {
visible: false,
spinning: false
}));
@ -179,7 +182,7 @@ window.narutoUtils = (function (window) {
*/
closeAllLoading: function () {
loadingCount = 0;
window.narutoEvent.trigger("narutoLoadingEvent", Object.assign(loadingState, {
nacosEvent.trigger("nacosLoadingEvent", Object.assign(loadingState, {
visible: false,
spinning: false
}));
@ -191,9 +194,9 @@ window.narutoUtils = (function (window) {
return url;
}
}
})(window);
})(global);
window.aliwareIntl = (function (window) {
const aliwareIntl = (function (_global) {
/**
* 国际化构造方法
* @param {Object} options 配置信息
@ -205,8 +208,8 @@ window.aliwareIntl = (function (window) {
this.nowData = nowData;
this.setMomentLocale(this.currentLanguageCode);
}
var aliwareLocal = window.aliwareGetCookieByKeyName('aliyun_lang') || 'zh';
var aliwareLocalSite = window.aliwareGetCookieByKeyName('aliyun_country') || 'cn';
let aliwareLocal = aliwareGetCookieByKeyName('aliyun_lang') || 'zh';
let aliwareLocalSite = aliwareGetCookieByKeyName('aliyun_country') || 'cn';
aliwareLocal = aliwareLocal.toLowerCase();
aliwareLocalSite = aliwareLocalSite.toLowerCase();
//当前语言
@ -214,7 +217,7 @@ window.aliwareIntl = (function (window) {
//当前地区
aliwareI18n.prototype.currentSite = aliwareLocalSite;
//当前语言-地区
aliwareI18n.prototype.currentLanguageCode = window.aliwareGetCookieByKeyName('docsite_language') || `${aliwareLocal}-${aliwareLocalSite}`;
aliwareI18n.prototype.currentLanguageCode = aliwareGetCookieByKeyName('docsite_language') || `${aliwareLocal}-${aliwareLocalSite}`;
/**
* 通过key获取对应国际化文案
* @param {String} key 国际化key
@ -250,8 +253,8 @@ window.aliwareIntl = (function (window) {
*/
aliwareI18n.prototype.intlTimeFormat = function (num = Date.now(), initOption = {}) {
try {
var date = Object.prototype.toString.call(num) === '[object Date]' ? num : new Date(num);
var options = Object.assign({}, {
let date = Object.prototype.toString.call(num) === '[object Date]' ? num : new Date(num);
let options = Object.assign({}, {
// weekday: "short",
hour12: false,
year: "numeric",
@ -295,43 +298,41 @@ window.aliwareIntl = (function (window) {
currentLocal: `${aliwareLocal}`,
locals: i18DocObj[aliwareI18n.prototype.currentLanguageCode] || i18DocObj["en-us"] || i18DocObj["zh-cn"] || {}
});
})(window);
})(global);
/**
* 获取url中的参数
*/
window.getParams = function (name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
let result = [];
if (window.location.hash !== '') {
result = window.location.hash.split('?'); //优先判别hash
} else {
result = window.location.href.split('?');
}
if (result.length === 1) {
result = window.parent.location.hash.split('?');
}
if (result.length > 1) {
let r = result[1].match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
const getParams = (function (_global) {
return function (name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
let result = [];
if (_global.location.hash !== '') {
result = _global.location.hash.split('?'); //优先判别hash
} else {
result = _global.location.href.split('?');
}
}
return null;
};
if (result.length === 1) {
result = _global.parent.location.hash.split('?');
}
if (result.length > 1) {
let r = result[1].match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
}
return null;
};
})(global);
/**
* 设置参数
*/
window.setParam = function (name, value) {
return window.setParams.apply(this, arguments);
};
/**
* 设置参数
*/
window.setParams = (function (window) {
const _originHref = window.location.href.split("#")[0];
const setParams = (function (_global) {
const _originHref = _global.location.href.split("#")[0];
return function (name, value) {
if (!name) {
return;
@ -349,15 +350,15 @@ window.setParams = (function (window) {
}
let hashArr = [];
if (window.location.hash) {
hashArr = window.location.hash.split('?');
if (_global.location.hash) {
hashArr = _global.location.hash.split('?');
}
let paramArr = hashArr[1] && hashArr[1].split('&') || [];
let paramObj = {};
paramArr.forEach((val) => {
var tmpArr = val.split('=');
let tmpArr = val.split('=');
paramObj[tmpArr[0]] = decodeURIComponent(tmpArr[1] || "");
});
paramObj = Object.assign({}, paramObj, obj);
@ -368,19 +369,29 @@ window.setParams = (function (window) {
hashArr[1] = resArr.join('&');
let hashStr = hashArr.join('?');
if (window.history.replaceState) {
if (_global.history.replaceState) {
let url = _originHref + hashStr;
window.history.replaceState(null, '', url);
_global.history.replaceState(null, '', url);
} else {
window.location.hash = hashStr;
_global.location.hash = hashStr;
}
}
})(window);
})(global);
/**
* 设置参数
*/
const setParam = function (name, value) {
return setParams.apply(this, arguments);
};
/**
* 删除参数
*/
window.removeParams = (function (window) {
const _originHref = window.location.href.split("#")[0];
const removeParams = (function (_global) {
const _originHref = _global.location.href.split("#")[0];
return function (name) {
let removeList = [];
@ -396,46 +407,47 @@ window.removeParams = (function (window) {
}
let hashArr = [];
if (window.location.hash) {
hashArr = window.location.hash.split('?');
if (_global.location.hash) {
hashArr = _global.location.hash.split('?');
}
let paramArr = hashArr[1] && hashArr[1].split('&') || [];
// let paramObj = {};
paramArr = paramArr.filter((val) => {
var tmpArr = val.split('=');
let tmpArr = val.split('=');
return removeList.indexOf(tmpArr[0]) === -1;
});
hashArr[1] = paramArr.join('&');
let hashStr = hashArr.join('?');
if (window.history.replaceState) {
if (_global.history.replaceState) {
let url = _originHref + hashStr;
window.history.replaceState(null, '', url);
_global.history.replaceState(null, '', url);
} else {
window.location.hash = hashStr;
_global.location.hash = hashStr;
}
}
})(window);
})(global);
/**
* 封装的ajax请求
*/
window.request = (function (window) {
var middlewareList = [];
var middlewareBackList = [];
var serviceMap = {};
var serviceList = serviceConfig.serviceList || [];
var methodList = serviceConfig.method || [];
const request = (function (_global) {
let middlewareList = [];
let middlewareBackList = [];
let serviceMap = {};
let serviceList = serviceConfig.serviceList || [];
let methodList = serviceConfig.method || [];
/**
* 获取真实url信息
*/
var NarutoRealUrlMapper = (function () {
let NacosRealUrlMapper = (function () {
serviceList.forEach(obj => {
serviceMap[obj.registerName] = obj;
})
return function (registerName) {
var serviceObj = serviceMap[registerName];
let serviceObj = serviceMap[registerName];
if (!serviceObj) {
return null;
}
@ -482,12 +494,12 @@ window.request = (function (window) {
function handleCustomService(config) {
//只处理com.alibaba.开头的url
if (config && config.url && config.url.indexOf('com.alibaba.') === 0) {
var registerName = config.url;
var serviceObj = NarutoRealUrlMapper(registerName);
let registerName = config.url;
let serviceObj = NacosRealUrlMapper(registerName);
if (serviceObj && serviceObj.url && serviceObj.url.replace) {
//有mock数据 直接返回 生产环境失效
if (projectConfig.is_preview && serviceObj.is_mock && config.success) {
var code = null;
let code = null;
try {
code = JSON.parse(serviceObj.defaults);
} catch (error) {
@ -521,7 +533,7 @@ window.request = (function (window) {
try {
//设置临时代理 生产环境失效
if (projectConfig.is_preview && serviceObj.is_proxy) {
var beforeSend = config.beforeSend;
let beforeSend = config.beforeSend;
config.beforeSend = function (xhr) {
serviceObj.cookie && xhr.setRequestHeader('tmpCookie', serviceObj.cookie);
serviceObj.header && xhr.setRequestHeader('tmpHeader', serviceObj.header);
@ -534,10 +546,10 @@ window.request = (function (window) {
}
//设置自动loading效果
if (serviceObj.autoLoading) {
window.narutoUtils.openLoading();
nacosUtils.openLoading();
const prevComplete = config.complete;
config.complete = function () {
window.narutoUtils.closeLoading();
nacosUtils.closeLoading();
typeof prevComplete === "function" && prevComplete.apply($, Array.prototype.slice.call(arguments));
}
}
@ -546,29 +558,10 @@ window.request = (function (window) {
}
return config;
}
/**
* 处理edas的Url
* @param {*Object} config ajax请求配置信息
*/
function handleEdasUrl(config, noprefix) {
var _url = config.url;
var edasprefix = window.edasprefix || ''
try {
if (window.parent.location && window.parent.location.host && window.parent.location.host.indexOf('edas') !== -1) { //如果是包含在edas里面需要增加前缀
if (!noprefix) {//如果没有显示指明不加前缀
if (_url.indexOf('/authgw/') === -1) { //如果没有添加edas网关前缀则添加
_url = '/authgw/' + edasprefix + _url;
}
}
}
config.url = _url;
} catch (error) {
}
return config;
}
function Request(config) {
//除了config外的传参
var args = [].slice.call(arguments, 1);
let args = [].slice.call(arguments, 1);
//处理前置中间件
config = handleMiddleWare.apply(this, [config, ...args, middlewareList]);
//处理自定义url
@ -577,11 +570,9 @@ window.request = (function (window) {
return;
//xsrf
if (config.type && config.type.toLowerCase() === 'post' && config.data && Object.prototype.toString.call(config.data) === '[object Object]' && !config.data.sec_token) {
var sec_token = window.aliwareGetCookieByKeyName('XSRF-TOKEN')
let sec_token = aliwareGetCookieByKeyName('XSRF-TOKEN')
sec_token && (config.data.sec_token = sec_token);
}
//处理edas的url
config = handleEdasUrl.apply(this, [config, ...args]);
//处理后置中间件
config = handleMiddleWare.apply(this, [config, ...args, middlewareBackList]);
@ -592,8 +583,6 @@ window.request = (function (window) {
data: config.data || '',
dataType: config.dataType || 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader('poweredBy', 'naruto');
xhr.setRequestHeader('projectName', 'newDiamond');
config.beforeSend && config.beforeSend(xhr);
}
}))
@ -601,10 +590,22 @@ window.request = (function (window) {
//暴露方法
Request.handleCustomService = handleCustomService;
Request.handleMiddleWare = handleMiddleWare;
Request.NarutoRealUrlMapper = NarutoRealUrlMapper;
Request.NacosRealUrlMapper = NacosRealUrlMapper;
Request.serviceList = serviceList;
Request.serviceMap = serviceMap;
Request.middleWare = middleWare;
return Request;
})(window);
})(global);
export {
nacosEvent,
nacosUtils,
aliwareGetCookieByKeyName,
aliwareIntl,
getParams,
setParam,
setParams,
removeParams,
request
}

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

@ -58,7 +58,6 @@ module.exports = {
"com.alibaba.nacos.page.configsync.sync": "同步",
"com.alibaba.nacos.component.NewDatePicker.24_hours": "24小时",
"com.alibaba.nacos.page.listAllEnvironmental.environment_name": "环境名称",
"nacos.component.ShowCodeing.package_com.alibaba.cloud.acm.sample;import_org.springframework.bea": "package com.alibaba.cloud.acm.sample;import org.springframework.beans.factory.annotation.Value;import org.springframework.boot.ApplicationArguments;import org.springframework.boot.ApplicationRunner;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.cloud.context.config.annotation.RefreshScope;import org.springframework.stereotype.Component;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;/** * Created on 01/10/2017. * 假设用户配置内容为 * user.id = 0 * user.name = juven.xxxb * user.age = 18 * @author juven.xuxb */@SpringBootApplicationpublic class SampleApplication { public static void main(String[] args) { SpringApplication.run(SampleApplication.class, args); }}@Componentclass SampleRunner implements ApplicationRunner { @Value(\"${user.id}\") String userId; @Value(\"${user.name}\") String userName; @Value(\"${user.age}\") int userAge; public void run(ApplicationArguments args) throws Exception { System.out.println(userId); System.out.println(userName); System.out.println(userAge); }}@RestController@RequestMapping(\"/sample\")@RefreshScopeclass SampleController { @Value(\"${user.name}\") String userName; @RequestMapping(\"/acm\") public String simple() { return \"Hello Spring Cloud ACM!\" \"Hello \" userName \"!\"; }}",
"nacos.component.validateDialog.Click_to_get_verification_code": "点击获取验证码",
"com.alibaba.nacos.page.consistencyEfficacy.environment_marked": "环境标示",
"com.alibaba.nacos.component.NameSpaceList.Announcement_nodejs_version_is_developed,supports_a_custom_message": "公告：Node.js版上线,支持定制消息。",
@ -525,9 +524,9 @@ module.exports = {
"nacos.page.ConfigEditor.submit_failed": "不能为空, 提交失败",
},
"en-us": {
"com.alibaba.nacos.layout.noenv.nacosversion":"1.0",
"com.alibaba.nacos.page.configurationManagementVirtual":"ConfigManagement",
"com.alibaba.nacos.page.serviceManagementVirtual":"ServiceManagement",
"com.alibaba.nacos.layout.noenv.nacosversion": "1.0",
"com.alibaba.nacos.page.configurationManagementVirtual": "ConfigManagement",
"com.alibaba.nacos.page.serviceManagementVirtual": "ServiceManagement",
"nacos.component.CloneDialog.the_same_configuration": "Conflict:",
"to": "to",
"nacos.page.newconfig.data_encryption3": "Data Encryption:",
@ -822,7 +821,6 @@ module.exports = {
"nacos.page.configurationManagement.HOME_Application0": "Application:",
"com.alibaba.nacos.component.NewDatePicker.24_hours": "24 hours",
"com.alibaba.nacos.component.DiffEditorDialog.confirm_that_the": "Publish",
"nacos.component.ShowCodeing.package_com.alibaba.cloud.acm.sample;import_org.springframework.bea": "package com.alibaba.cloud.acm.sample;import org.springframework.beans.factory.annotation.Value;import org.springframework.boot.ApplicationArguments;import org.springframework.boot.ApplicationRunner;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.cloud.context.config.annotation.RefreshScope;import org.springframework.stereotype.Component;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;/** * Created on 01/10/2017. * 假设用户配置内容为 * user.id = 0 * user.name = juven.xxxb * user.age = 18 * @author juven.xuxb */@SpringBootApplicationpublic class SampleApplication { public static void main(String[] args) { SpringApplication.run(SampleApplication.class, args); }}@Componentclass SampleRunner implements ApplicationRunner { @Value(\"${user.id}\") String userId; @Value(\"${user.name}\") String userName; @Value(\"${user.age}\") int userAge; public void run(ApplicationArguments args) throws Exception { System.out.println(userId); System.out.println(userName); System.out.println(userAge); }}@RestController@RequestMapping(\"/sample\")@RefreshScopeclass SampleController { @Value(\"${user.name}\") String userName; @RequestMapping(\"/acm\") public String simple() { return \"Hello Spring Cloud ACM!\" \"Hello \" userName \"!\"; }}",
"com.alibaba.nacos.component.EditorNameSpace.prompt": "Notice",
"nacos.page.namespace.AccessKey_recommended1": "AccessKey (Recommended for development environment):",
"com.alibaba.nacos.page.configsync.sync": "Synchronize",

12
console/src/main/resources/static/src/index.css
View File

@ -60,15 +60,3 @@ html, body, :global(#root) {
:global(.viewFramework-product-navbar .product-nav-list li .active) {
background-color: #fff !important;
}
/*
:global(.naruto-loading-component) {
opacity: .7;
-webkit-filter: blur(1px);
filter: blur(1px);
filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";
pointer-events: none
}
:global(.naruto-loading>.next-loading-component) {
width: 100%;
height: 100%;
} */

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

@ -16,6 +16,7 @@ import { Icon } from '@alifd/next';
import siteConfig from '../config';
import Header from './Header';
import $ from 'jquery';
import { aliwareGetCookieByKeyName, setParams, aliwareIntl } from '../globalLib';
export default class MainLayout extends React.Component {
constructor(props) {
@ -32,7 +33,7 @@ export default class MainLayout extends React.Component {
}
goBack() {
window.hashHistory.goBack();
this.props.history.goBack();
}
nacosToggleNav(id, event) {
@ -76,7 +77,7 @@ export default class MainLayout extends React.Component {
}
}
}
window.hashHistory.push(`/${url}?${queryParams.join('&')}`);
this.props.history.push(`/${url}?${queryParams.join('&')}`);
}
nacosEnterBack() {
@ -110,7 +111,7 @@ export default class MainLayout extends React.Component {
navTo(url) {
if (url !== '/configdetail' && url !== '/configeditor') {
//二级菜单不清空
window.setParams({
setParams({
dataId: '',
group: ''
});
@ -125,7 +126,7 @@ export default class MainLayout extends React.Component {
}
}
window.hashHistory.push(`${url}?${queryParams.join('&')}`);
this.props.history.push(`${url}?${queryParams.join('&')}`);
}
nacosSetSpecialNav(item) {
@ -213,7 +214,7 @@ export default class MainLayout extends React.Component {
<div>
<a href="" onClick={this.nacosToggleNav.bind(this, item.serviceName)}>
<div className="nav-icon">{icon}</div>
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
<div className="nav-title">{aliwareIntl.get(item.id) || item.name}</div>
</a>
</div>
<ul className={`subnavlist ${hiddenClass}`}>{self.nacosLoopNav(item.children, index)}</ul>
@ -232,7 +233,7 @@ export default class MainLayout extends React.Component {
onClick={this.activeNav.bind(this, `nav${index}`)}
>
<div className="nav-icon" />
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
<div className="nav-title">{aliwareIntl.get(item.id) || item.name}</div>
</a>
</li>
);
@ -250,7 +251,7 @@ export default class MainLayout extends React.Component {
onClick={this.activeNav.bind(this, `nav${index}`)}
>
<div className="nav-icon" />
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
<div className="nav-title">{aliwareIntl.get(item.id) || item.name}</div>
</a>
</li>
);
@ -282,7 +283,7 @@ export default class MainLayout extends React.Component {
// let parentNav = this.initNav[0] || [];
let defaultNav = '/configurationManagement';
// let childrenNav = parentNav.children || [];
window.hashHistory.listen((location) => {
this.props.history.listen((location) => {
if (this.preSimplePath && this.preSimplePath !== '/') {
if (location.pathname.indexOf(this.preSimplePath) !== -1) {
return;
@ -293,7 +294,7 @@ export default class MainLayout extends React.Component {
this.preSimplePath = simplePath;
if (navName === '') {
window.hashHistory.push(defaultNav);
this.props.history.push(defaultNav);
setTimeout(() => {
this.activeNav('configurationManagement');
});
@ -354,13 +355,13 @@ export default class MainLayout extends React.Component {
}
onLanguageChange = (language) => {
window.aliwareIntl.changeLanguage(language);
aliwareIntl.changeLanguage(language);
document.cookie = `docsite_language=${language}`;
window.location.reload();
};
render() {
let language = window.aliwareGetCookieByKeyName('docsite_language') || siteConfig.defaultLanguage;
let 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`;
@ -389,17 +390,17 @@ export default class MainLayout extends React.Component {
<div
style={{ textIndent: 0 }}
className={'product-nav-title'}
title={window.aliwareIntl.get(
title={aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
)}
>
<span>
{window.aliwareIntl.get(
{aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
)}
</span>
<span style={{ marginLeft: 5 }}>
{window.aliwareIntl.get(
{aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.nacosversion'
)}
</span>
@ -438,7 +439,7 @@ export default class MainLayout extends React.Component {
<div>{this.props.children}</div>
) : (
<div style={{ height: 300, lineHeight: '300px', textAlign: 'center', fontSize: '18px' }}>
{window.aliwareIntl.get('com.alibaba.nacos.layout.noenv.does_not_exist')}
{aliwareIntl.get('com.alibaba.nacos.layout.noenv.does_not_exist')}
</div>
)}
</div>

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

@ -10,11 +10,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { getParams, request, aliwareIntl } from './globalLib';
var hasAlert = false;
window.pageLanguage = window.aliwareIntl.currentLanguageCode;
window.edasprefix = 'acm'; //固定的edas网关需要的项目名
window.globalConfig = {
@ -28,9 +27,9 @@ window.globalConfig = {
}
};
window.request.middleWare(config => {
request.middleWare(config => {
let url = config.url;
let tenant = window.nownamespace || window.getParams('namespace') || '';
let tenant = window.nownamespace || getParams('namespace') || '';
tenant = tenant === 'global' ? '' : tenant;
let splitArr = url.split('?');
if (splitArr.length > 1) {
@ -49,21 +48,10 @@ window.request.middleWare(config => {
if (res.code === 'ConsoleNeedLogin' && window.location.host.indexOf('acm') !== -1) {
window.location.reload();
}
//鉴权
if (res.code && res.code === -403) {
window.narutoEvent && window.narutoEvent.trigger("validate", {
codeType: res.data.codeType,
verifyDetail: res.data.verifyDetail,
config: Object.assign({}, config, {
success: preSucess
})
});
return;
}
if (res.code === 403 && !hasAlert) {
hasAlert = true;
window.Dialog.alert({
language: window.pageLanguage || 'zh-cn',
language: aliwareIntl.currentLanguageCode || 'zh-cn',
style: { width: 400 },
content: res.message,
onOk: () => {
@ -87,9 +75,9 @@ window.request.middleWare(config => {
hasAlert = true;
window.Dialog.alert({
language: window.pageLanguage || 'zh-cn',
language: aliwareIntl.currentLanguageCode || 'zh-cn',
style: { width: 400 },
content: window.aliwareIntl.get('com.alibaba.nacos.pubshow'), //'子账号没有权限，请联系主账号负责人RAM上授权',
content: aliwareIntl.get('com.alibaba.nacos.pubshow'), //'子账号没有权限，请联系主账号负责人RAM上授权',
onOk: () => {
hasAlert = false;
},
@ -173,7 +161,7 @@ window.importEditor = callback => {
window._getLink = function () {
let _linkObj = {};
// window.request({
// request({
// url: "com.alibaba.nacos.service.getLinks",
// async: false,
// data: {},

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

@ -13,6 +13,7 @@
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;
@ -29,16 +30,16 @@ class ConfigDetail extends React.Component {
ips: '',
checkedBeta: false,
switchEncrypt: false,
tag: [{ title: window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.official'), key: 'normal' }]
tag: [{ title: aliwareIntl.get('com.alibaba.nacos.page.configdetail.official'), key: 'normal' }]
};
this.field = new Field(this);
this.dataId = window.getParams('dataId') || 'yanlin';
this.group = window.getParams('group') || 'DEFAULT_GROUP';
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.ips = '';
this.valueMap = {}; //存储不同版本的数据
this.tenant = window.getParams('namespace') || '';
this.searchDataId = window.getParams('searchDataId') || '';
this.searchGroup = window.getParams('searchGroup') || '';
this.tenant = getParams('namespace') || '';
this.searchDataId = getParams('searchDataId') || '';
this.searchGroup = getParams('searchGroup') || '';
//this.params = window.location.hash.split('?')[1]||'';
}
@ -87,12 +88,12 @@ class ConfigDetail extends React.Component {
getDataDetail() {
let self = this;
this.serverId = window.getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || '';
this.edasAppName = window.getParams('edasAppName') || '';
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}`;
window.request({
request({
url: url,
beforeSend: function () {
self.openLoading();
@ -111,9 +112,9 @@ class ConfigDetail extends React.Component {
self.field.setValue('md5', data.md5);
} else {
Dialog.alert({
title: window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.error'),
title: aliwareIntl.get('com.alibaba.nacos.page.configdetail.error'),
content: result.message,
language: window.aliwareIntl.currentLanguageCode
language: aliwareIntl.currentLanguageCode
});
}
},
@ -123,7 +124,7 @@ class ConfigDetail extends React.Component {
});
}
goList() {
window.hashHistory.push(`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${this.searchDataId}&namespace=${this.tenant}`);
this.props.history.push(`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${this.searchDataId}&namespace=${this.tenant}`);
}
render() {
const init = this.field.init;
@ -139,7 +140,7 @@ class ConfigDetail extends React.Component {
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%' }}>{window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.configuration_details')}</h1>
<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}>
@ -153,25 +154,25 @@ class ConfigDetail extends React.Component {
<Input htmlType={"text"} readOnly={true} {...init('dataId')} />
</FormItem>
<FormItem label={"Group:"} required {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('group')} />
<Input htmlType={"text"} readOnly={true} {...init('group')} />
</FormItem>
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>{this.state.showmore ? window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.recipient_from') : window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.more_advanced_options')}</a>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.home')} {...formItemLayout}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configdetail.home')} {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('appName')} />
</FormItem>
<FormItem label={window.aliwareIntl.get('nacos.page.configdetail.Tags')} {...formItemLayout}>
<FormItem label={aliwareIntl.get('nacos.page.configdetail.Tags')} {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('config_tags')} />
</FormItem>
</div> : ''}
<FormItem label={window.aliwareIntl.get('nacos.page.configdetail.Description')} {...formItemLayout}>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.beta_release')} {...formItemLayout}>
{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'} />
@ -180,12 +181,12 @@ class ConfigDetail extends React.Component {
<FormItem label={"MD5:"} required {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('md5')} />
</FormItem>
<FormItem label={window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.configuration')} required {...formItemLayout}>
<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)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.return')}</Button>
<Button type={"primary"} onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.configdetail.return')}</Button>
</FormItem>
</Form>

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

@ -13,6 +13,7 @@
import React from 'react';
import $ from 'jquery';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import DiffEditorDialog from '../../../components/DiffEditorDialog';
import SuccessDialog from '../../../components/SuccessDialog';
import './index.less';
@ -25,13 +26,13 @@ const { Group: RadioGroup } = Radio;
class ConfigEditor extends React.Component {
constructor(props) {
super(props);
this.edasAppName = window.getParams('edasAppName') || '';
this.edasAppId = window.getParams('edasAppId') || '';
this.edasAppName = getParams('edasAppName') || '';
this.edasAppId = getParams('edasAppId') || '';
this.inApp = this.edasAppName;
this.field = new Field(this);
this.dataId = window.getParams('dataId') || 'yanlin';
this.group = window.getParams('group') || 'DEFAULT_GROUP';
this.tenant = window.getParams('namespace') | '';
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.tenant = getParams('namespace') | '';
this.state = {
configType: 'text',
codeValue: ``,
@ -48,14 +49,14 @@ class ConfigEditor extends React.Component {
tagLst: [],
config_tags: [],
switchEncrypt: false,
tag: [{ title: window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.official'), key: 'normal' }]
tag: [{ title: aliwareIntl.get('com.alibaba.nacos.page.configeditor.official'), key: 'normal' }]
};
this.codeValue = '';
this.mode = 'text';
this.ips = '';
this.valueMap = {}; //存储不同版本的数据
this.searchDataId = window.getParams('searchDataId') || '';
this.searchGroup = window.getParams('searchGroup') || '';
this.searchDataId = getParams('searchDataId') || '';
this.searchGroup = getParams('searchGroup') || '';
}
componentDidMount() {
if (this.dataId.startsWith("cipher-")) {
@ -116,9 +117,9 @@ class ConfigEditor extends React.Component {
}
navTo(url) {
this.serverId = window.getParams('serverId') || '';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`${url}?serverId=${this.serverId || ''}&dataId=${this.dataId}&group=${this.group}&namespace=${this.tenant}`);
this.serverId = getParams('serverId') || '';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
this.props.history.push(`${url}?serverId=${this.serverId || ''}&dataId=${this.dataId}&group=${this.group}&namespace=${this.tenant}`);
}
openLoading() {
@ -133,10 +134,10 @@ class ConfigEditor extends React.Component {
}
getDataDetail() {
let self = this;
this.tenant = window.getParams('namespace') || '';
this.serverId = window.getParams('serverId') || 'center';
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || 'center';
let url = `/nacos/v1/cs/configs?show=all&dataId=${this.dataId}&group=${this.group}`;
window.request({
request({
url: url,
beforeSend: function () {
self.openLoading();
@ -175,8 +176,8 @@ class ConfigEditor extends React.Component {
self.targetEnvs = envvalues;
} else {
Dialog.alert({
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.wrong'),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.configeditor.wrong'),
content: result.message
});
}
@ -188,8 +189,8 @@ class ConfigEditor extends React.Component {
}
goList() {
let tenant = window.getParams('namespace');
window.hashHistory.push(`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${this.searchDataId}&namespace=${tenant}`);
let tenant = getParams('namespace');
this.props.history.push(`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${this.searchDataId}&namespace=${tenant}`);
}
createCodeMirror(mode, value) {
@ -293,14 +294,14 @@ class ConfigEditor extends React.Component {
}
if (!content) {
Message.error({
content: window.aliwareIntl.get("nacos.page.ConfigEditor.submit_failed"),
content: aliwareIntl.get("nacos.page.ConfigEditor.submit_failed"),
align: "cc cc"
});
return;
}
this.codeValue = content;
this.tenant = window.getParams('namespace') || '';
this.serverId = window.getParams('serverId') || 'center';
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || 'center';
let payload = {
dataId: this.field.getValue('dataId'),
@ -314,15 +315,15 @@ class ConfigEditor extends React.Component {
};
let url = `/nacos/v1/cs/configs`;
window.request({
request({
type: 'post',
contentType: 'application/x-www-form-urlencoded',
url: url,
data: payload,
success: function (res) {
let _payload = {};
_payload.maintitle = window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.toedittitle');
_payload.title = <div>{window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.toedit')}</div>;
_payload.maintitle = aliwareIntl.get('com.alibaba.nacos.page.configeditor.toedittitle');
_payload.title = <div>{aliwareIntl.get('com.alibaba.nacos.page.configeditor.toedit')}</div>;
_payload.content = '';
_payload.dataId = payload.dataId;
_payload.group = payload.group;
@ -334,7 +335,7 @@ class ConfigEditor extends React.Component {
//如果是在normal面板选择了beta发布
let sufex = new Date().getTime();
self.setState({
tag: [{ title: window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.official'), key: `normal-${sufex}` }, { title: 'BETA', key: `beta-${sufex}` }], hasbeta: true,
tag: [{ title: aliwareIntl.get('com.alibaba.nacos.page.configeditor.official'), key: `normal-${sufex}` }, { title: 'BETA', key: `beta-${sufex}` }], hasbeta: true,
activeKey: `beta-${sufex}`
});
payload.betaIps = payload.betaIps || payload.ips;
@ -364,7 +365,7 @@ class ConfigEditor extends React.Component {
const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) {
callback(window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.vdchart'));
callback(aliwareIntl.get('com.alibaba.nacos.page.configeditor.vdchart'));
} else {
callback();
}
@ -528,7 +529,7 @@ class ConfigEditor extends React.Component {
<div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative', width: '100%' }} visible={this.state.loading} tip="Loading..." color="#333">
<h1 style={{ overflow: 'hidden', height: 50, width: '100%' }}>
<div>{window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.toedit')}</div>
<div>{aliwareIntl.get('com.alibaba.nacos.page.configeditor.toedit')}</div>
</h1>
{this.state.hasbeta ? <div style={{ display: 'inline-block', height: 40, width: '80%', overflow: 'hidden' }}>
@ -544,7 +545,7 @@ class ConfigEditor extends React.Component {
<Input disabled={true} {...init('dataId', {
rules: [{
required: true,
message: window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.recipient_from')
message: aliwareIntl.get('com.alibaba.nacos.page.configeditor.recipient_from')
}, { validator: this.validateChart.bind(this) }]
})} />
@ -553,45 +554,45 @@ class ConfigEditor extends React.Component {
<Input disabled={true} {...init('group', {
rules: [{
required: true,
message: window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.Home_application:')
message: aliwareIntl.get('com.alibaba.nacos.page.configeditor.Home_application:')
}, { validator: this.validateChart.bind(this) }]
})} />
</FormItem>
<FormItem label="" {...formItemLayout}>
<div>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>{this.state.showmore ? window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.more_advanced_options') : window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.group_is_not_empty')}</a>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>{this.state.showmore ? aliwareIntl.get('com.alibaba.nacos.page.configeditor.more_advanced_options') : aliwareIntl.get('com.alibaba.nacos.page.configeditor.group_is_not_empty')}</a>
</div>
</FormItem>
<div style={{ height: this.state.showmore ? 'auto' : '0', overflow: 'hidden' }}>
<FormItem label={window.aliwareIntl.get('nacos.page.configeditor.Tags')} {...formItemLayout}>
<Select size="medium" hasArrow style={{ width: '100%' }} autoWidth={true} multiple={true} mode="tag" filterLocal={true} placeholder={window.aliwareIntl.get('nacos.page.configurationManagement.Please_enter_tag')} dataSource={this.state.tagLst} value={this.state.config_tags} onChange={this.setConfigTags.bind(this)} hasClear language={window.aliwareIntl.currentLanguageCode}>
<FormItem label={aliwareIntl.get('nacos.page.configeditor.Tags')} {...formItemLayout}>
<Select size="medium" hasArrow style={{ width: '100%' }} 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={window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.the_target_environment:')} {...formItemLayout}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configeditor.the_target_environment:')} {...formItemLayout}>
<Input {...init('appName')} readOnly={!!this.inApp} />
</FormItem>
</div>
<FormItem label={window.aliwareIntl.get('nacos.page.configeditor.Description')} {...formItemLayout}>
<FormItem label={aliwareIntl.get('nacos.page.configeditor.Description')} {...formItemLayout}>
<Input.TextArea htmlType="text" multiple rows={3} {...init('desc')} />
</FormItem>
<FormItem label={window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.configure_contents_of')} {...formItemLayout}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configeditor.configure_contents_of')} {...formItemLayout}>
<RadioGroup dataSource={list} value={this.state.configType} onChange={this.newChangeConfig.bind(this)} />
</FormItem>
<FormItem label={<span style={{ marginRight: 5 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.configcontent')}<Balloon trigger={<Icon type="help" size={'small'} style={{ color: '#1DC11D', marginRight: 5, verticalAlign: 'middle', marginTop: 2 }} />} align="t" style={{ marginRight: 5 }} triggerType="hover">
<p>{window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.Esc_exit')}</p>
<p>{window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.release_beta')}</p>
<FormItem label={<span style={{ marginRight: 5 }}>{aliwareIntl.get('com.alibaba.nacos.page.configeditor.configcontent')}<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.configeditor.Esc_exit')}</p>
<p>{aliwareIntl.get('com.alibaba.nacos.page.configeditor.release_beta')}</p>
</Balloon>:</span>} {...formItemLayout}>
<div style={{ clear: 'both', height: 300 }} id="container"></div>
</FormItem>
<FormItem {...formItemLayout} label="">
<div style={{ textAlign: 'right' }}>
{activeKey === 'beta' ? <Button style={{ marginRight: 10 }} type="primary" onClick={this.openDiff.bind(this, true)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.release')}</Button> : ''}
{activeKey === 'normal' ? <Button type="primary" disabled={this.state.hasbeta} style={{ marginRight: 10 }} onClick={this.openDiff.bind(this, this.state.checkedBeta)}>{this.state.checkedBeta ? window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.release') : window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.return')}</Button> : <Button type="primary" style={{ marginRight: 10 }} onClick={this.openDiff.bind(this, false)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.return')}</Button>}
{activeKey === 'beta' ? <Button style={{ marginRight: 10 }} type="primary" onClick={this.openDiff.bind(this, true)}>{aliwareIntl.get('com.alibaba.nacos.page.configeditor.release')}</Button> : ''}
{activeKey === 'normal' ? <Button type="primary" disabled={this.state.hasbeta} style={{ marginRight: 10 }} onClick={this.openDiff.bind(this, this.state.checkedBeta)}>{this.state.checkedBeta ? aliwareIntl.get('com.alibaba.nacos.page.configeditor.release') : aliwareIntl.get('com.alibaba.nacos.page.configeditor.return')}</Button> : <Button type="primary" style={{ marginRight: 10 }} onClick={this.openDiff.bind(this, false)}>{aliwareIntl.get('com.alibaba.nacos.page.configeditor.return')}</Button>}
<Button type="normal" onClick={this.goList.bind(this)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configeditor.')}</Button>
<Button type="normal" onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.configeditor.')}</Button>
</div>
</FormItem>
</Form>

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

@ -13,6 +13,7 @@
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;
@ -22,10 +23,10 @@ class ConfigRollback extends React.Component {
constructor(props) {
super(props);
this.field = new Field(this);
this.dataId = window.getParams('dataId') || 'yanlin';
this.group = window.getParams('group') || 'DEFAULT_GROUP';
this.serverId = window.getParams('serverId') || 'center';
this.nid = window.getParams('nid') || '';
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,
@ -34,13 +35,13 @@ class ConfigRollback extends React.Component {
//this.params = window.location.hash.split('?')[1]||'';
this.typeMap = { //操作映射提示
'U': 'publish',
'I': window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete'),
'I': aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete'),
'D': 'publish'
};
this.typeMapName = { //操作映射名
'U': window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.updated'),
'I': window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.inserted'),
'D': window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete')
'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')
};
}
@ -54,10 +55,10 @@ class ConfigRollback extends React.Component {
}
getDataDetail() {
let self = this;
this.tenant = window.getParams('namespace') || '';
this.serverId = window.getParams('serverId') || 'center';
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || 'center';
let url = `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`;
window.request({
request({
url: url,
success: function (result) {
if (result != null) {
@ -80,8 +81,8 @@ class ConfigRollback extends React.Component {
});
}
goList() {
let tenant = window.getParams('namespace');
window.hashHistory.push(`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}&namespace=${tenant}`);
let tenant = getParams('namespace');
this.props.history.push(`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}&namespace=${tenant}`);
}
onOpenConfirm() {
@ -91,10 +92,10 @@ class ConfigRollback extends React.Component {
type = 'delete';
}
Dialog.confirm({
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.please_confirm_rollback'),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.configRollback.please_confirm_rollback'),
content: <div style={{ marginTop: '-20px' }}>
<h3>{window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.determine')} {window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.the_following_configuration')}</h3>
<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' }}>
@ -110,8 +111,8 @@ class ConfigRollback extends React.Component {
</div>,
onOk: function () {
self.tenant = window.getParams('namespace') || '';
self.serverId = window.getParams('serverId') || 'center';
self.tenant = getParams('namespace') || '';
self.serverId = getParams('serverId') || 'center';
self.dataId = self.field.getValue("dataId");
self.group = self.field.getValue("group");
let postData = {
@ -129,14 +130,14 @@ class ConfigRollback extends React.Component {
}
// ajax
window.request({
request({
type: type,
contentType: 'application/x-www-form-urlencoded',
url: url,
data: postData,
success: function (data) {
if (data === true) {
Dialog.alert({ language: window.pageLanguage || 'zh-cn', content: window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.rollback_successful') });
Dialog.alert({ language: aliwareIntl.currentLanguageCode || 'zh-cn', content: aliwareIntl.get('com.alibaba.nacos.page.configRollback.rollback_successful') });
}
}
});
@ -156,35 +157,35 @@ class ConfigRollback extends React.Component {
};
return (
<div style={{ padding: 10 }}>
<h1>{window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.configuration_rollback')}</h1>
<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 ? window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.retracted') : window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.for_more_advanced')}</a>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.home')} {...formItemLayout}>
<FormItem label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.home')} {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('appName')} />
</FormItem>
</div>
<FormItem label={window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.action_type')} required {...formItemLayout}>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.configuration')} required {...formItemLayout}>
<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)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.rollback')}</Button>
<Button type="normal" onClick={this.goList.bind(this)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.return')}</Button>
<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>

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

@ -14,6 +14,7 @@
import React from 'react';
import { Button, Checkbox, Dialog, Field, Form, Input, Loading } from '@alifd/next';
import SuccessDialog from '../../../components/SuccessDialog';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -21,9 +22,9 @@ class ConfigSync extends React.Component {
constructor(props) {
super(props);
this.field = new Field(this);
this.dataId = window.getParams('dataId') || 'yanlin';
this.group = window.getParams('group') || '';
this.serverId = window.getParams('serverId') || '';
this.dataId = getParams('dataId') || 'yanlin';
this.group = getParams('group') || '';
this.serverId = getParams('serverId') || '';
this.state = {
configType: 0,
@ -58,7 +59,7 @@ class ConfigSync extends React.Component {
}
getDomain() {
let self = this;
window.request({
request({
url: `/diamond-ops/env/domain`,
success: function (data) {
@ -74,13 +75,13 @@ class ConfigSync extends React.Component {
}
getDataDetail() {
let self = this;
this.tenant = window.getParams('namespace') || '';
this.serverId = window.getParams('serverId') || 'center';
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=`;
}
window.request({
request({
url: url,
beforeSend: function () {
self.openLoading();
@ -130,8 +131,8 @@ class ConfigSync extends React.Component {
});
} else {
Dialog.alert({
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.page.configsync.error'),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.configsync.error'),
content: result.message
});
}
@ -145,7 +146,7 @@ class ConfigSync extends React.Component {
goList() {
//console.log(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`)
window.hashHistory.push(`/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() {
@ -160,15 +161,15 @@ class ConfigSync extends React.Component {
targetEnvs: this.envs
};
window.request({
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 = window.aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration_main');
_payload.title = window.aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration');
_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;
@ -186,7 +187,7 @@ class ConfigSync extends React.Component {
syncResult() {
let dataId = this.field.getValue('dataId');
let gruop = this.field.getValue('group');
window.hashHistory.push(`/diamond-ops/static/pages/config-sync/index.html?serverId=center&dataId=${dataId}&group=${gruop}`);
this.props.history.push(`/diamond-ops/static/pages/config-sync/index.html?serverId=center&dataId=${dataId}&group=${gruop}`);
}
changeEnv(values) {
this.targetEnvs = values;
@ -198,7 +199,7 @@ class ConfigSync extends React.Component {
this.ips = value;
}
goResult() {
window.hashHistory.push(`/consistencyEfficacy?serverId=${this.serverId}&dataId=${this.dataId}&group=${this.group}`);
this.props.history.push(`/consistencyEfficacy?serverId=${this.serverId}&dataId=${this.dataId}&group=${this.group}`);
}
openLoading() {
this.setState({
@ -225,31 +226,31 @@ class ConfigSync extends React.Component {
return (
<div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative', width: '100%' }} visible={this.state.loading} tip="Loading..." color="#333">
<h1>{window.aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration')}</h1>
<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 ? window.aliwareIntl.get('com.alibaba.nacos.page.configsync.retracted') : window.aliwareIntl.get('com.alibaba.nacos.page.configsync.for_more_advanced_options')}</a>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.configsync.home')} required {...formItemLayout}>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.configsync.belongs_to_the_environment')} required {...formItemLayout}>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.configsync.configuration')} required {...formItemLayout}>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.configsync.target')} required {...formItemLayout}>
<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>
@ -257,9 +258,9 @@ class ConfigSync extends React.Component {
<Form.Item label=" " {...formItemLayout}>
<div style={{ textAlign: 'right' }}>
<Button type="primary" onClick={this.sync.bind(this)} style={{ marginRight: 10 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.configsync.sync')}</Button>
<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)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configsync.return')}</Button>
<Button type="light" onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.configsync.return')}</Button>
</div>
</Form.Item>
</Form>

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

@ -12,13 +12,14 @@
*/
import React from 'react';
import BatchHandle from '../../../components/BatchHandle' ;
import RegionGroup from '../../../components/RegionGroup' ;
import ShowCodeing from '../../../components/ShowCodeing' ;
import DeleteDialog from '../../../components/DeleteDialog' ;
import CloneDialog from '../../../components/CloneDialog' ;
import ImportDialog from '../../../components/ImportDialog' ;
import ExportDialog from '../../../components/ExportDialog' ;
import BatchHandle from '../../../components/BatchHandle';
import RegionGroup from '../../../components/RegionGroup';
import ShowCodeing from '../../../components/ShowCodeing';
import DeleteDialog from '../../../components/DeleteDialog';
import CloneDialog from '../../../components/CloneDialog';
import ImportDialog from '../../../components/ImportDialog';
import ExportDialog from '../../../components/ExportDialog';
import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
import { Balloon, Button, Checkbox, Collapse, Dialog, Dropdown, Field, Form, Icon, Input, Loading, Menu, Pagination, Select, Slider, Table } from '@alifd/next';
const Accordion = Collapse;
@ -27,43 +28,43 @@ const { Panel } = Collapse;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
const DashboardCard = ({ data, height }) => <div>
{data.modeType === 'notice' ? <div data-spm-click={"gostr=/aliyun;locaid=notice"}><Slider style={{ marginBottom: data.modeList.length > 1 ? 20 : 10 }} arrows={false}>
{data.modeList.map((item, index) => <div key={index} className={"slider-img-wrapper"}>
<div className={"alert alert-success"} style={{ minHeight: 120, backgroundColor: '#e9feff' }}>
<div className={"alert-success-text"} style={{ fontWeight: 'bold' }}>{window.aliwareIntl.get("nacos.page.configurationManagement.Important_reminder0") /*重要提醒*/}</div>
<strong style={{ color: '#777a7e' }}>
<span>{item.title}</span>
</strong>
<strong>
<span><a style={{ marginLeft: 10, color: '#33cde5' }} href={item.url} target={"_blank"}>{window.aliwareIntl.get("nacos.page.configurationManagement.view_details1") /*查看详情*/}</a></span>
</strong>
</div>
</div>)}
</Slider> </div> : <div className={"dash-card-contentwrappers"} style={{ height: height ? height : 'auto' }} data-spm-click={`gostr=/aliyun;locaid=${data.modeType}`}>
<h3 className={"dash-card-title"}>{data.modeName}</h3>
<div className={"dash-card-contentlist"}>
{data.modeList ? data.modeList.map(item => {
return <div className={"dash-card-contentitem"}>
<a href={item.url} target={"_blank"}>{item.title}</a>
{item.tag === 'new' ? <img style={{ width: 28, marginLeft: 2, verticalAlign: 'text-bottom' }} src={"//img.alicdn.com/tps/TB1pS2YMVXXXXcCaXXXXXXXXXXX-56-24.png"} alt="" /> : ''}
{item.tag === 'hot' ? <img style={{ width: 28, marginLeft: 2, verticalAlign: 'text-bottom' }} src={"//img.alicdn.com/tps/TB1nusxPXXXXXb0aXXXXXXXXXXX-56-24.png"} alt="" /> : ''}
</div>;
}) : ''}
</div>
</div>} </div>;
{data.modeType === 'notice' ? <div data-spm-click={"gostr=/aliyun;locaid=notice"}><Slider style={{ marginBottom: data.modeList.length > 1 ? 20 : 10 }} arrows={false}>
{data.modeList.map((item, index) => <div key={index} className={"slider-img-wrapper"}>
<div className={"alert alert-success"} style={{ minHeight: 120, backgroundColor: '#e9feff' }}>
<div className={"alert-success-text"} style={{ fontWeight: 'bold' }}>{aliwareIntl.get("nacos.page.configurationManagement.Important_reminder0") /*重要提醒*/}</div>
<strong style={{ color: '#777a7e' }}>
<span>{item.title}</span>
</strong>
<strong>
<span><a style={{ marginLeft: 10, color: '#33cde5' }} href={item.url} target={"_blank"}>{aliwareIntl.get("nacos.page.configurationManagement.view_details1") /*查看详情*/}</a></span>
</strong>
</div>
</div>)}
</Slider> </div> : <div className={"dash-card-contentwrappers"} style={{ height: height ? height : 'auto' }} data-spm-click={`gostr=/aliyun;locaid=${data.modeType}`}>
<h3 className={"dash-card-title"}>{data.modeName}</h3>
<div className={"dash-card-contentlist"}>
{data.modeList ? data.modeList.map(item => {
return <div className={"dash-card-contentitem"}>
<a href={item.url} target={"_blank"}>{item.title}</a>
{item.tag === 'new' ? <img style={{ width: 28, marginLeft: 2, verticalAlign: 'text-bottom' }} src={"//img.alicdn.com/tps/TB1pS2YMVXXXXcCaXXXXXXXXXXX-56-24.png"} alt="" /> : ''}
{item.tag === 'hot' ? <img style={{ width: 28, marginLeft: 2, verticalAlign: 'text-bottom' }} src={"//img.alicdn.com/tps/TB1nusxPXXXXXb0aXXXXXXXXXXX-56-24.png"} alt="" /> : ''}
</div>;
}) : ''}
</div>
</div>} </div>;
class ConfigurationManagement extends React.Component {
constructor(props) {
super(props);
this.field = new Field(this);
this.appName = window.getParams('appName') || window.getParams('edasAppId') || '';
this.appName = getParams('appName') || getParams('edasAppId') || '';
this.preAppName = this.appName;
this.group = window.getParams('group') || '';
this.group = getParams('group') || '';
this.preGroup = this.group;
this.dataId = window.getParams('dataId') || '';
this.dataId = getParams('dataId') || '';
this.preDataId = this.dataId;
this.serverId = window.getParams('serverId') || 'center';
this.edasAppId = window.getParams('edasAppId') || '';
this.edasAppName = window.getParams('edasAppName') || '';
this.serverId = getParams('serverId') || 'center';
this.edasAppId = getParams('edasAppId') || '';
this.edasAppName = getParams('edasAppName') || '';
this.inApp = this.edasAppId;
this.state = {
value: "",
@ -100,14 +101,14 @@ class ConfigurationManagement extends React.Component {
group: this.preGroup || '',
appName: this.appName || ''
};
window.setParams(obj);
setParams(obj);
this.batchHandle = null;
this.toggleShowQuestionnaire = this.toggleShowQuestionnaire.bind(this);
}
componentDidMount() {
// this.getGroup();
if (window.pageLanguage === 'zh-cn') {
if (aliwareIntl.currentLanguageCode === 'zh-cn') {
// this.getContentList(); //在中文站获取概览页
this.setState({
isCn: true
@ -121,17 +122,17 @@ class ConfigurationManagement extends React.Component {
if (!this.checkQuestionnaire()) {
if (window.location.host === 'acm.console.aliyun.com') {
Dialog.alert({
title: window.aliwareIntl.get("nacos.page.configurationManagement.questionnaire2") /*问卷调查*/
title: aliwareIntl.get("nacos.page.configurationManagement.questionnaire2") /*问卷调查*/
, style: {
width: '60%'
},
content: <div>
<div style={{ fontSize: '15px', lineHeight: '22px' }}>{window.aliwareIntl.get("nacos.page.configurationManagement.a_ACM_front-end_monitoring_questionnaire,_the_time_limit_to_receive_Ali_cloud_voucher_details_shoved_stamp_the3") /*答ACM前端监控调查问卷，限时领取阿里云代金券详情猛戳：*/}<a href={"https://survey.aliyun.com/survey/k0BjJ2ARC"} target={"_blank"}>{window.aliwareIntl.get("nacos.page.configurationManagement.questionnaire2") /*问卷调查*/}</a>
</div>
<div style={{ fontSize: '15px' }}>{window.aliwareIntl.get("nacos.page.configurationManagement.no_longer_display4") /*不再显示：*/}<Checkbox onChange={this.toggleShowQuestionnaire} />
<div style={{ fontSize: '15px', lineHeight: '22px' }}>{aliwareIntl.get("nacos.page.configurationManagement.a_ACM_front-end_monitoring_questionnaire,_the_time_limit_to_receive_Ali_cloud_voucher_details_shoved_stamp_the3") /*答ACM前端监控调查问卷，限时领取阿里云代金券详情猛戳：*/}<a href={"https://survey.aliyun.com/survey/k0BjJ2ARC"} target={"_blank"}>{aliwareIntl.get("nacos.page.configurationManagement.questionnaire2") /*问卷调查*/}</a>
</div>
<div style={{ fontSize: '15px' }}>{aliwareIntl.get("nacos.page.configurationManagement.no_longer_display4") /*不再显示：*/}<Checkbox onChange={this.toggleShowQuestionnaire} />
</div>
</div>,
language: window.aliwareIntl.currentLanguageCode
language: aliwareIntl.currentLanguageCode
});
}
}
@ -142,7 +143,7 @@ class ConfigurationManagement extends React.Component {
*/
getContentList() {
window.request({
request({
url: 'com.alibaba.nacos.service.dashlist', //以 com.alibaba. 开头最终会转换为真正的url地址
data: {},
$data: {}, //替换请求url路径中{}占位符的内容
@ -194,9 +195,9 @@ class ConfigurationManagement extends React.Component {
}
navTo(url, record) {
this.serverId = window.getParams('serverId') || '';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`${url}?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}`);
this.serverId = getParams('serverId') || '';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
this.props.history.push(`${url}?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}`);
}
openLoading() {
this.setState({
@ -215,9 +216,9 @@ class ConfigurationManagement extends React.Component {
componentWillUnMount() {
window.removeEventListener('keydown', this.keyDownSearch.bind(this));
}
onSearch() {}
onSearch() { }
onChange() {}
onChange() { }
cleanAndGetData(needclean = false) {
if (needclean) {
this.dataId = '';
@ -226,7 +227,7 @@ class ConfigurationManagement extends React.Component {
group: '',
dataId: ''
});
window.setParams({
setParams({
group: '',
dataId: ''
});
@ -235,23 +236,23 @@ class ConfigurationManagement extends React.Component {
}
getData(pageNo = 1, clearSelect = true) {
let self = this;
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
this.serverId = window.getParams('serverId') || '';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
this.serverId = getParams('serverId') || '';
let urlPrefix = "";
if (this.dataId.indexOf("*") !== -1 || this
.group.indexOf("*") !== -1) {
urlPrefix = "/nacos/v1/cs/configs?search=blur";
} else {
urlPrefix = "/nacos/v1/cs/configs?search=accurate";
}
.group.indexOf("*") !== -1) {
urlPrefix = "/nacos/v1/cs/configs?search=blur";
} else {
urlPrefix = "/nacos/v1/cs/configs?search=accurate";
}
window.request({
request({
url: `${urlPrefix}&dataId=${this.dataId}&group=${this.group}&appName=${this.appName}&config_tags=${this.state.config_tags || ''}&pageNo=${pageNo}&pageSize=${this.state.pageSize}`,
beforeSend: function () {
self.openLoading();
},
success: function (data) {
if (data!=null) {
if (data != null) {
self.setState({
dataSource: data.pageItems,
total: data.totalCount,
@ -269,18 +270,18 @@ class ConfigurationManagement extends React.Component {
});
},
error: function (data) {
self.setState({
dataSource: [],
total: 0,
currentPage: 0
});
self.setState({
dataSource: [],
total: 0,
currentPage: 0
});
},
complete: function () {
self.closeLoading();
self.closeLoading();
}
});
}
showMore() {}
showMore() { }
chooseNav(record, key) {
let self = this;
switch (key) {
@ -299,10 +300,10 @@ class ConfigurationManagement extends React.Component {
removeConfig(record) {
let self = this;
Dialog.confirm({
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.Remove_configuration'),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.Remove_configuration'),
content: <div style={{ marginTop: '-20px' }}>
<h3>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.suredelete')}</h3>
<h3>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.suredelete')}</h3>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}>
@ -316,22 +317,22 @@ class ConfigurationManagement extends React.Component {
</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.environment')}</span>
<span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.environment')}</span>
<span style={{ color: '#c7254e' }}>
{self.serverId || ''}
</span>
</span>
</p>
</div>,
onOk: () => {
let url = `/nacos/v1/cs/configs?dataId=${record.dataId}&group=${record.group}`;
window.request({
request({
url: url,
type: 'delete',
success: function (res) {
let _payload = {};
_payload.title = window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.configuration_management');
_payload.title = aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.configuration_management');
_payload.content = '';
_payload.dataId = record.dataId;
_payload.group = record.group;
@ -349,7 +350,7 @@ class ConfigurationManagement extends React.Component {
});
}
renderLastTime(value, index, record) {
return <div>{window.aliwareIntl.intlNumberFormat(record.lastModifiedTime)}</div>;
return <div>{aliwareIntl.intlNumberFormat(record.lastModifiedTime)}</div>;
}
showCode(record) {
this.refs['showcode'].openDialog(record);
@ -357,19 +358,19 @@ class ConfigurationManagement extends React.Component {
renderCol(value, index, record) {
return <div>
<a onClick={this.goDetail.bind(this, record)} style={{ marginRight: 5 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.details')}</a>
<a onClick={this.goDetail.bind(this, record)} style={{ marginRight: 5 }}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.details')}</a>
<span style={{ marginRight: 5 }}>|</span>
<a style={{ marginRight: 5 }} onClick={this.showCode.bind(this, record)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.the_sample_code')}</a>
<a style={{ marginRight: 5 }} onClick={this.showCode.bind(this, record)}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.the_sample_code')}</a>
<span style={{ marginRight: 5 }}>|</span>
<a style={{ marginRight: 5 }} onClick={this.goEditor.bind(this, record)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.edit')}</a>
<a style={{ marginRight: 5 }} onClick={this.goEditor.bind(this, record)}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.edit')}</a>
<span style={{ marginRight: 5 }}>|</span>
<a style={{ marginRight: 5 }} onClick={this.removeConfig.bind(this, record)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.delete')}</a>
<a style={{ marginRight: 5 }} onClick={this.removeConfig.bind(this, record)}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.delete')}</a>
<span style={{ marginRight: 5 }}>|</span>
<Dropdown trigger={<span style={{ color: '#33cde5' }}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.more')}<Icon type={"arrow-down-filling"} size={'xxs'} /></span>} triggerType={"click"}>
<Dropdown trigger={<span style={{ color: '#33cde5' }}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.more')}<Icon type={"arrow-down-filling"} size={'xxs'} /></span>} triggerType={"click"}>
<Menu onItemClick={this.chooseNav.bind(this, record)}>
<Menu.Item key={"nav1"}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.version')}</Menu.Item>
<Menu.Item key={"nav3"}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.listener_query')}</Menu.Item>
<Menu.Item key={"nav1"}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.version')}</Menu.Item>
<Menu.Item key={"nav3"}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.listener_query')}</Menu.Item>
</Menu>
</Dropdown>
@ -389,7 +390,7 @@ class ConfigurationManagement extends React.Component {
this.changePage(1);
});
}
onInputUpdate() {}
onInputUpdate() { }
chooseFieldChange(fieldValue) {
this.setState({
@ -454,9 +455,9 @@ class ConfigurationManagement extends React.Component {
});
}
selectAll() {
window.setParam('dataId', this.dataId);
window.setParam('group', this.group);
window.setParam('appName', this.appName);
setParams('dataId', this.dataId);
setParams('group', this.group);
setParams('appName', this.appName);
this.getData();
}
resetAll() {
@ -474,9 +475,9 @@ class ConfigurationManagement extends React.Component {
this.selectAll();
}
chooseEnv(value) {
this.serverId = window.getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`/newconfig?serverId=${this.serverId || ''}&namespace=${this.tenant}&edasAppName=${this.edasAppName}&edasAppId=${this.edasAppId}&searchDataId=${this.dataId}&searchGroup=${this.group}`);
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
this.props.history.push(`/newconfig?serverId=${this.serverId || ''}&namespace=${this.tenant}&edasAppName=${this.edasAppName}&edasAppId=${this.edasAppId}&searchDataId=${this.dataId}&searchGroup=${this.group}`);
}
setNowNameSpace(name, id) {
this.setState({
@ -485,20 +486,20 @@ class ConfigurationManagement extends React.Component {
});
}
goDetail(record) {
this.serverId = window.getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
// 点击详情到另一个页面, 返回时候要保留原来的搜索条件 比如: record.dataId为详情的, this.dataId为搜索条件的.
window.hashHistory.push(`/configdetail?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}&edasAppName=${this.edasAppName}&searchDataId=${this.dataId}&searchGroup=${this.group}`);
this.props.history.push(`/configdetail?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}&edasAppName=${this.edasAppName}&searchDataId=${this.dataId}&searchGroup=${this.group}`);
}
goEditor(record) {
this.serverId = window.getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`/configeditor?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}&edasAppName=${this.edasAppName}&edasAppId=${this.edasAppId}&searchDataId=${this.dataId}&searchGroup=${this.group}`);
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
this.props.history.push(`/configeditor?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}&edasAppName=${this.edasAppName}&edasAppId=${this.edasAppId}&searchDataId=${this.dataId}&searchGroup=${this.group}`);
}
goConfigSync(record) {
this.serverId = window.getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`/configsync?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}`);
this.serverId = getParams('serverId') || 'center';
this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
this.props.history.push(`/configsync?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}`);
}
onSelectChange(...args) {
@ -530,20 +531,20 @@ class ConfigurationManagement extends React.Component {
return <div>
<div style={{ fontSize: 18, color: "#373D41", overflow: "auto" }}>{res.message}</div>
{"data" in res && res.data != null && <Accordion style={{ width: '500px' }}>
{"failedItems" in res.data && res.data.failedItems.length > 0 ? <Panel title={window.aliwareIntl.get('nacos.page.configurationManagement.failed_entry') + res.data.failedItems.length}>
<Table dataSource={res.data.failedItems} fixedHeader={true} maxBodyHeight={400} language={window.aliwareIntl.currentLanguageCode}>
{"failedItems" in res.data && res.data.failedItems.length > 0 ? <Panel title={aliwareIntl.get('nacos.page.configurationManagement.failed_entry') + res.data.failedItems.length}>
<Table dataSource={res.data.failedItems} fixedHeader={true} maxBodyHeight={400} language={aliwareIntl.currentLanguageCode}>
<Table.Column title={'Data ID'} dataIndex={"dataId"} />
<Table.Column title={'Group'} dataIndex={"group"} />
</Table>
</Panel> : <Panel style={{ display: 'none' }} />}
{"succeededItems" in res.data && res.data.succeededItems.length > 0 ? <Panel title={window.aliwareIntl.get('nacos.page.configurationManagement.successful_entry') + res.data.succeededItems.length}>
<Table dataSource={res.data.succeededItems} fixedHeader={true} maxBodyHeight={400} language={window.aliwareIntl.currentLanguageCode}>
<Table.Column title={'Data ID'} dataIndex={"dataId"} />
<Table.Column title={'Group'} dataIndex={"group"} />
</Table>
</Panel> : <Panel style={{ display: 'none' }} />}
{"unprocessedItems" in res.data && res.data.unprocessedItems.length > 0 ? <Panel title={window.aliwareIntl.get('nacos.page.configurationManagement.unprocessed_entry') + res.data.unprocessedItems.length}>
<Table dataSource={res.data.unprocessedItems} fixedHeader={true} maxBodyHeight={400} language={window.aliwareIntl.currentLanguageCode}>
</Panel> : <Panel style={{ display: 'none' }} />}
{"succeededItems" in res.data && res.data.succeededItems.length > 0 ? <Panel title={aliwareIntl.get('nacos.page.configurationManagement.successful_entry') + res.data.succeededItems.length}>
<Table dataSource={res.data.succeededItems} fixedHeader={true} maxBodyHeight={400} language={aliwareIntl.currentLanguageCode}>
<Table.Column title={'Data ID'} dataIndex={"dataId"} />
<Table.Column title={'Group'} dataIndex={"group"} />
</Table>
</Panel> : <Panel style={{ display: 'none' }} />}
{"unprocessedItems" in res.data && res.data.unprocessedItems.length > 0 ? <Panel title={aliwareIntl.get('nacos.page.configurationManagement.unprocessed_entry') + res.data.unprocessedItems.length}>
<Table dataSource={res.data.unprocessedItems} fixedHeader={true} maxBodyHeight={400} language={aliwareIntl.currentLanguageCode}>
<Table.Column title={'Data ID'} dataIndex={"dataId"} />
<Table.Column title={'Group'} dataIndex={"group"} />
</Table>
@ -574,92 +575,92 @@ class ConfigurationManagement extends React.Component {
});
}
render() {
const pubnodedata = window.aliwareIntl.get('pubnodata');
const pubnodedata = aliwareIntl.get('pubnodata');
const locale = {
empty: pubnodedata
};
const helpDataId = <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"}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.click_to_learn_DataId')}</a>
</Balloon>;
<a href={window._getLink && window._getLink("knowDataid")} target={"_blank"}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.click_to_learn_DataId')}</a>
</Balloon>;
const helpGroup = <Balloon trigger={<span>Group <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("knowGoup")} target={"_blank"}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.click_to_learn_Group')}</a>
</Balloon>;
<a href={window._getLink && window._getLink("knowGoup")} target={"_blank"}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.click_to_learn_Group')}</a>
</Balloon>;
return (
<div>
<BatchHandle ref={ref => this.batchHandle = ref} />
<Loading shape={"flower"} style={{ position: 'relative', width: '100%', overflow: 'auto' }} visible={this.state.loading} tip={"Loading..."} color={"#333"}>
<div className={this.state.hasdash ? 'dash-page-container' : ''}>
<div className={this.state.hasdash ? 'dash-left-container' : ''} style={{ position: 'relative', padding: 10 }}>
<div style={{ display: this.inApp ? 'none' : 'block', marginTop: -15 }}>
<RegionGroup namespaceCallBack={this.cleanAndGetData.bind(this)} setNowNameSpace={this.setNowNameSpace.bind(this)} />
</div>
<div style={{ display: this.inApp ? 'none' : 'block', 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', color: '#ccc', fontSize: '12px' }}>
<span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>{window.aliwareIntl.get("nacos.page.configurationManagement.configuration_management8") /*配置管理*/}</span>
<span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>|</span>
<span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>{this.state.nownamespace_name}</span>
<span style={{ fontSize: '14px', color: '#000', marginRight: 18 }}>{this.state.nownamespace_id}</span>
{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.query_results')}
<strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.article_meet_the_requirements')}
</h3>
<div style={{ position: 'absolute', textAlign: 'right', zIndex: 2, right: 0, top: 0 }}>
</div>
</div>
<div style={{ position: 'relative', marginTop: 10, height: this.state.isAdvancedQuery ? 'auto' : 48 }}>
<Form direction={"hoz"} inline>
<FormItem label={"Data ID:"}>
<Input htmlType={"text"} placeholder={window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.fuzzyd')} style={{ width: 200 }} value={this.state.dataId} onChange={this.getDataId.bind(this)} />
</FormItem>
<FormItem label={"Group:"}>
<Select.AutoComplete style={{ width: 200 }} size={"medium"} placeholder={window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.fuzzyg')} dataSource={this.state.groups} value={this.state.group} onChange={this.setGroup.bind(this)} hasClear language={window.aliwareIntl.currentLanguageCode}>
</Select.AutoComplete>
</FormItem>
<FormItem label={""}>
<Button type={"primary"} style={{ marginRight: 10 }} onClick={this.selectAll.bind(this)} data-spm-click={"gostr=/aliyun;locaid=dashsearch"}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.query')}</Button>
</FormItem>
<FormItem style={this.inApp ? { display: "none" } : { verticalAlign: "middle", marginTop: 0, marginLeft: 10 }}>
<div style={{ color: '#33cde5', fontSize: 12, cursor: 'pointer' }} onClick={this.changeAdvancedQuery}>
<span style={{ marginRight: 5, lineHeight: "28px" }}>{window.aliwareIntl.get("nacos.page.configurationManagement.advanced_query9") /*高级查询*/}</span><Icon type={this.state.isAdvancedQuery ? 'arrow-up-filling' : 'arrow-down-filling'} size={'xs'} />
<div className={this.state.hasdash ? 'dash-page-container' : ''}>
<div className={this.state.hasdash ? 'dash-left-container' : ''} style={{ position: 'relative', padding: 10 }}>
<div style={{ display: this.inApp ? 'none' : 'block', marginTop: -15 }}>
<RegionGroup namespaceCallBack={this.cleanAndGetData.bind(this)} setNowNameSpace={this.setNowNameSpace.bind(this)} />
</div>
<div style={{ display: this.inApp ? 'none' : 'block', 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', color: '#ccc', fontSize: '12px' }}>
<span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>{aliwareIntl.get("nacos.page.configurationManagement.configuration_management8") /*配置管理*/}</span>
<span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>|</span>
<span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>{this.state.nownamespace_name}</span>
<span style={{ fontSize: '14px', color: '#000', marginRight: 18 }}>{this.state.nownamespace_id}</span>
{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.query_results')}
<strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.article_meet_the_requirements')}
</h3>
<div style={{ position: 'absolute', textAlign: 'right', zIndex: 2, right: 0, top: 0 }}>
</div>
</FormItem>
<br />
<FormItem style={this.inApp ? { display: "none" } : {}} label={window.aliwareIntl.get("nacos.page.configurationManagement.HOME_Application0") /*归属应用：*/}>
<Input htmlType={"text"} placeholder={window.aliwareIntl.get("nacos.page.configurationManagement.Please_enter_the_name_of_the_app1") /*请输入应用名称*/} style={{ width: 200 }} value={this.state.appName} onChange={this.setAppName.bind(this)} />
</div>
<div style={{ position: 'relative', marginTop: 10, height: this.state.isAdvancedQuery ? 'auto' : 48, overflow: "hidden" }}>
<Form direction={"hoz"} inline>
<FormItem label={"Data ID:"}>
<Input htmlType={"text"} placeholder={aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.fuzzyd')} style={{ width: 200 }} value={this.state.dataId} onChange={this.getDataId.bind(this)} />
</FormItem>
</FormItem>
<FormItem label={window.aliwareIntl.get('nacos.page.configurationManagement.Tags')}>
<Select style={{ width: 200 }} size={"medium"} hasArrow multiple={true} mode="tag" filterLocal={false} placeholder={window.aliwareIntl.get('nacos.page.configurationManagement.Please_enter_tag')} dataSource={this.state.tagLst} value={this.state.config_tags} onChange={this.setConfigTags.bind(this)} hasClear language={window.aliwareIntl.currentLanguageCode} />
</FormItem>
</Form>
<div style={{ position: 'absolute', right: 10, top: 4 }}>
<Icon type={"add"} size={'medium'} style={{ color: 'black', marginRight: 0, verticalAlign: 'middle', cursor: 'pointer', backgroundColor: '#eee', border: '1px solid #ddd', padding: '3px 6px' }} onClick={this.chooseEnv.bind(this)} />
<FormItem label={"Group:"}>
<Select.AutoComplete style={{ width: 200 }} size={"medium"} placeholder={aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.fuzzyg')} dataSource={this.state.groups} value={this.state.group} onChange={this.setGroup.bind(this)} hasClear language={aliwareIntl.currentLanguageCode}>
</Select.AutoComplete>
</FormItem>
<FormItem label={""}>
<Button type={"primary"} style={{ marginRight: 10 }} onClick={this.selectAll.bind(this)} data-spm-click={"gostr=/aliyun;locaid=dashsearch"}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.query')}</Button>
</FormItem>
<FormItem style={this.inApp ? { display: "none" } : { verticalAlign: "middle", marginTop: 0, marginLeft: 10 }}>
<div style={{ color: '#33cde5', fontSize: 12, cursor: 'pointer' }} onClick={this.changeAdvancedQuery}>
<span style={{ marginRight: 5, lineHeight: "28px" }}>{aliwareIntl.get("nacos.page.configurationManagement.advanced_query9") /*高级查询*/}</span><Icon type={this.state.isAdvancedQuery ? 'arrow-up-filling' : 'arrow-down-filling'} size={'xs'} />
</div>
</FormItem>
<br />
<FormItem style={this.inApp ? { display: "none" } : {}} label={aliwareIntl.get("nacos.page.configurationManagement.HOME_Application0") /*归属应用：*/}>
<Input htmlType={"text"} placeholder={aliwareIntl.get("nacos.page.configurationManagement.Please_enter_the_name_of_the_app1") /*请输入应用名称*/} style={{ width: 200 }} value={this.state.appName} onChange={this.setAppName.bind(this)} />
</FormItem>
<FormItem label={aliwareIntl.get('nacos.page.configurationManagement.Tags')}>
<Select style={{ width: 200 }} size={"medium"} hasArrow multiple={true} mode="tag" filterLocal={false} 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>
</Form>
<div style={{ position: 'absolute', right: 10, top: 4 }}>
<Icon type={"add"} size={'medium'} style={{ color: 'black', marginRight: 0, verticalAlign: 'middle', cursor: 'pointer', backgroundColor: '#eee', border: '1px solid #ddd', padding: '3px 6px' }} onClick={this.chooseEnv.bind(this)} />
</div>
</div>
<div>
<Table dataSource={this.state.dataSource} locale={locale} fixedHeader={true} maxBodyHeight={400} language={aliwareIntl.currentLanguageCode} ref={"dataTable"}>
<Table.Column title={helpDataId} dataIndex={"dataId"} />
<Table.Column title={helpGroup} dataIndex={"group"} />
{!this.inApp ? <Table.Column title={aliwareIntl.get('nacos.page.configurationManagement.HOME_Application')} dataIndex={"appName"} /> : <div></div>}
<Table.Column title={aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.operation')} cell={this.renderCol.bind(this)} />
</Table>
{this.state.dataSource.length > 0 && <div style={{ marginTop: 10, overflow: "hidden" }}>
<Pagination style={{ float: "right" }} pageSizeList={[10, 20, 30]} pageSizeSelector={"dropdown"} onPageSizeChange={this.handlePageSizeChange.bind(this)} current={this.state.currentPage} language={aliwareIntl.currentLanguageCode || 'zh-cn'} total={this.state.total} pageSize={this.state.pageSize} onChange={this.changePage.bind(this)} />
</div>}
</div>
<ShowCodeing ref={"showcode"} />
<DeleteDialog ref={"delete"} />
<CloneDialog ref={"cloneDialog"} />
<ImportDialog ref={"importDialog"} />
<ExportDialog ref={"exportDialog"} />
</div>
</div>
<div>
<Table dataSource={this.state.dataSource} locale={locale} fixedHeader={true} maxBodyHeight={400} language={window.aliwareIntl.currentLanguageCode} ref={"dataTable"}>
<Table.Column title={helpDataId} dataIndex={"dataId"} />
<Table.Column title={helpGroup} dataIndex={"group"} />
{!this.inApp ? <Table.Column title={window.aliwareIntl.get('nacos.page.configurationManagement.HOME_Application')} dataIndex={"appName"} /> : <div></div>}
<Table.Column title={window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.operation')} cell={this.renderCol.bind(this)} />
</Table>
{this.state.dataSource.length > 0 && <div style={{ marginTop: 10, overflow: "hidden" }}>
<Pagination style={{ float: "right" }} pageSizeList={[10, 20, 30]} pageSizeSelector={"dropdown"} onPageSizeChange={this.handlePageSizeChange.bind(this)} current={this.state.currentPage} language={window.pageLanguage || 'zh-cn'} total={this.state.total} pageSize={this.state.pageSize} onChange={this.changePage.bind(this)} />
</div>}
</div>
<ShowCodeing ref={"showcode"} />
<DeleteDialog ref={"delete"} />
<CloneDialog ref={"cloneDialog"} />
<ImportDialog ref={"importDialog"} />
<ExportDialog ref={"exportDialog"} />
</div>
{this.state.hasdash ? <div className={"dash-right-container"} style={{ overflow: 'auto', height: window.innerHeight - 40 }}>
{this.state.contentList.map((v, i) => {
{this.state.hasdash ? <div className={"dash-right-container"} style={{ overflow: 'auto', height: window.innerHeight - 40 }}>
{this.state.contentList.map((v, i) => {
return <DashboardCard data={v} height={'auto'} key={`show${i}`} />;
})}
</div> : ''}
</div> : ''}
</div>
</Loading>
</div>

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

@ -12,6 +12,7 @@
*/
import React from 'react';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
import { Button, Field, Form, Input } from '@alifd/next';
const FormItem = Form.Item;
@ -23,20 +24,20 @@ class HistoryDetail extends React.Component {
this.state = {
showmore: false
};
this.edasAppName = window.getParams('edasAppName');
this.edasAppId = window.getParams('edasAppId');
this.edasAppName = getParams('edasAppName');
this.edasAppId = getParams('edasAppId');
this.inApp = this.edasAppName;
this.field = new Field(this);
this.dataId = window.getParams('dataId') || 'yanlin';
this.group = window.getParams('group') || 'DEFAULT_GROUP';
this.serverId = window.getParams('serverId') || 'center';
this.nid = window.getParams('nid') || '123509854';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
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': window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.update'),
'I': window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.insert'),
'D': window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.delete')
'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')
};
}
@ -51,7 +52,7 @@ class HistoryDetail extends React.Component {
getDataDetail() {
let self = this;
window.request({
request({
url: `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`,
success: function (result) {
if (result != null) {
@ -70,7 +71,7 @@ class HistoryDetail extends React.Component {
goList() {
//console.log(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`)
window.hashHistory.push(`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}&namespace=${this.tenant}`);
this.props.history.push(`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}&namespace=${this.tenant}`);
}
render() {
const init = this.field.init;
@ -84,34 +85,34 @@ class HistoryDetail extends React.Component {
};
return (
<div style={{ padding: 10 }}>
<h1>{window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.history_details')}</h1>
<h1>{aliwareIntl.get('com.alibaba.nacos.page.historyDetail.history_details')}</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 ? window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.recipient_from') : window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.more_advanced_options')}</a>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.home')} {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('appName')} />
</FormItem>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.action_type')} required {...formItemLayout}>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.configure_content')} required {...formItemLayout}>
<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)}>{window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.return')}</Button>
<Button type="primary" onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.historyDetail.return')}</Button>
</FormItem>
</Form>

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

@ -13,7 +13,8 @@
import React from 'react';
import { Button, Field, Form, Input, Loading, Pagination, Table } from '@alifd/next';
import RegionGroup from '../../../components/RegionGroup' ;
import RegionGroup from '../../../components/RegionGroup';
import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -22,14 +23,14 @@ class HistoryRollback extends React.Component {
super(props);
this.field = new Field(this);
this.appName = window.getParams('appName') || '';
this.appName = getParams('appName') || '';
this.preAppName = this.appName;
this.group = window.getParams('group') || '';
this.group = getParams('group') || '';
this.preGroup = this.group;
this.dataId = window.getParams('dataId') || '';
this.dataId = getParams('dataId') || '';
this.preDataId = this.dataId;
this.serverId = window.getParams('serverId') || '';
this.serverId = getParams('serverId') || '';
this.state = {
value: "",
visible: false,
@ -52,7 +53,7 @@ class HistoryRollback extends React.Component {
appName: this.appName || '',
serverId: this.serverId || ''
};
window.setParams(obj);
setParams(obj);
}
componentDidMount() {
@ -87,9 +88,9 @@ class HistoryRollback extends React.Component {
componentWillUnMount() {
window.removeEventListener('keydown', this.keyDownSearch.bind(this));
}
onSearch() {}
onSearch() { }
onChange() {}
onChange() { }
cleanAndGetData(needclean = false) {
if (needclean) {
this.dataId = '';
@ -98,7 +99,7 @@ class HistoryRollback extends React.Component {
group: '',
dataId: ''
});
window.setParams({
setParams({
group: '',
dataId: ''
});
@ -108,9 +109,9 @@ class HistoryRollback extends React.Component {
}
getData(pageNo = 1) {
let self = this;
this.serverId = window.getParams('serverId') || '';
if(!this.dataId) return false;
window.request({
this.serverId = getParams('serverId') || '';
if (!this.dataId) return false;
request({
beforeSend: function () {
self.openLoading();
},
@ -129,12 +130,12 @@ class HistoryRollback extends React.Component {
}
});
}
showMore() {}
showMore() { }
renderCol(value, index, record) {
return <div>
<a onClick={this.goDetail.bind(this, record)} style={{ marginRight: 5 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.details')}</a>
<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)}>{window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.rollback')}</a>
<a style={{ marginRight: 5 }} onClick={this.goRollBack.bind(this, record)}>{aliwareIntl.get('com.alibaba.nacos.page.historyRollback.rollback')}</a>
</div>;
}
changePage(value) {
@ -143,7 +144,7 @@ class HistoryRollback extends React.Component {
});
this.getData(value);
}
onInputUpdate() {}
onInputUpdate() { }
chooseFieldChange(fieldValue) {
this.setState({
@ -195,11 +196,11 @@ class HistoryRollback extends React.Component {
}
selectAll() {
if (this.dataId !== this.preDataId) {
window.setParam('dataId', this.dataId);
setParams('dataId', this.dataId);
this.preDataId = this.dataId;
}
if (this.group !== this.preGroup) {
window.setParam('group', this.preGroup);
setParams('group', this.preGroup);
this.preGroup = this.group;
}
this.getData();
@ -215,7 +216,7 @@ class HistoryRollback extends React.Component {
showAppName: false,
showgroup: false
});
window.setParams({
setParams({
group: '',
dataId: ''
});
@ -224,20 +225,20 @@ class HistoryRollback extends React.Component {
console.log(value);
}
renderLastTime(value, index, record) {
return window.aliwareIntl.intlTimeFormat(record.lastModifiedTime);
return aliwareIntl.intlTimeFormat(record.lastModifiedTime);
}
goDetail(record) {
this.serverId = window.getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`/historyDetail?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&nid=${record.id}&namespace=${this.tenant}`);
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 = window.getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`/configRollback?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&nid=${record.id}&namespace=${this.tenant}&nid=${record.id}`);
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 = window.aliwareIntl.get('pubnodata');
const pubnodedata = aliwareIntl.get('pubnodata');
const locale = {
empty: pubnodedata
@ -245,7 +246,7 @@ class HistoryRollback extends React.Component {
return (
<div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative', width: "100%" }} visible={this.state.loading} tip="Loading..." color="#333">
<RegionGroup left={window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.to_configure')} namespaceCallBack={this.cleanAndGetData.bind(this)} />
<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>**/}
@ -254,18 +255,18 @@ class HistoryRollback extends React.Component {
<Form inline>
<Form.Item label="Data ID:">
<Input htmlType="text" placeholder={window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.dataid')}
style={{ width: 200 }} value={this.state.dataId} onChange={this.getDataId.bind(this)} />
<Input htmlType="text" placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.dataid')}
style={{ width: 200 }} value={this.state.dataId} onChange={this.getDataId.bind(this)} />
</Form.Item>
<Form.Item label="Group:">
<Input placeholder={window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.group')} id="userName" name="userName" value={this.state.group}
style={{ width: 200 }} onChange={this.getGroup.bind(this)} />
<Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.group')} id="userName" name="userName" value={this.state.group}
style={{ width: 200 }} onChange={this.getGroup.bind(this)} />
</Form.Item>
<Form.Item label="">
<Button type="primary" style={{ marginRight: 10 }} onClick={this.selectAll.bind(this)}>
{window.aliwareIntl.get('com.alibaba.nacos.page.historyrollback.query')}</Button>
{}
{aliwareIntl.get('com.alibaba.nacos.page.historyrollback.query')}</Button>
{}
</Form.Item>
@ -275,21 +276,21 @@ class HistoryRollback extends React.Component {
</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' }}>{window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.queryresult')}<strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>{window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.article_meet')}</h3>
<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={window.aliwareIntl.currentLanguageCode}>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.last_update_time')} dataIndex="time" cell={this.renderLastTime.bind(this)} />
<Table.Column title={window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.operation')} cell={this.renderCol.bind(this)} />
<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={window.pageLanguage} total={this.state.total} pageSize={this.state.pageSize} onChange={this.changePage.bind(this)} />,
<Pagination current={this.state.currentPage} language={aliwareIntl.currentLanguageCode} total={this.state.total} pageSize={this.state.pageSize} onChange={this.changePage.bind(this)} />,
</div>
</Loading>
</div>

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

@ -12,7 +12,8 @@
*/
import React from 'react';
import RegionGroup from '../../../components/RegionGroup' ;
import RegionGroup from '../../../components/RegionGroup';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import './index.less';
import { Button, Field, Form, Grid, Input, Loading, Pagination, Select, Table } from '@alifd/next';
const FormItem = Form.Item;
@ -32,10 +33,10 @@ class ListeningToQuery extends React.Component {
dataSource: []
};
this.field = new Field(this);
this.group = window.getParams('group') || '';
this.dataId = window.getParams('dataId') || '';
this.serverId = window.getParams('serverId') || '';
this.tenant = window.getParams('namespace') || '';
this.group = getParams('group') || '';
this.dataId = getParams('dataId') || '';
this.serverId = getParams('serverId') || '';
this.tenant = getParams('namespace') || '';
}
componentDidMount() {
@ -44,9 +45,9 @@ class ListeningToQuery extends React.Component {
this.field.setValue('dataId', this.dataId);
}
onSearch() {}
onSearch() { }
onChange() {}
onChange() { }
openLoading() {
this.setState({
loading: true
@ -67,33 +68,33 @@ class ListeningToQuery extends React.Component {
} else {
var dataId = this.getValue('dataId');
var group = this.getValue('group');
if(!dataId) return false;
if (!dataId) return false;
queryUrl = `/nacos/v1/cs/configs/listener?dataId=${dataId}&group=${group}`;
}
window.request({
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 = {};
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 = {};
} else {
let obj = {};
obj.ip = key;
obj.md5 = status[key];
dataSoureTmp.push(obj);
}
}
}
self.setState({
self.setState({
dataSource: dataSoureTmp || [],
total: data.length
});
@ -105,7 +106,7 @@ class ListeningToQuery extends React.Component {
});
}
showMore() {}
showMore() { }
changePage(value) {
this.setState({
currentPage: value
@ -116,7 +117,7 @@ class ListeningToQuery extends React.Component {
this.forceUpdate();
}
renderStatus(values, index, record) {
return <div>{record.pushStatus === true ? <span style={{ color: 'green' }}>{window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.success')}</span> : <span style={{ color: 'red' }}>{window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.failure')}</span>}
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() {
@ -129,14 +130,14 @@ class ListeningToQuery extends React.Component {
const { init, getValue } = this.field;
this.init = init;
this.getValue = getValue;
const pubnodedata = window.aliwareIntl.get('pubnodata');
const pubnodedata = aliwareIntl.get('pubnodata');
const locale = {
empty: pubnodedata
};
const selectDataSource = [
{
label: window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.configuration'),
label: aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.configuration'),
value: 0
},
{
@ -147,55 +148,55 @@ class ListeningToQuery extends React.Component {
return (
<div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative' }} visible={this.state.loading} tip="Loading..." color="#333">
<RegionGroup left={window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.listener_query')} namespaceCallBack={this.getQueryLater.bind(this)} />
<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={window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_dimension')}>
<Select dataSource={selectDataSource} style={{ width: 200 }} {...this.init('type')} language={window.aliwareIntl.currentLanguageCode} />
<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'
}}>
<Input placeholder={window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_enter_the_dataid')} style={{ width: 200 }} {...this.init('dataId')} />
<Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_enter_the_dataid')} style={{ width: 200 }} {...this.init('dataId')} />
</FormItem>
<FormItem label="Group:" style={{
display: this.getValue('type') === 0 ? '' : 'none'
}}>
<Input placeholder={window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_input_group')} style={{ width: 200 }} {...this.init('group')} />
<Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_input_group')} style={{ width: 200 }} {...this.init('group')} />
</FormItem>
<FormItem label="IP:" style={{
display: this.getValue('type') === 0 ? 'none' : ''
}}>
<Input placeholder={window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_input_ip')} style={{ width: 200, boxSize: 'border-box' }} {...this.init('ip')} />
<Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_input_ip')} style={{ width: 200, boxSize: 'border-box' }} {...this.init('ip')} />
</FormItem>
<FormItem label="">
<Button type="primary" onClick={this.queryTrackQuery.bind(this)} style={{ marginRight: 10 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query')}</Button>
{}
<Button type="primary" onClick={this.queryTrackQuery.bind(this)} style={{ marginRight: 10 }}>{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query')}</Button>
{}
</FormItem>
</Form>
</Col>
</Row>
<div style={{ position: 'relative' }}>
<h3 style={{ height: 28, lineHeight: '28px', paddingLeft: 10, borderLeft: '3px solid #09c', margin: 0, marginBottom: 10 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_results:_query')}<strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>{window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.article_meet_the_requirements_of_the_configuration.')}</h3>
<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={window.aliwareIntl.currentLanguageCode}>
{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={window.aliwareIntl.currentLanguageCode}>
</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={window.pageLanguage} />,
<Pagination current={this.state.currentPage} total={this.state.total} pageSize={this.state.pageSize} onChange={this.changePage.bind(this)} language={aliwareIntl.currentLanguageCode} />,
</div>
</Loading>
</div>

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

@ -14,6 +14,7 @@
import React from 'react';
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';
const FormItem = Form.Item;
@ -26,15 +27,15 @@ class NewConfig extends React.Component {
constructor(props) {
super(props);
this.field = new Field(this);
this.edasAppName = window.getParams('edasAppName') || '';
this.edasAppId = window.getParams('edasAppId') || '';
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 = window.getParams('dataId') || '';
this.group = window.getParams('group') || 'DEFAULT_GROUP';
this.searchDataId = window.getParams('searchDataId') || '';
this.searchGroup = window.getParams('searchGroup') || '';
this.dataId = getParams('dataId') || '';
this.group = getParams('group') || 'DEFAULT_GROUP';
this.searchDataId = getParams('searchDataId') || '';
this.searchGroup = getParams('searchGroup') || '';
this.state = {
configType: 'text',
codeValue: ``,
@ -61,7 +62,7 @@ class NewConfig extends React.Component {
this.betaips = document.getElementById('betaips');
//this.createCodeMirror('text', '');
this.chontenttab = document.getElementById('chontenttab'); //diff标签
this.tenant = window.getParams('namespace') || '';
this.tenant = getParams('namespace') || '';
this.field.setValue('group', this.group);
if (!window.monaco) {
window.importEditor(() => {
@ -163,10 +164,10 @@ class NewConfig extends React.Component {
});
}
goList() {
this.tenant = window.getParams('namespace') || '';
this.serverId = window.getParams('serverId') || '';
this.tenant = getParams('namespace') || '';
this.serverId = getParams('serverId') || '';
//console.log(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`)
window.hashHistory.push(`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${this.searchDataId}&namespace=${this.tenant}`);
this.props.history.push(`/configurationManagement?serverId=${this.serverId}&group=${this.searchGroup}&dataId=${this.searchDataId}&namespace=${this.tenant}`);
}
openLoading() {
this.setState({
@ -208,7 +209,7 @@ class NewConfig extends React.Component {
if (!content) {
return;
}
this.tenant = window.getParams('namespace') || '';
this.tenant = getParams('namespace') || '';
let payload = {
dataId: self.state.addonBefore + this.field.getValue('dataId'),
group: this.field.getValue('group'),
@ -219,9 +220,9 @@ class NewConfig extends React.Component {
appName: this.inApp ? this.edasAppId : this.field.getValue('appName'),
tenant: this.tenant
};
this.serverId = window.getParams('serverId') || 'center';
this.serverId = getParams('serverId') || 'center';
let url = `/nacos/v1/cs/configs`;
window.request({
request({
type: 'post',
contentType: 'application/x-www-form-urlencoded',
url: url,
@ -231,15 +232,15 @@ class NewConfig extends React.Component {
},
success: function (res) {
let _payload = {};
_payload.maintitle = window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing_main');
_payload.title = window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing');
_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;
window.setParams({ group: payload.group, dataId: payload.dataId }); //设置参数
setParams({ group: payload.group, dataId: payload.dataId }); //设置参数
_payload.isok = true;
} else {
_payload.isok = false;
@ -252,8 +253,8 @@ class NewConfig extends React.Component {
},
error: function (res) {
Dialog.alert({
language: window.pageLanguage || 'zh-cn',
content: window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.publish_failed')
language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: aliwareIntl.get('com.alibaba.nacos.page.newconfig.publish_failed')
});
self.closeLoading();
}
@ -284,7 +285,7 @@ class NewConfig extends React.Component {
const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) {
callback(window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.do_not_ente'));
callback(aliwareIntl.get('com.alibaba.nacos.page.newconfig.do_not_ente'));
} else {
callback();
}
@ -333,63 +334,63 @@ class NewConfig extends React.Component {
return (
<div style={{ padding: 10 }}>
<Loading shape={"flower"} tip={"Loading..."} style={{ width: '100%', position: 'relative' }} visible={this.state.loading} color={"#333"}>
<h1>{window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing')}</h1>
<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: window.aliwareIntl.get('com.alibaba.nacos.page.newconfig')
message: aliwareIntl.get('com.alibaba.nacos.page.newconfig')
}, {
max: 255,
message: window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.dataId_is_not_empty')
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={window.aliwareIntl.get("com.alibaba.nacos.page.newconfig.group_placeholder")} defaultValue={this.group} {...init('group', {
<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: window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.the_more_advanced')
message: aliwareIntl.get('com.alibaba.nacos.page.newconfig.the_more_advanced')
}, {
max: 127,
message: window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.group_is_not_empty')
message: aliwareIntl.get('com.alibaba.nacos.page.newconfig.group_is_not_empty')
}, { validator: this.validateChart.bind(this) }]
})} onChange={this.setGroup.bind(this)} hasClear language={window.aliwareIntl.currentLanguageCode}>
})} 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}>{window.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>
<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 ? window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.Data_ID_length') : window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.collapse')}</a>
<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={window.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={window.aliwareIntl.get('nacos.page.configurationManagement.Please_enter_tag')} dataSource={this.state.tagLst} value={this.state.config_tags} onChange={this.setConfigTags.bind(this)} hasClear language={window.aliwareIntl.currentLanguageCode}>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.Group_ID_cannot_be_longer')} {...formItemLayout}>
<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={window.aliwareIntl.get('nacos.page.newconfig.Description')} {...formItemLayout}>
<FormItem label={aliwareIntl.get('nacos.page.newconfig.Description')} {...formItemLayout}>
<Input.TextArea htmlType={"text"} multiple rows={3} {...init('desc')} />
</FormItem>
<FormItem label={window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.the_target_environment')} {...formItemLayout}>
<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>{window.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>{window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.configure_contents_of')}</p>
<p>{window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.full_screen')}</p>
<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>
@ -397,9 +398,9 @@ class NewConfig extends React.Component {
<FormItem {...formItemLayout} label={""}>
<div style={{ textAlign: 'right' }}>
<Button type={"primary"} style={{ marginRight: 10 }} onClick={this.publishConfig.bind(this)}>{window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.esc_exit')}</Button>
<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)}>{window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.release')}</Button>
<Button type={"light"} onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.release')}</Button>
</div>
</FormItem>
</Form>

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

@ -17,6 +17,7 @@ import RegionGroup from '../../components/RegionGroup';
import DeleteDialog from '../../components/DeleteDialog';
import NewNameSpace from '../../components/NewNameSpace';
import EditorNameSpace from '../../components/EditorNameSpace';
import { getParams, setParams, request, aliwareIntl } from '../../globalLib';
import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -36,10 +37,10 @@ class NameSpace extends React.Component {
}
getNameSpaces(delayTime = 2000) {
let self = this;
// let serverId = window.getParams('serverId') || 'center';
// let serverId = getParams('serverId') || 'center';
self.openLoading();
setTimeout(() => {
window.request({
request({
type: 'get',
beforeSend: function () { },
url: `/nacos/v1/console/namespaces`,
@ -61,8 +62,8 @@ class NameSpace extends React.Component {
});
} else {
Dialog.alert({
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.page.namespace.prompt'),
language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: aliwareIntl.get('com.alibaba.nacos.page.namespace.prompt'),
content: res.message
});
}
@ -94,43 +95,43 @@ class NameSpace extends React.Component {
detailNamespace(record) {
let namespace = record.namespace; //获取ak,sk
window.request({
request({
url: `/nacos/v1/console/namespaces?show=all&namespaceId=${namespace}`,
beforeSend: () => {
this.openLoading();
},
success: res => {
if (res !== null) {
if (res !== null) {
Dialog.alert({
style: { width: "500px" },
needWrapper: false,
language: window.pageLanguage || 'zh-cn',
title: window.aliwareIntl.get('nacos.page.namespace.Namespace_details'),
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 }}>{window.aliwareIntl.get('nacos.page.namespace.namespace_name')}</span>
<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 }}>{window.aliwareIntl.get('nacos.page.namespace.namespace_ID')}</span>
<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 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.namespace.configuration')}</span>
<span style={{ color: '#c7254e' }}>
{res.configCount} / {res.quota}
</span>
<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 }}>{window.aliwareIntl.get('nacos.page.configdetail.Description')}</span>
<span style={{ color: '#c7254e' }}>
{res.namespaceDesc}
</span>
<span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('nacos.page.configdetail.Description')}</span>
<span style={{ color: '#c7254e' }}>
{res.namespaceDesc}
</span>
</p>
</div>
</div>
@ -144,46 +145,46 @@ class NameSpace extends React.Component {
}
removeNamespace(record) {
// let serverId = window.getParams('serverId') || 'center';
// let serverId = getParams('serverId') || 'center';
Dialog.confirm({
title: window.aliwareIntl.get('nacos.page.namespace.remove_the_namespace'),
title: aliwareIntl.get('nacos.page.namespace.remove_the_namespace'),
content: <div style={{ marginTop: '-20px' }}>
<h3>{window.aliwareIntl.get('nacos.page.namespace.sure_you_want_to_delete_the_following_namespaces?')}</h3>
<h3>{aliwareIntl.get('nacos.page.namespace.sure_you_want_to_delete_the_following_namespaces?')}</h3>
<p>
<span style={{ color: '#999', marginRight: 5 }}>{window.aliwareIntl.get('nacos.page.namespace.namespace_name')}</span>
<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 }}>{window.aliwareIntl.get('nacos.page.namespace.namespace_ID')}</span>
<span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('nacos.page.namespace.namespace_ID')}</span>
<span style={{ color: '#c7254e' }}>
{record.namespace}
</span>
</p>
</div>,
language: window.pageLanguage || 'zh-cn',
language: aliwareIntl.currentLanguageCode || 'zh-cn',
onOk: () => {
let url = `/nacos/v1/console/namespaces?namespaceId=${record.namespace}`;
window.request({
let url = `/nacos/v1/console/namespaces?namespaceId=${record.namespace}`;
request({
url: url,
type: 'delete',
success: res => {
let _payload = {};
_payload.title = window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.configuration_management');
_payload.title = aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.configuration_management');
if (res === true) {
let urlnamespace = window.getParams('namespace');
let urlnamespace = getParams('namespace');
if (record.namespace === urlnamespace) {
window.setParams('namespace', this.state.defaultNamespace);
setParams('namespace', this.state.defaultNamespace);
}
Dialog.confirm({
language: window.pageLanguage || 'zh-cn',
content: window.aliwareIntl.get('nacos.page.namespace._Remove_the_namespace_success'),
title: window.aliwareIntl.get('nacos.page.namespace.deleted_successfully')
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: window.pageLanguage || 'zh-cn',
language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: res.message,
title: "删除失败"
});
@ -197,7 +198,7 @@ class NameSpace extends React.Component {
}
refreshNameSpace() {
window.request({
request({
type: 'get',
url: `/nacos/v1/console/namespaces`,
success: res => {
@ -219,15 +220,15 @@ class NameSpace extends React.Component {
this.refs['editgroup'].openDialog(record);
}
renderOption(value, index, record) {
let _delinfo = <a onClick={this.removeNamespace.bind(this, record)} style={{ marginRight: 10 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.namespace.delete')}</a>;
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}>{window.aliwareIntl.get('com.alibaba.nacos.page.namespace.delete')}</span>;
_delinfo = <span style={{ marginRight: 10, cursor: 'not-allowed' }} disabled={true}>{aliwareIntl.get('com.alibaba.nacos.page.namespace.delete')}</span>;
}
let _detailinfo = <a onClick={this.detailNamespace.bind(this, record)} style={{ marginRight: 10 }}>{window.aliwareIntl.get('nacos.page.namespace.details')}</a>;
let _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)}>{window.aliwareIntl.get('com.alibaba.nacos.page.namespace.edit')}</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={true}>{window.aliwareIntl.get('com.alibaba.nacos.page.namespace.edit')}</span>;
_editinfo = <span style={{ marginRight: 10, cursor: 'not-allowed' }} disabled={true}>{aliwareIntl.get('com.alibaba.nacos.page.namespace.edit')}</span>;
}
return <div>
{_detailinfo}
@ -242,7 +243,7 @@ class NameSpace extends React.Component {
let name = record.namespaceShowName;
if (record.type === 0) {
name = window.aliwareIntl.get('com.alibaba.nacos.page.namespace.public');
name = aliwareIntl.get('com.alibaba.nacos.page.namespace.public');
}
return <div>{name}</div>;
}
@ -250,27 +251,27 @@ class NameSpace extends React.Component {
return <div>{value} / {record.quota}</div>;
}
render() {
const pubnodedata = window.aliwareIntl.get('pubnodata');
const pubnodedata = aliwareIntl.get('pubnodata');
const locale = {
empty: pubnodedata
};
return <div style={{ padding: 10 }} className='clearfix'>
<RegionGroup left={window.aliwareIntl.get('nacos.page.namespace.Namespace')} />
<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)}>{window.aliwareIntl.get('com.alibaba.nacos.page.namespace.add')}</Button>
<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={window.aliwareIntl.currentLanguageCode}>
<Table.Column title={window.aliwareIntl.get('com.alibaba.nacos.page.namespace.namespace_names')} dataIndex="namespaceShowName" cell={this.renderName.bind(this)} />
<Table.Column title={window.aliwareIntl.get('nacos.page.namespace.namespace_number')} dataIndex="namespace" />
<Table.Column title={window.aliwareIntl.get('com.alibaba.nacos.page.namespace.configuration')} dataIndex="configCount" cell={this.renderConfigCount.bind(this)} />
<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)} />
<Table.Column title={window.aliwareIntl.get('com.alibaba.nacos.page.namespace.operation')} dataIndex="time" cell={this.renderOption.bind(this)} />
<Table.Column title={aliwareIntl.get('com.alibaba.nacos.page.namespace.operation')} dataIndex="time" cell={this.renderOption.bind(this)} />
</Table>
</div>
</div>

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

@ -12,8 +12,9 @@
*/
import React from 'react';
import {Dialog, Form, Input, Switch, Select, Message} from '@alifd/next';
import {I18N, DIALOG_FORM_LAYOUT} from './constant'
import { request } from '../../../globalLib';
import { Dialog, Form, Input, Switch, Select, Message } from '@alifd/next';
import { I18N, DIALOG_FORM_LAYOUT } from './constant'
const FormItem = Form.Item;
const Option = Select.Option
@ -30,7 +31,7 @@ class EditClusterDialog extends React.Component {
}
show(editCluster) {
const {metadata = {}} = editCluster
const { metadata = {} } = editCluster
editCluster.metadataText = Object.keys(metadata).map(k => `${k}=${metadata[k]}`).join(',')
this.setState({
editCluster,
@ -39,13 +40,13 @@ class EditClusterDialog extends React.Component {
}
hide() {
this.setState({editClusterDialogVisible: false})
this.setState({ editClusterDialogVisible: false })
}
onConfirm() {
const {openLoading, closeLoading, getServiceDetail} = this.props
const {name, serviceName, metadataText, defaultCheckPort, useIPPort4Check, healthChecker} = this.state.editCluster
window.request({
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: {
@ -71,21 +72,21 @@ class EditClusterDialog extends React.Component {
}
onChangeCluster(changeVal) {
const {editCluster = {}} = this.state
const { editCluster = {} } = this.state
this.setState({
editCluster: Object.assign({}, editCluster, changeVal)
})
}
render() {
const {editCluster = {}, editClusterDialogVisible} = this.state
const { editCluster = {}, editClusterDialogVisible } = this.state
const {
healthChecker = {},
useIPPort4Check,
defaultCheckPort = '80',
metadataText = ''
} = editCluster
const {type, path, headers} = healthChecker
const { type, path, headers } = healthChecker
const healthCheckerChange = changeVal => this.onChangeCluster({
healthChecker: Object.assign({}, healthChecker, changeVal)
})
@ -103,7 +104,7 @@ class EditClusterDialog extends React.Component {
<Select
className="in-select"
defaultValue={type}
onChange={type => healthCheckerChange({type})}
onChange={type => healthCheckerChange({ type })}
>
<Option value="TCP">TCP</Option>
<Option value="HTTP">HTTP</Option>
@ -111,14 +112,14 @@ class EditClusterDialog extends React.Component {
</FormItem>
<FormItem label={`${I18N.CHECK_PORT}:`}>
<Input className="in-text"
value={defaultCheckPort}
onChange={defaultCheckPort => this.onChangeCluster({defaultCheckPort})}
value={defaultCheckPort}
onChange={defaultCheckPort => this.onChangeCluster({ defaultCheckPort })}
/>
</FormItem>
<FormItem label={`${I18N.USE_IP_PORT_CHECK}:`}>
<Switch
checked={useIPPort4Check}
onChange={useIPPort4Check => this.onChangeCluster({useIPPort4Check})}
onChange={useIPPort4Check => this.onChangeCluster({ useIPPort4Check })}
/>
</FormItem>
{
@ -132,7 +133,7 @@ class EditClusterDialog extends React.Component {
<Input
className="in-text"
value={path}
onChange={path => healthCheckerChange({path})}
onChange={path => healthCheckerChange({ path })}
/>
</div>
</div>
@ -144,7 +145,7 @@ class EditClusterDialog extends React.Component {
<Input
className="in-text"
value={headers}
onChange={headers => healthCheckerChange({headers})}
onChange={headers => healthCheckerChange({ headers })}
/>
</div>
</div>
@ -155,7 +156,7 @@ class EditClusterDialog extends React.Component {
<Input
className="in-text"
value={metadataText}
onChange={metadataText => this.onChangeCluster({metadataText})}
onChange={metadataText => this.onChangeCluster({ metadataText })}
/>
</FormItem>
</Form>

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

@ -12,8 +12,9 @@
*/
import React from 'react';
import {Dialog, Form, Input, Switch, Message} from '@alifd/next';
import {I18N, DIALOG_FORM_LAYOUT} from './constant'
import { request } from '../../../globalLib';
import { Dialog, Form, Input, Switch, Message } from '@alifd/next';
import { I18N, DIALOG_FORM_LAYOUT } from './constant'
const FormItem = Form.Item;
@ -29,24 +30,24 @@ class EditInstanceDialog extends React.Component {
}
show(editInstance) {
const {metadata = {}} = 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})
this.setState({ editInstance, editInstanceDialogVisible: true })
}
hide() {
this.setState({editInstanceDialogVisible: false})
this.setState({ editInstanceDialogVisible: false })
}
onConfirm() {
const {serviceName, clusterName, getInstanceList, openLoading, closeLoading} = this.props
const {ip, port, weight, enabled, metadataText} = this.state.editInstance
window.request({
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},
data: { serviceName, clusterName, ip, port, weight, enable: enabled, metadata: metadataText },
dataType: 'text',
beforeSend: () => openLoading(),
success: res => {
@ -62,14 +63,14 @@ class EditInstanceDialog extends React.Component {
}
onChangeCluster(changeVal) {
const {editInstance = {}} = this.state
const { editInstance = {} } = this.state
this.setState({
editInstance: Object.assign({}, editInstance, changeVal)
})
}
render() {
const {editInstanceDialogVisible, editInstance} = this.state
const { editInstanceDialogVisible, editInstance } = this.state
return (
<Dialog
className="instance-edit-dialog"
@ -90,19 +91,19 @@ class EditInstanceDialog extends React.Component {
<Input
className="in-text"
value={editInstance.weight}
onChange={weight => this.onChangeCluster({weight})}
onChange={weight => this.onChangeCluster({ weight })}
/>
</FormItem>
<FormItem label={`${I18N.WHETHER_ONLINE}:`}>
<Switch
checked={editInstance.enabled}
onChange={enabled => this.onChangeCluster({enabled})}/>
onChange={enabled => this.onChangeCluster({ enabled })} />
</FormItem>
<FormItem label={`${I18N.METADATA}:`}>
<Input
className="in-text"
value={editInstance.metadataText}
onChange={metadataText => this.onChangeCluster({metadataText})}
onChange={metadataText => this.onChangeCluster({ metadataText })}
/>
</FormItem>
</Form>

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

@ -12,8 +12,9 @@
*/
import React from 'react';
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
@ -30,26 +31,26 @@ class EditServiceDialog extends React.Component {
}
show(editService) {
const {metadata = {}} = editService
const { metadata = {} } = editService
if (Object.keys(metadata).length) {
editService.metadataText = Object.keys(metadata).map(k => `${k}=${metadata[k]}`).join(',')
}
this.setState({editService, editServiceDialogVisible: true})
this.setState({ editService, editServiceDialogVisible: true })
}
hide() {
this.setState({editServiceDialogVisible: false})
this.setState({ editServiceDialogVisible: false })
}
onConfirm() {
const editService = Object.assign({}, this.state.editService)
const {name, protectThreshold, healthCheckMode, metadataText} = editService
window.request({
const { name, protectThreshold, healthCheckMode, metadataText } = editService
request({
method: 'POST',
url: '/nacos/v1/ns/service/update',
data: {serviceName: name, protectThreshold, healthCheckMode, metadata: metadataText},
data: { serviceName: name, protectThreshold, healthCheckMode, metadata: metadataText },
dataType: 'text',
beforeSend: () => this.setState({loading: true}),
beforeSend: () => this.setState({ loading: true }),
success: res => {
if (res !== 'ok') {
Message.error(res)
@ -57,20 +58,20 @@ class EditServiceDialog extends React.Component {
}
this.props.getServiceDetail()
},
complete: () => this.setState({loading: false})
complete: () => this.setState({ loading: false })
})
this.hide()
}
onChangeCluster(changeVal) {
const {editService = {}} = this.state
const { editService = {} } = this.state
this.setState({
editService: Object.assign({}, editService, changeVal)
})
}
render() {
const {editService, editServiceDialogVisible} = this.state
const { editService, editServiceDialogVisible } = this.state
const {
name,
protectThreshold,
@ -94,14 +95,14 @@ class EditServiceDialog extends React.Component {
<Input
className="in-text"
value={protectThreshold}
onChange={protectThreshold => this.onChangeCluster({protectThreshold})}
onChange={protectThreshold => this.onChangeCluster({ protectThreshold })}
/>
</FormItem>
<FormItem label={`${I18N.HEALTH_CHECK_PATTERN}:`}>
<Select
className="in-select"
defaultValue={healthCheckMode}
onChange={healthCheckMode => this.onChangeCluster({healthCheckMode})}
onChange={healthCheckMode => this.onChangeCluster({ healthCheckMode })}
>
<Option value="server">{I18N.HEALTH_CHECK_PATTERN_SERVICE}</Option>
<Option value="client">{I18N.HEALTH_CHECK_PATTERN_CLIENT}</Option>
@ -112,7 +113,7 @@ class EditServiceDialog extends React.Component {
<Input
className="in-text"
value={metadataText}
onChange={metadataText => this.onChangeCluster({metadataText})}
onChange={metadataText => this.onChangeCluster({ metadataText })}
/>
</FormItem>
</Form>

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

@ -12,8 +12,9 @@
*/
import React from 'react';
import {Button, Pagination, Table} from '@alifd/next';
import {I18N, HEALTHY_COLOR_MAPPING} from './constant'
import { request } from '../../../globalLib';
import { Button, Pagination, Table } from '@alifd/next';
import { I18N, HEALTHY_COLOR_MAPPING } from './constant'
import EditInstanceDialog from "./EditInstanceDialog";
@ -23,7 +24,7 @@ class InstanceTable extends React.Component {
super(props);
this.state = {
loading: false,
instance: {count: 0, list: []},
instance: { count: 0, list: [] },
pageNum: 1,
pageSize: 10
}
@ -34,18 +35,18 @@ class InstanceTable extends React.Component {
}
openLoading() {
this.setState({loading: true})
this.setState({ loading: true })
}
closeLoading() {
this.setState({loading: false})
this.setState({ loading: false })
}
getInstanceList() {
const {clusterName, serviceName} = this.props
const { clusterName, serviceName } = this.props
if (!clusterName) return
const {pageSize, pageNum} = this.state
window.request({
const { pageSize, pageNum } = this.state
request({
url: '/nacos/v1/ns/catalog/instanceList',
data: {
serviceName,
@ -54,7 +55,7 @@ class InstanceTable extends React.Component {
startPg: pageNum
},
beforeSend: () => this.openLoading(),
success: instance => this.setState({instance}),
success: instance => this.setState({ instance }),
complete: () => this.closeLoading()
})
}
@ -64,38 +65,38 @@ class InstanceTable extends React.Component {
}
switchState(index, record) {
const {instance} = this.state
const {ip, port, weight, enabled} = record
const {clusterName, serviceName} = this.props
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
window.request({
request({
method: 'POST',
url: '/nacos/v1/ns/instance/update',
data: {serviceName, clusterName, ip, port, weight, enable: !enabled},
data: { serviceName, clusterName, ip, port, weight, enable: !enabled },
dataType: 'text',
beforeSend: () => this.openLoading(),
success: () => this.setState({instance: newVal}),
success: () => this.setState({ instance: newVal }),
complete: () => this.closeLoading()
})
}
onChangePage(pageNum) {
this.setState({pageNum}, () => this.getInstanceList())
this.setState({ pageNum }, () => this.getInstanceList())
}
rowColor = ({healthy}) => ({className: `row-bg-${HEALTHY_COLOR_MAPPING[`${healthy}`]}`})
rowColor = ({ healthy }) => ({ className: `row-bg-${HEALTHY_COLOR_MAPPING[`${healthy}`]}` })
render() {
const {clusterName, serviceName} = this.props
const {instance, pageSize, loading} = this.state
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 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"
@ -116,7 +117,7 @@ class InstanceTable extends React.Component {
onClick={() => this.switchState(index, record)}
>{I18N[record.enabled ? 'OFFLINE' : 'ONLINE']}</Button>
</div>
)}/>
)} />
</Table>
{
instance.count > pageSize

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

@ -12,18 +12,19 @@
*/
import React from 'react';
import {Button, Card, Form, Loading} from '@alifd/next';
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 { 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中*****************************/
@ -51,21 +52,21 @@ class ServiceDetail extends React.Component {
}
getServiceDetail() {
const {serviceName} = this.state
window.request({
const { serviceName } = this.state
request({
url: `/nacos/v1/ns/catalog/serviceDetail?serviceName=${serviceName}`,
beforeSend: () => this.openLoading(),
success: ({clusters = [], service = {}}) => this.setState({service, clusters}),
success: ({ clusters = [], service = {} }) => this.setState({ service, clusters }),
complete: () => this.closeLoading()
})
}
openLoading() {
this.setState({loading: true})
this.setState({ loading: true })
}
closeLoading() {
this.setState({loading: false})
this.setState({ loading: false })
}
openEditServiceDialog() {
@ -77,8 +78,8 @@ class ServiceDetail extends React.Component {
}
render() {
const {serviceName, loading, service = {}, clusters} = this.state
const {metadata = {}} = service
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">
@ -106,7 +107,7 @@ class ServiceDetail extends React.Component {
>{I18N.EDIT_SERVICE}</Button>
</h1>
<Form style={{width: '60%'}} {...pageFormLayout}>
<Form style={{ width: '60%' }} {...pageFormLayout}>
<FormItem label={`${I18N.SERVICE_NAME}:`}>
<p>{service.name}</p>
</FormItem>

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

@ -11,7 +11,9 @@
* limitations under the License.
*/
const getI18N = (key, prefix = 'com.alibaba.nacos.page.serviceDetail.') => window.aliwareIntl.get(prefix + key)
import { aliwareIntl } from '../../../globalLib';
const getI18N = (key, prefix = 'com.alibaba.nacos.page.serviceDetail.') => aliwareIntl.get(prefix + key)
export const I18N = {}
/**
* 服务列表
@ -127,8 +129,8 @@ I18N.UPDATE_INSTANCE = getI18N('update_instance')
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 = {

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

@ -12,14 +12,15 @@
*/
import React from 'react';
import RegionGroup from '../../../components/RegionGroup/index' ;
import {Button, Field, Form, Grid, Input, Loading, Pagination, Table} from '@alifd/next';
import {I18N, STATUS_COLOR_MAPPING} from './constant'
import RegionGroup from '../../../components/RegionGroup/index';
import { request, aliwareIntl } from '../../../globalLib';
import { Button, Field, Form, Grid, Input, Loading, Pagination, Table } from '@alifd/next';
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 {
@ -37,20 +38,20 @@ class ServiceList extends React.Component {
}
openLoading() {
this.setState({loading: true})
this.setState({ loading: true })
}
closeLoading() {
this.setState({loading: false})
this.setState({ loading: false })
}
queryServiceList() {
const {currentPage, pageSize, keyword} = this.state
const { currentPage, pageSize, keyword } = this.state
const parameter = [`startPg=${currentPage}`, `pgSize=${pageSize}`, `keyword=${keyword}`]
window.request({
request({
url: `/nacos/v1/ns/catalog/serviceList?${parameter.join('&')}`,
beforeSend: () => this.openLoading(),
success: ({count = 0, serviceList = []} = {}) => this.setState({
success: ({ count = 0, serviceList = [] } = {}) => this.setState({
dataSource: serviceList,
total: count
}),
@ -67,20 +68,20 @@ class ServiceList extends React.Component {
setTimeout(() => this.queryServiceList());
}
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;
const { keyword } = this.state
const { init, getValue } = this.field;
this.init = init;
this.getValue = getValue;
const locale = {empty: I18N.PUBNODEDATA}
const locale = { empty: I18N.PUBNODEDATA }
return (
<div className="main-container service-management">
<Loading
shape="flower"
style={{position: 'relative'}}
style={{ position: 'relative' }}
visible={this.state.loading}
tip="Loading..."
color="#333"
@ -89,58 +90,58 @@ class ServiceList extends React.Component {
left={I18N.SERVICE_LIST}
namespaceCallBack={this.getQueryLater.bind(this)}
/>
<Row className="demo-row" style={{marginBottom: 10, padding: 0}}>
<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}}
style={{ width: 200 }}
value={keyword}
onChange={keyword => this.setState({keyword})}
onChange={keyword => this.setState({ keyword })}
/>
</FormItem>
<FormItem label="">
<Button
type="primary"
onClick={() => this.setState({currentPage: 1}, () => this.queryServiceList())}
style={{marginRight: 10}}
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}}>
<Row style={{ padding: 0 }}>
<Col span="24" style={{ padding: 0 }}>
<Table
dataSource={this.state.dataSource}
fixedHeader={true}
maxBodyHeight={530}
locale={locale}
language={window.aliwareIntl.currentLanguageCode}
language={aliwareIntl.currentLanguageCode}
className={r => this.rowColor[r.status]}
getRowProps={this.rowColor}
>
<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_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) => (
<Button
type="normal"
onClick={() => this.props.history.push(`/serviceDetail?name=${record.name}`)}
>{I18N.DETAIL}</Button>
)}/>
)} />
</Table>
</Col>
</Row>
<div style={{marginTop: 10, textAlign: 'right'}}>
<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={window.pageLanguage}
onChange={currentPage => this.setState({ currentPage }, () => this.queryServiceList())}
language={aliwareIntl.currentLanguageCode}
/>
</div>
</Loading>

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

@ -11,7 +11,9 @@
* limitations under the License.
*/
const getI18N = (key, prefix = 'com.alibaba.nacos.page.serviceManagement.') => window.aliwareIntl.get(prefix + key)
import { aliwareIntl } from '../../../globalLib';
const getI18N = (key, prefix = 'com.alibaba.nacos.page.serviceManagement.') => aliwareIntl.get(prefix + key)
export const I18N = {}
/**
* 服务列表

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

@ -12,8 +12,7 @@
*/
import React from 'react';
import {Router, Route, Switch} from 'dva/router';
import './globalLib';
import { Router, Route, Switch } from 'dva/router';
import './lib.js';
import App from './containers/App';
import Namespace from './pages/NameSpace';
@ -29,24 +28,23 @@ import ConfigurationManagement from './pages/ConfigurationManagement/Configurati
import ServiceList from './pages/ServiceManagement/ServiceList';
import ServiceDetail from './pages/ServiceManagement/ServiceDetail';
function RouterConfig({history}) {
window.hashHistory = history;
function RouterConfig({ history }) {
return (
<Router history={history}>
<Switch>
<App>
<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 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>