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

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

@ -13,6 +13,7 @@
import React from 'react'; import React from 'react';
import { Dialog, Pagination, Transfer } from '@alifd/next'; import { Dialog, Pagination, Transfer } from '@alifd/next';
import { request, aliwareIntl } from '../../globalLib';
import './index.less'; import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/ /*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -69,7 +70,7 @@ class BatchHandle extends React.Component {
} }
getData() { getData() {
const dataSource = this.state.dataSource; 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}`, 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 => { success: res => {
if (res.code === 200) { if (res.code === 200) {
@ -104,13 +105,10 @@ class BatchHandle extends React.Component {
render() { render() {
// console.log("valueList: ", this.state.valueList, this.transfer); // 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={"批量操作"}> 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> <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'} /> <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'} />
{/* <div> <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" />
<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> </div>
</Dialog>; </Dialog>;
} }

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

@ -13,6 +13,7 @@
import React from 'react'; import React from 'react';
import './index.less'; import './index.less';
import { getParams, request, aliwareIntl } from '../../globalLib';
import { Button, Dialog, Field, Form, Select } from '@alifd/next'; import { Button, Dialog, Field, Form, Select } from '@alifd/next';
const FormItem = Form.Item; const FormItem = Form.Item;
const { AutoComplete: Combobox } = Select; const { AutoComplete: Combobox } = Select;
@ -22,7 +23,7 @@ class CloneDialog extends React.Component {
constructor(props) { constructor(props) {
super(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.defaultPolicy = 'abort';
this.state = { this.state = {
visible: false, visible: false,
@ -36,7 +37,7 @@ class CloneDialog extends React.Component {
records: [], records: [],
namespaces: [], namespaces: [],
policy: this.defaultPolicy, policy: this.defaultPolicy,
policyLabel: window.aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0'), policyLabel: aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0'),
total: 0 total: 0
}; };
this.field = new Field(this); this.field = new Field(this);
@ -53,10 +54,10 @@ class CloneDialog extends React.Component {
componentDidMount() { } componentDidMount() { }
openDialog(payload, callback) { openDialog(payload, callback) {
let serverId = window.getParams('serverId') || 'center'; let serverId = getParams('serverId') || 'center';
this.checkData = payload.checkData; this.checkData = payload.checkData;
this.callback = callback; this.callback = callback;
window.request({ request({
type: 'get', type: 'get',
url: `/diamond-ops/service/serverId/${serverId}/namespaceInfo`, url: `/diamond-ops/service/serverId/${serverId}/namespaceInfo`,
success: res => { success: res => {
@ -86,8 +87,8 @@ class CloneDialog extends React.Component {
this.field.setValue('select', ''); this.field.setValue('select', '');
} else { } else {
Dialog.alert({ Dialog.alert({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: window.aliwareIntl.get('nacos.component.CloneDialog.get_the_namespace_failed'), title: aliwareIntl.get('nacos.component.CloneDialog.get_the_namespace_failed'),
content: res.message content: res.message
}); });
} }
@ -117,7 +118,7 @@ class CloneDialog extends React.Component {
getQuery() { getQuery() {
if (this.state.records.length > 0) { 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) { if (this.state.dataId === '' && this.state.group === '' && this.state.appName === '' && this.state.configTags.length === 0) {
return ''; return '';
@ -130,10 +131,10 @@ class CloneDialog extends React.Component {
query += ' Group: ' + this.state.group + ','; query += ' Group: ' + this.state.group + ',';
} }
if (this.state.appName !== '') { 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) { 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); return query.substr(0, query.length - 1);
} }
@ -152,30 +153,30 @@ class CloneDialog extends React.Component {
render() { render() {
const init = this.field.init; 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>; </div>;
return <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}> <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><span style={{ color: '#33cde5' }}>{this.state.tenantFrom.name}</span>{" | " + this.state.tenantFrom.id}
</p> </p>
</FormItem> </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> <p><span style={{ color: '#33cde5' }}>{this.state.total}</span> {this.getQuery()} </p>
</FormItem> </FormItem>
<FormItem label={window.aliwareIntl.get('nacos.component.CloneDialog.target_space')} {...this.formItemLayout}> <FormItem label={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', { <Combobox style={{ width: '80%' }} size="medium" hasArrow placeholder={aliwareIntl.get('nacos.component.CloneDialog.select_namespace')} dataSource={this.state.namespaces} {...init('select', {
props: { props: {
onChange: this.setTenantTo.bind(this) onChange: this.setTenantTo.bind(this)
}, },
rules: [{ required: true, message: window.aliwareIntl.get('nacos.component.CloneDialog.select_namespace') }] rules: [{ required: true, message: aliwareIntl.get('nacos.component.CloneDialog.select_namespace') }]
})} language={window.aliwareIntl.currentLanguageCode}> })} language={aliwareIntl.currentLanguageCode}>
</Combobox> </Combobox>
</FormItem> </FormItem>
<FormItem label={window.aliwareIntl.get('nacos.component.CloneDialog.the_same_configuration')} {...this.formItemLayout}> <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={window.aliwareIntl.currentLanguageCode}> <Select size="medium" hasArrow defaultValue={this.defaultPolicy} dataSource={this.allPolicy} onChange={this.setPolicy.bind(this)} language={aliwareIntl.currentLanguageCode}>
</Select> </Select>
</FormItem> </FormItem>
</Form> </Form>

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

@ -13,6 +13,7 @@
import React from 'react'; import React from 'react';
import './index.less'; import './index.less';
import { aliwareIntl } from '../../globalLib';
import { Button, Dialog, Grid, Icon } from '@alifd/next'; import { Button, Dialog, Grid, Icon } from '@alifd/next';
const { Row, Col } = Grid; const { Row, Col } = Grid;
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/ /*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -21,7 +22,7 @@ class DeleteDialog extends React.Component {
super(props); super(props);
this.state = { this.state = {
visible: false, visible: false,
title: window.aliwareIntl.get('nacos.component.DeleteDialog.Configuration_management'), title: aliwareIntl.get('nacos.component.DeleteDialog.Configuration_management'),
content: '', content: '',
isok: true, isok: true,
dataId: '', dataId: '',
@ -48,9 +49,9 @@ class DeleteDialog extends React.Component {
}); });
} }
render() { 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> 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> <div>
<Row> <Row>
<Col span={'4'} style={{ paddingTop: 16 }}> <Col span={'4'} style={{ paddingTop: 16 }}>
@ -59,7 +60,7 @@ class DeleteDialog extends React.Component {
</Col> </Col>
<Col span={'20'}> <Col span={'20'}>
<div> <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> <p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span> <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}> <span style={{ color: '#c7254e' }}>

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { aliwareIntl } from '../../globalLib';
import './index.less'; import './index.less';
import { Button, Dialog, Grid } from '@alifd/next'; import { Button, Dialog, Grid } from '@alifd/next';
const { Row, Col } = Grid; const { Row, Col } = Grid;
@ -67,14 +68,14 @@ class DiffEditorDialog extends React.Component {
this.props.publishConfig(); this.props.publishConfig();
} }
render() { 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> 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)}> <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 style={{ height: 400 }}>
<div> <div>
<Row> <Row>
<Col style={{ textAlign: 'center' }}>{window.aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.of_the_current_area')}</Col> <Col style={{ textAlign: 'center' }}>{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> <Col style={{ textAlign: 'center' }}>{aliwareIntl.get('com.alibaba.nacos.component.DiffEditorDialog.original_value')}</Col>
</Row> </Row>
</div> </div>
<div style={{ clear: 'both', height: 480 }} ref="diffeditor"></div> <div style={{ clear: 'both', height: 480 }} ref="diffeditor"></div>

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

@ -13,6 +13,7 @@
import React from 'react'; import React from 'react';
import './index.less'; import './index.less';
import { request, aliwareIntl } from '../../globalLib';
import { Button, Dialog, Field, Form, Input, Loading } from '@alifd/next'; import { Button, Dialog, Field, Form, Input, Loading } from '@alifd/next';
const FormItem = Form.Item; const FormItem = Form.Item;
@ -58,7 +59,7 @@ class EditorNameSpace extends React.Component {
getNamespaceDetail(record) { getNamespaceDetail(record) {
this.field.setValues(record); this.field.setValues(record);
window.request({ request({
type: 'get', type: 'get',
url: `/nacos/v1/console/namespaces?show=all&namespaceId=${record.namespace}`, url: `/nacos/v1/console/namespaces?show=all&namespaceId=${record.namespace}`,
success: res => { success: res => {
@ -66,8 +67,8 @@ class EditorNameSpace extends React.Component {
this.field.setValue('namespaceDesc', res.namespaceDesc); this.field.setValue('namespaceDesc', res.namespaceDesc);
} else { } else {
Dialog.alert({ Dialog.alert({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'), title: aliwareIntl.get('com.alibaba.nacos.component.NameSpaceList.Prompt'),
content: res.message content: res.message
}); });
} }
@ -84,7 +85,7 @@ class EditorNameSpace extends React.Component {
if (errors) { if (errors) {
return; return;
} }
window.request({ request({
type: 'put', type: 'put',
beforeSend: () => { beforeSend: () => {
this.openLoading(); this.openLoading();
@ -103,8 +104,8 @@ class EditorNameSpace extends React.Component {
this.refreshNameSpace(); //刷新全局namespace this.refreshNameSpace(); //刷新全局namespace
} else { } else {
Dialog.alert({ Dialog.alert({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.prompt'), title: aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.prompt'),
content: res.message content: res.message
}); });
} }
@ -119,7 +120,7 @@ class EditorNameSpace extends React.Component {
refreshNameSpace() { refreshNameSpace() {
setTimeout(() => { setTimeout(() => {
window.request({ request({
type: 'get', type: 'get',
url: `/nacos/v1/console/namespaces`, url: `/nacos/v1/console/namespaces`,
success: res => { success: res => {
@ -134,7 +135,7 @@ class EditorNameSpace extends React.Component {
const chartReg = /[@#\$%\^&\*]+/g; const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) { 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 { } else {
callback(); callback();
} }
@ -149,25 +150,25 @@ 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 ( return (
<div> <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}> <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={window.aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.edit_namespace')} style={{ width: '100%', position: 'relative' }} visible={this.state.loading}> <Loading tip={aliwareIntl.get('com.alibaba.nacos.component.EditorNameSpace.edit_namespace')} style={{ width: '100%', position: 'relative' }} visible={this.state.loading}>
<Form field={this.field}> <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', { <Input {...this.field.init('namespaceShowName', {
rules: [{ rules: [{
required: true, 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) }] }, { validator: this.validateChart.bind(this) }]
})} disabled={this.state.type === 0 ? true : false} /> })} disabled={this.state.type === 0 ? true : false} />
</FormItem> </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', { <Input {...this.field.init('namespaceDesc', {
rules: [{ rules: [{
required: true, 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) }] }, { validator: this.validateChart.bind(this) }]
})} disabled={this.state.type === 0 ? true : false} /> })} disabled={this.state.type === 0 ? true : false} />
</FormItem> </FormItem>

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { aliwareIntl } from '../../globalLib';
import './index.less'; import './index.less';
import { Button, Dialog, Form } from '@alifd/next'; import { Button, Dialog, Form } from '@alifd/next';
const FormItem = Form.Item; const FormItem = Form.Item;
@ -65,7 +66,7 @@ class ExportDialog extends React.Component {
getQuery() { getQuery() {
if (this.state.records.length > 0) { 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) { if (this.state.dataId === '' && this.state.group === '' && this.state.appName === '' && this.state.configTags.length === 0) {
return ''; return '';
@ -78,10 +79,10 @@ class ExportDialog extends React.Component {
query += ' Group: ' + this.state.group + ','; query += ' Group: ' + this.state.group + ',';
} }
if (this.state.appName !== '') { 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) { 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); return query.substr(0, query.length - 1);
} }
@ -110,18 +111,18 @@ class ExportDialog extends React.Component {
render() { render() {
const footer = <div> const footer = <div>
{/* <a id="downloadLink" style={{ display: "none" }} href={this.getLink()} /> */} {/* <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>; </div>;
return <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> <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> <p>
<span style={{ color: '#33cde5' }}>{this.state.tenant.name}</span>{" | " + this.state.tenant.id} <span style={{ color: '#33cde5' }}>{this.state.tenant.name}</span>{" | " + this.state.tenant.id}
</p> </p>
</FormItem> </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> <p><span style={{ color: '#33cde5' }}>{this.state.total}</span> {this.getQuery()} </p>
</FormItem> </FormItem>
</Form> </Form>

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { aliwareIntl } from '../../globalLib';
import './index.less'; import './index.less';
import { Balloon, Button, Dialog, Form, Icon, Select, Upload } from '@alifd/next'; import { Balloon, Button, Dialog, Form, Icon, Select, Upload } from '@alifd/next';
const FormItem = Form.Item; const FormItem = Form.Item;
@ -28,9 +29,9 @@ class ImportDialog extends React.Component {
span: 20 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', value: 'overwrite',
label: window.aliwareIntl.get('nacos.component.ImportDialog.cover2') label: aliwareIntl.get('nacos.component.ImportDialog.cover2')
}]; }];
this.defaultPolicy = 'abort'; this.defaultPolicy = 'abort';
this.state = { this.state = {
@ -38,7 +39,7 @@ class ImportDialog extends React.Component {
serverId: '', serverId: '',
tenant: '', tenant: '',
policy: this.defaultPolicy, policy: this.defaultPolicy,
policyLabel: window.aliwareIntl.get('nacos.component.ImportDialog.To_terminate_the_import0') policyLabel: aliwareIntl.get('nacos.component.ImportDialog.To_terminate_the_import0')
}; };
} }
@ -90,32 +91,32 @@ class ImportDialog extends React.Component {
uploadLink = '/authgw/' + window.edasprefix + uploadLink; 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"}> 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> <a href={window._getLink && window._getLink("knowDataid")} target={"_blank"}>{aliwareIntl.get('nacos.component.ImportDialog.You_can_only_upload._zip_file_format0') /*只能上传.zip格式的文件*/}</a>
</Balloon>; </Balloon>;
const footer = <div><Upload language={window.pageLanguage || 'zh-cn'} listType={"text"} action={uploadLink} limit={1} accept={".zip"} onSuccess={(...args) => { 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.callback(args[0].retData, this.state.policyLabel);
this.closeDialog(); this.closeDialog();
}} onError={(...args) => { }} onError={(...args) => {
this.callback(args[0].response.retData, this.state.policyLabel); this.callback(args[0].response.retData, this.state.policyLabel);
this.closeDialog(); this.closeDialog();
}} formatter={this.formatter.bind(this)} headers={{ poweredBy: "simpleMVC", projectName: "nacos" }}> }} formatter={this.formatter.bind(this)} headers={{ poweredBy: "simpleMVC", projectName: "nacos" }}>
<Button type={"primary"}>{window.aliwareIntl.get('nacos.component.ImportDialog.Upload_File3')}</Button> <Button type={"primary"}>{aliwareIntl.get('nacos.component.ImportDialog.Upload_File3')}</Button>
</Upload></div>; </Upload></div>;
return <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> <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><span style={{ color: '#33cde5' }}>{this.state.tenant.name}</span>{" | " + this.state.tenant.id}
</p> </p>
</FormItem> </FormItem>
<FormItem label={window.aliwareIntl.get('nacos.component.ImportDialog.the_same_configuration6')} {...this.formItemLayout}> <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={window.aliwareIntl.currentLanguageCode}> <Select size={"medium"} hasArrow defaultValue={this.defaultPolicy} dataSource={this.allPolicy} onChange={this.setPolicy.bind(this)} language={aliwareIntl.currentLanguageCode}>
</Select> </Select>
</FormItem> </FormItem>
</Form> </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> </Dialog>
</div>; </div>;
} }

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

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

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

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

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

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

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

@ -13,6 +13,7 @@
import React from 'react'; import React from 'react';
import './index.less'; import './index.less';
import { getParams, aliwareIntl } from '../../globalLib';
import { Dialog, Loading, Tab } from '@alifd/next'; import { Dialog, Loading, Tab } from '@alifd/next';
const TabPane = Tab.Item; const TabPane = Tab.Item;
@ -93,7 +94,7 @@ public class ConfigController {
} }
getData() { getData() {
let namespace = window.getParams('namespace'); //获取ak,sk let namespace = getParams('namespace'); //获取ak,sk
let obj = { let obj = {
group: this.record.group || '', group: this.record.group || '',
dataId: this.record.dataId || '', dataId: this.record.dataId || '',
@ -250,9 +251,9 @@ public class ConfigExample {
const footer = <div></div>; const footer = <div></div>;
return ( return (
<div> <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 }}> <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 }}> <Tab shape={'text'} style={{ height: 40, paddingBottom: 10 }}>
<TabPane title={'Java'} key={1} onClick={this.changeTab.bind(this, 'commoneditor1', this.defaultCode)}> <TabPane title={'Java'} key={1} onClick={this.changeTab.bind(this, 'commoneditor1', this.defaultCode)}>

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { aliwareIntl } from '../../globalLib';
import './index.less'; import './index.less';
import { Button, Dialog, Grid, Icon } from '@alifd/next'; import { Button, Dialog, Grid, Icon } from '@alifd/next';
const { Row, Col } = Grid; const { Row, Col } = Grid;
@ -22,7 +23,7 @@ class SuccessDialog extends React.Component {
super(props); super(props);
this.state = { this.state = {
visible: false, visible: false,
title: window.aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.Configuration_management'), title: aliwareIntl.get('com.alibaba.nacos.component.SuccessDialog.Configuration_management'),
maintitle: '', maintitle: '',
content: '', content: '',
isok: true, isok: true,
@ -54,9 +55,9 @@ class SuccessDialog extends React.Component {
}); });
} }
render() { 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> 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> <div>
<Row> <Row>
<Col span={'4'} style={{ paddingTop: 16 }}> <Col span={'4'} style={{ paddingTop: 16 }}>
@ -65,7 +66,7 @@ class SuccessDialog extends React.Component {
</Col> </Col>
<Col span={'20'}> <Col span={'20'}>
<div> <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> <p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span> <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}> <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 MainLayout from '../layouts/MainLayout';
import { Message, Loading } from '@alifd/next'; import { Message, Loading } from '@alifd/next';
import _menu from '../menu'; import _menu from '../menu';
import { nacosEvent } from '../globalLib';
class App extends Component { class App extends Component {
@ -27,14 +28,15 @@ class App extends Component {
super(props); super(props);
this.state = { this.state = {
shownotice: 'none', shownotice: 'none',
noticecontent: '' noticecontent: '',
nacosLoading: {}
} }
} }
componentDidMount() { componentDidMount() {
//监听loading事件 //监听loading事件
window.narutoEvent.listenAllTask("narutoLoadingEvent", (narutoLoading) => { nacosEvent.listenAllTask("nacosLoadingEvent", (nacosLoading) => {
this.setState({ this.setState({
narutoLoading nacosLoading
}) })
}); });
} }
@ -46,7 +48,7 @@ class App extends Component {
} }
componentWillUnmount() { componentWillUnmount() {
window.narutoEvent.remove("narutoLoadingEvent"); nacosEvent.remove("nacosLoadingEvent");
} }
openErr(message) { openErr(message) {
@ -60,10 +62,9 @@ class App extends Component {
} }
render() { render() {
const { errcode, errinfo } = this.props; const { errcode, errinfo } = this.props;
return ( return (
<Loading className="naruto-loading" shape="flower" tip="loading..." visible={false} fullScreen {...this.state.narutoLoading}> <Loading className="nacos-loading" shape="flower" tip="loading..." visible={false} fullScreen {...this.state.nacosLoading}>
<MainLayout navList={_menu.data}> <MainLayout {...this.props} navList={_menu.data}>
{errcode === 1 ? <Message title={errinfo} closable style={{ position: 'absolute', zIndex: 99999, width: 800, left: '50%', marginLeft: -400 }} /> : null} {errcode === 1 ? <Message title={errinfo} closable style={{ position: 'absolute', zIndex: 99999, width: 800, left: '50%', marginLeft: -400 }} /> : null}
{this.props.children} {this.props.children}
</MainLayout> </MainLayout>

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

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

2
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.page.configsync.sync": "同步",
"com.alibaba.nacos.component.NewDatePicker.24_hours": "24小时", "com.alibaba.nacos.component.NewDatePicker.24_hours": "24小时",
"com.alibaba.nacos.page.listAllEnvironmental.environment_name": "环境名称", "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": "点击获取验证码", "nacos.component.validateDialog.Click_to_get_verification_code": "点击获取验证码",
"com.alibaba.nacos.page.consistencyEfficacy.environment_marked": "环境标示", "com.alibaba.nacos.page.consistencyEfficacy.environment_marked": "环境标示",
"com.alibaba.nacos.component.NameSpaceList.Announcement_nodejs_version_is_developed,supports_a_custom_message": "公告：Node.js版上线,支持定制消息。", "com.alibaba.nacos.component.NameSpaceList.Announcement_nodejs_version_is_developed,supports_a_custom_message": "公告：Node.js版上线,支持定制消息。",
@ -822,7 +821,6 @@ module.exports = {
"nacos.page.configurationManagement.HOME_Application0": "Application:", "nacos.page.configurationManagement.HOME_Application0": "Application:",
"com.alibaba.nacos.component.NewDatePicker.24_hours": "24 hours", "com.alibaba.nacos.component.NewDatePicker.24_hours": "24 hours",
"com.alibaba.nacos.component.DiffEditorDialog.confirm_that_the": "Publish", "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", "com.alibaba.nacos.component.EditorNameSpace.prompt": "Notice",
"nacos.page.namespace.AccessKey_recommended1": "AccessKey (Recommended for development environment):", "nacos.page.namespace.AccessKey_recommended1": "AccessKey (Recommended for development environment):",
"com.alibaba.nacos.page.configsync.sync": "Synchronize", "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) { :global(.viewFramework-product-navbar .product-nav-list li .active) {
background-color: #fff !important; 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 siteConfig from '../config';
import Header from './Header'; import Header from './Header';
import $ from 'jquery'; import $ from 'jquery';
import { aliwareGetCookieByKeyName, setParams, aliwareIntl } from '../globalLib';
export default class MainLayout extends React.Component { export default class MainLayout extends React.Component {
constructor(props) { constructor(props) {
@ -32,7 +33,7 @@ export default class MainLayout extends React.Component {
} }
goBack() { goBack() {
window.hashHistory.goBack(); this.props.history.goBack();
} }
nacosToggleNav(id, event) { 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() { nacosEnterBack() {
@ -110,7 +111,7 @@ export default class MainLayout extends React.Component {
navTo(url) { navTo(url) {
if (url !== '/configdetail' && url !== '/configeditor') { if (url !== '/configdetail' && url !== '/configeditor') {
//二级菜单不清空 //二级菜单不清空
window.setParams({ setParams({
dataId: '', dataId: '',
group: '' 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) { nacosSetSpecialNav(item) {
@ -213,7 +214,7 @@ export default class MainLayout extends React.Component {
<div> <div>
<a href="" onClick={this.nacosToggleNav.bind(this, item.serviceName)}> <a href="" onClick={this.nacosToggleNav.bind(this, item.serviceName)}>
<div className="nav-icon">{icon}</div> <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> </a>
</div> </div>
<ul className={`subnavlist ${hiddenClass}`}>{self.nacosLoopNav(item.children, index)}</ul> <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}`)} onClick={this.activeNav.bind(this, `nav${index}`)}
> >
<div className="nav-icon" /> <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> </a>
</li> </li>
); );
@ -250,7 +251,7 @@ export default class MainLayout extends React.Component {
onClick={this.activeNav.bind(this, `nav${index}`)} onClick={this.activeNav.bind(this, `nav${index}`)}
> >
<div className="nav-icon" /> <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> </a>
</li> </li>
); );
@ -282,7 +283,7 @@ export default class MainLayout extends React.Component {
// let parentNav = this.initNav[0] || []; // let parentNav = this.initNav[0] || [];
let defaultNav = '/configurationManagement'; let defaultNav = '/configurationManagement';
// let childrenNav = parentNav.children || []; // let childrenNav = parentNav.children || [];
window.hashHistory.listen((location) => { this.props.history.listen((location) => {
if (this.preSimplePath && this.preSimplePath !== '/') { if (this.preSimplePath && this.preSimplePath !== '/') {
if (location.pathname.indexOf(this.preSimplePath) !== -1) { if (location.pathname.indexOf(this.preSimplePath) !== -1) {
return; return;
@ -293,7 +294,7 @@ export default class MainLayout extends React.Component {
this.preSimplePath = simplePath; this.preSimplePath = simplePath;
if (navName === '') { if (navName === '') {
window.hashHistory.push(defaultNav); this.props.history.push(defaultNav);
setTimeout(() => { setTimeout(() => {
this.activeNav('configurationManagement'); this.activeNav('configurationManagement');
}); });
@ -354,13 +355,13 @@ export default class MainLayout extends React.Component {
} }
onLanguageChange = (language) => { onLanguageChange = (language) => {
window.aliwareIntl.changeLanguage(language); aliwareIntl.changeLanguage(language);
document.cookie = `docsite_language=${language}`; document.cookie = `docsite_language=${language}`;
window.location.reload(); window.location.reload();
}; };
render() { 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 { headerType, showLink, navRow, leftBarClose, noChild } = this.state;
const headerLogo = `${process.env.NODE_ENV === 'development' ? '' : 'public/'}img/TB118jPv_mWBKNjSZFBXXXxUFXa-2000-390.svg`; 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 <div
style={{ textIndent: 0 }} style={{ textIndent: 0 }}
className={'product-nav-title'} className={'product-nav-title'}
title={window.aliwareIntl.get( title={aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm' 'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
)} )}
> >
<span> <span>
{window.aliwareIntl.get( {aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm' 'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
)} )}
</span> </span>
<span style={{ marginLeft: 5 }}> <span style={{ marginLeft: 5 }}>
{window.aliwareIntl.get( {aliwareIntl.get(
'com.alibaba.nacos.layout.noenv.nacosversion' 'com.alibaba.nacos.layout.noenv.nacosversion'
)} )}
</span> </span>
@ -438,7 +439,7 @@ export default class MainLayout extends React.Component {
<div>{this.props.children}</div> <div>{this.props.children}</div>
) : ( ) : (
<div style={{ height: 300, lineHeight: '300px', textAlign: 'center', fontSize: '18px' }}> <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>
)} )}
</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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { getParams, request, aliwareIntl } from './globalLib';
var hasAlert = false; var hasAlert = false;
window.pageLanguage = window.aliwareIntl.currentLanguageCode;
window.edasprefix = 'acm'; //固定的edas网关需要的项目名 window.edasprefix = 'acm'; //固定的edas网关需要的项目名
window.globalConfig = { window.globalConfig = {
@ -28,9 +27,9 @@ window.globalConfig = {
} }
}; };
window.request.middleWare(config => { request.middleWare(config => {
let url = config.url; let url = config.url;
let tenant = window.nownamespace || window.getParams('namespace') || ''; let tenant = window.nownamespace || getParams('namespace') || '';
tenant = tenant === 'global' ? '' : tenant; tenant = tenant === 'global' ? '' : tenant;
let splitArr = url.split('?'); let splitArr = url.split('?');
if (splitArr.length > 1) { if (splitArr.length > 1) {
@ -49,21 +48,10 @@ window.request.middleWare(config => {
if (res.code === 'ConsoleNeedLogin' && window.location.host.indexOf('acm') !== -1) { if (res.code === 'ConsoleNeedLogin' && window.location.host.indexOf('acm') !== -1) {
window.location.reload(); 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) { if (res.code === 403 && !hasAlert) {
hasAlert = true; hasAlert = true;
window.Dialog.alert({ window.Dialog.alert({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
style: { width: 400 }, style: { width: 400 },
content: res.message, content: res.message,
onOk: () => { onOk: () => {
@ -87,9 +75,9 @@ window.request.middleWare(config => {
hasAlert = true; hasAlert = true;
window.Dialog.alert({ window.Dialog.alert({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
style: { width: 400 }, style: { width: 400 },
content: window.aliwareIntl.get('com.alibaba.nacos.pubshow'), //'子账号没有权限，请联系主账号负责人RAM上授权', content: aliwareIntl.get('com.alibaba.nacos.pubshow'), //'子账号没有权限，请联系主账号负责人RAM上授权',
onOk: () => { onOk: () => {
hasAlert = false; hasAlert = false;
}, },
@ -173,7 +161,7 @@ window.importEditor = callback => {
window._getLink = function () { window._getLink = function () {
let _linkObj = {}; let _linkObj = {};
// window.request({ // request({
// url: "com.alibaba.nacos.service.getLinks", // url: "com.alibaba.nacos.service.getLinks",
// async: false, // async: false,
// data: {}, // data: {},

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

@ -13,6 +13,7 @@
import React from 'react'; import React from 'react';
import './index.less'; import './index.less';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import { Button, Dialog, Field, Form, Input, Loading, Tab } from '@alifd/next'; import { Button, Dialog, Field, Form, Input, Loading, Tab } from '@alifd/next';
const TabPane = Tab.Item; const TabPane = Tab.Item;
const FormItem = Form.Item; const FormItem = Form.Item;
@ -29,16 +30,16 @@ class ConfigDetail extends React.Component {
ips: '', ips: '',
checkedBeta: false, checkedBeta: false,
switchEncrypt: 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.field = new Field(this);
this.dataId = window.getParams('dataId') || 'yanlin'; this.dataId = getParams('dataId') || 'yanlin';
this.group = window.getParams('group') || 'DEFAULT_GROUP'; this.group = getParams('group') || 'DEFAULT_GROUP';
this.ips = ''; this.ips = '';
this.valueMap = {}; //存储不同版本的数据 this.valueMap = {}; //存储不同版本的数据
this.tenant = window.getParams('namespace') || ''; this.tenant = getParams('namespace') || '';
this.searchDataId = window.getParams('searchDataId') || ''; this.searchDataId = getParams('searchDataId') || '';
this.searchGroup = window.getParams('searchGroup') || ''; this.searchGroup = getParams('searchGroup') || '';
//this.params = window.location.hash.split('?')[1]||''; //this.params = window.location.hash.split('?')[1]||'';
} }
@ -87,12 +88,12 @@ class ConfigDetail extends React.Component {
getDataDetail() { getDataDetail() {
let self = this; let self = this;
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; this.tenant = getParams('namespace') || '';
this.edasAppName = window.getParams('edasAppName') || ''; this.edasAppName = getParams('edasAppName') || '';
this.inApp = this.edasAppName; this.inApp = this.edasAppName;
let url = `/nacos/v1/cs/configs?show=all&dataId=${this.dataId}&group=${this.group}`; let url = `/nacos/v1/cs/configs?show=all&dataId=${this.dataId}&group=${this.group}`;
window.request({ request({
url: url, url: url,
beforeSend: function () { beforeSend: function () {
self.openLoading(); self.openLoading();
@ -111,9 +112,9 @@ class ConfigDetail extends React.Component {
self.field.setValue('md5', data.md5); self.field.setValue('md5', data.md5);
} else { } else {
Dialog.alert({ Dialog.alert({
title: window.aliwareIntl.get('com.alibaba.nacos.page.configdetail.error'), title: aliwareIntl.get('com.alibaba.nacos.page.configdetail.error'),
content: result.message, content: result.message,
language: window.aliwareIntl.currentLanguageCode language: aliwareIntl.currentLanguageCode
}); });
} }
}, },
@ -123,7 +124,7 @@ class ConfigDetail extends React.Component {
}); });
} }
goList() { 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() { render() {
const init = this.field.init; const init = this.field.init;
@ -139,7 +140,7 @@ class ConfigDetail extends React.Component {
return ( return (
<div style={{ padding: 10 }}> <div style={{ padding: 10 }}>
<Loading shape={"flower"} tip={"Loading..."} style={{ width: '100%', position: 'relative' }} visible={this.state.loading} color={"#333"}> <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' }}> {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}> <Tab shape={'wrapped'} onChange={this.changeTab.bind(this)} lazyLoad={false} activeKey={this.state.activeKey}>
@ -156,22 +157,22 @@ class ConfigDetail extends React.Component {
<Input htmlType={"text"} readOnly={true} {...init('group')} /> <Input htmlType={"text"} readOnly={true} {...init('group')} />
</FormItem> </FormItem>
<div style={{ marginTop: 10 }}> <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> </div>
{this.state.showmore ? <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')} /> <Input htmlType={"text"} readOnly={true} {...init('appName')} />
</FormItem> </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')} /> <Input htmlType={"text"} readOnly={true} {...init('config_tags')} />
</FormItem> </FormItem>
</div> : ''} </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')} /> <Input.TextArea htmlType={"text"} multiple rows={3} readOnly={true} {...init('desc')} />
</FormItem> </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'}> <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'} /> <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}> <FormItem label={"MD5:"} required {...formItemLayout}>
<Input htmlType={"text"} readOnly={true} {...init('md5')} /> <Input htmlType={"text"} readOnly={true} {...init('md5')} />
</FormItem> </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')} /> <Input.TextArea htmlType={"text"} multiple rows={15} readOnly={true} {...init('content')} />
</FormItem> </FormItem>
<FormItem label={" "} {...formItemLayout}> <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> </FormItem>
</Form> </Form>

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

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

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

@ -13,6 +13,7 @@
import React from 'react'; import React from 'react';
import './index.less'; import './index.less';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import { Button, Dialog, Field, Form, Input } from '@alifd/next'; import { Button, Dialog, Field, Form, Input } from '@alifd/next';
const FormItem = Form.Item; const FormItem = Form.Item;
@ -22,10 +23,10 @@ class ConfigRollback extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.field = new Field(this); this.field = new Field(this);
this.dataId = window.getParams('dataId') || 'yanlin'; this.dataId = getParams('dataId') || 'yanlin';
this.group = window.getParams('group') || 'DEFAULT_GROUP'; this.group = getParams('group') || 'DEFAULT_GROUP';
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.nid = window.getParams('nid') || ''; this.nid = getParams('nid') || '';
this.state = { this.state = {
envName: '', envName: '',
visible: false, visible: false,
@ -34,13 +35,13 @@ class ConfigRollback extends React.Component {
//this.params = window.location.hash.split('?')[1]||''; //this.params = window.location.hash.split('?')[1]||'';
this.typeMap = { //操作映射提示 this.typeMap = { //操作映射提示
'U': 'publish', 'U': 'publish',
'I': window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete'), 'I': aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete'),
'D': 'publish' 'D': 'publish'
}; };
this.typeMapName = { //操作映射名 this.typeMapName = { //操作映射名
'U': window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.updated'), 'U': aliwareIntl.get('com.alibaba.nacos.page.configRollback.updated'),
'I': window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.inserted'), 'I': aliwareIntl.get('com.alibaba.nacos.page.configRollback.inserted'),
'D': window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete') 'D': aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete')
}; };
} }
@ -54,10 +55,10 @@ class ConfigRollback extends React.Component {
} }
getDataDetail() { getDataDetail() {
let self = this; let self = this;
this.tenant = window.getParams('namespace') || ''; this.tenant = getParams('namespace') || '';
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
let url = `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`; let url = `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`;
window.request({ request({
url: url, url: url,
success: function (result) { success: function (result) {
if (result != null) { if (result != null) {
@ -80,8 +81,8 @@ class ConfigRollback extends React.Component {
}); });
} }
goList() { goList() {
let tenant = window.getParams('namespace'); let tenant = getParams('namespace');
window.hashHistory.push(`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}&namespace=${tenant}`); this.props.history.push(`/historyRollback?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}&namespace=${tenant}`);
} }
onOpenConfirm() { onOpenConfirm() {
@ -91,10 +92,10 @@ class ConfigRollback extends React.Component {
type = 'delete'; type = 'delete';
} }
Dialog.confirm({ Dialog.confirm({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.please_confirm_rollback'), title: aliwareIntl.get('com.alibaba.nacos.page.configRollback.please_confirm_rollback'),
content: <div style={{ marginTop: '-20px' }}> 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> <p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span> <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}> <span style={{ color: '#c7254e' }}>
@ -110,8 +111,8 @@ class ConfigRollback extends React.Component {
</div>, </div>,
onOk: function () { onOk: function () {
self.tenant = window.getParams('namespace') || ''; self.tenant = getParams('namespace') || '';
self.serverId = window.getParams('serverId') || 'center'; self.serverId = getParams('serverId') || 'center';
self.dataId = self.field.getValue("dataId"); self.dataId = self.field.getValue("dataId");
self.group = self.field.getValue("group"); self.group = self.field.getValue("group");
let postData = { let postData = {
@ -129,14 +130,14 @@ class ConfigRollback extends React.Component {
} }
// ajax // ajax
window.request({ request({
type: type, type: type,
contentType: 'application/x-www-form-urlencoded', contentType: 'application/x-www-form-urlencoded',
url: url, url: url,
data: postData, data: postData,
success: function (data) { success: function (data) {
if (data === true) { 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 ( return (
<div style={{ padding: 10 }}> <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}> <Form field={this.field}>
<FormItem label="Data ID:" required {...formItemLayout}> <FormItem label="Data ID:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('dataId')} /> <Input htmlType="text" readOnly={true} {...init('dataId')} />
<div style={{ marginTop: 10 }}> <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> </div>
</FormItem> </FormItem>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}> <div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<FormItem label="Group:" required {...formItemLayout}> <FormItem label="Group:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('group')} /> <Input htmlType="text" readOnly={true} {...init('group')} />
</FormItem> </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')} /> <Input htmlType="text" readOnly={true} {...init('appName')} />
</FormItem> </FormItem>
</div> </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')} /> <Input htmlType="text" readOnly={true} {...init('opType')} />
</FormItem> </FormItem>
<FormItem label="MD5:" required {...formItemLayout}> <FormItem label="MD5:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('md5')} /> <Input htmlType="text" readOnly={true} {...init('md5')} />
</FormItem> </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')} /> <Input.TextArea htmlType="text" multiple rows={15} readOnly={true} {...init('content')} />
</FormItem> </FormItem>
<FormItem label=" " {...formItemLayout}> <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="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)}>{window.aliwareIntl.get('com.alibaba.nacos.page.configRollback.return')}</Button> <Button type="normal" onClick={this.goList.bind(this)}>{aliwareIntl.get('com.alibaba.nacos.page.configRollback.return')}</Button>
</FormItem> </FormItem>
</Form> </Form>

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

@ -14,6 +14,7 @@
import React from 'react'; import React from 'react';
import { Button, Checkbox, Dialog, Field, Form, Input, Loading } from '@alifd/next'; import { Button, Checkbox, Dialog, Field, Form, Input, Loading } from '@alifd/next';
import SuccessDialog from '../../../components/SuccessDialog'; import SuccessDialog from '../../../components/SuccessDialog';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import './index.less'; import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/ /*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -21,9 +22,9 @@ class ConfigSync extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.field = new Field(this); this.field = new Field(this);
this.dataId = window.getParams('dataId') || 'yanlin'; this.dataId = getParams('dataId') || 'yanlin';
this.group = window.getParams('group') || ''; this.group = getParams('group') || '';
this.serverId = window.getParams('serverId') || ''; this.serverId = getParams('serverId') || '';
this.state = { this.state = {
configType: 0, configType: 0,
@ -58,7 +59,7 @@ class ConfigSync extends React.Component {
} }
getDomain() { getDomain() {
let self = this; let self = this;
window.request({ request({
url: `/diamond-ops/env/domain`, url: `/diamond-ops/env/domain`,
success: function (data) { success: function (data) {
@ -74,13 +75,13 @@ class ConfigSync extends React.Component {
} }
getDataDetail() { getDataDetail() {
let self = this; let self = this;
this.tenant = window.getParams('namespace') || ''; this.tenant = getParams('namespace') || '';
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
let url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${this.dataId}/group/${this.group}/tenant/${this.tenant}?id=`; 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) { if (this.tenant === 'global' || !this.tenant) {
url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${this.dataId}/group/${this.group}?id=`; url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${this.dataId}/group/${this.group}?id=`;
} }
window.request({ request({
url: url, url: url,
beforeSend: function () { beforeSend: function () {
self.openLoading(); self.openLoading();
@ -130,8 +131,8 @@ class ConfigSync extends React.Component {
}); });
} else { } else {
Dialog.alert({ Dialog.alert({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.page.configsync.error'), title: aliwareIntl.get('com.alibaba.nacos.page.configsync.error'),
content: result.message content: result.message
}); });
} }
@ -145,7 +146,7 @@ class ConfigSync extends React.Component {
goList() { goList() {
//console.log(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`) //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() { sync() {
@ -160,15 +161,15 @@ class ConfigSync extends React.Component {
targetEnvs: this.envs targetEnvs: this.envs
}; };
window.request({ request({
type: 'put', type: 'put',
contentType: 'application/json', contentType: 'application/json',
url: `/diamond-ops/configList/serverId/${this.serverId}/dataId/${payload.dataId}/group/${payload.group}?id=`, url: `/diamond-ops/configList/serverId/${this.serverId}/dataId/${payload.dataId}/group/${payload.group}?id=`,
data: JSON.stringify(payload), data: JSON.stringify(payload),
success: function (res) { success: function (res) {
let _payload = {}; let _payload = {};
_payload.maintitle = window.aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration_main'); _payload.maintitle = aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration_main');
_payload.title = window.aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration'); _payload.title = aliwareIntl.get('com.alibaba.nacos.page.configsync.sync_configuration');
_payload.content = ''; _payload.content = '';
_payload.dataId = payload.dataId; _payload.dataId = payload.dataId;
_payload.group = payload.group; _payload.group = payload.group;
@ -186,7 +187,7 @@ class ConfigSync extends React.Component {
syncResult() { syncResult() {
let dataId = this.field.getValue('dataId'); let dataId = this.field.getValue('dataId');
let gruop = this.field.getValue('group'); 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) { changeEnv(values) {
this.targetEnvs = values; this.targetEnvs = values;
@ -198,7 +199,7 @@ class ConfigSync extends React.Component {
this.ips = value; this.ips = value;
} }
goResult() { 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() { openLoading() {
this.setState({ this.setState({
@ -225,31 +226,31 @@ class ConfigSync extends React.Component {
return ( return (
<div style={{ padding: 10 }}> <div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative', width: '100%' }} visible={this.state.loading} tip="Loading..." color="#333"> <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 field={this.field}>
<Form.Item label="Data ID:" required {...formItemLayout}> <Form.Item label="Data ID:" required {...formItemLayout}>
<Input htmlType="text" disabled={'disabled'} {...init('dataId')} /> <Input htmlType="text" disabled={'disabled'} {...init('dataId')} />
<div style={{ marginTop: 10 }}> <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> </div>
</Form.Item> </Form.Item>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}> <div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<Form.Item label="Group ID:" required {...formItemLayout}> <Form.Item label="Group ID:" required {...formItemLayout}>
<Input htmlType="text" disabled={'disabled'} {...init('group')} /> <Input htmlType="text" disabled={'disabled'} {...init('group')} />
</Form.Item> </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')} /> <Input htmlType="text" disabled={'disabled'} {...init('appName')} />
</Form.Item> </Form.Item>
</div> </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')} /> <Input htmlType="text" disabled={'disabled'} {...init('envs')} />
</Form.Item> </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')} /> <Input.TextArea htmlType="text" multiple rows={15} disabled={'disabled'} {...init('content')} />
</Form.Item> </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> <div>
<Checkbox.Group value={this.state.envvalues} onChange={this.changeEnv.bind(this)} dataSource={this.state.envlist} /> <Checkbox.Group value={this.state.envvalues} onChange={this.changeEnv.bind(this)} dataSource={this.state.envlist} />
</div> </div>
@ -257,9 +258,9 @@ class ConfigSync extends React.Component {
<Form.Item label=" " {...formItemLayout}> <Form.Item label=" " {...formItemLayout}>
<div style={{ textAlign: 'right' }}> <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> </div>
</Form.Item> </Form.Item>
</Form> </Form>

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

@ -19,6 +19,7 @@ import DeleteDialog from '../../../components/DeleteDialog' ;
import CloneDialog from '../../../components/CloneDialog'; import CloneDialog from '../../../components/CloneDialog';
import ImportDialog from '../../../components/ImportDialog'; import ImportDialog from '../../../components/ImportDialog';
import ExportDialog from '../../../components/ExportDialog'; import ExportDialog from '../../../components/ExportDialog';
import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
import './index.less'; import './index.less';
import { Balloon, Button, Checkbox, Collapse, Dialog, Dropdown, Field, Form, Icon, Input, Loading, Menu, Pagination, Select, Slider, Table } from '@alifd/next'; import { Balloon, Button, Checkbox, Collapse, Dialog, Dropdown, Field, Form, Icon, Input, Loading, Menu, Pagination, Select, Slider, Table } from '@alifd/next';
const Accordion = Collapse; const Accordion = Collapse;
@ -30,12 +31,12 @@ 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.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"}> {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 alert-success"} style={{ minHeight: 120, backgroundColor: '#e9feff' }}>
<div className={"alert-success-text"} style={{ fontWeight: 'bold' }}>{window.aliwareIntl.get("nacos.page.configurationManagement.Important_reminder0") /*重要提醒*/}</div> <div className={"alert-success-text"} style={{ fontWeight: 'bold' }}>{aliwareIntl.get("nacos.page.configurationManagement.Important_reminder0") /*重要提醒*/}</div>
<strong style={{ color: '#777a7e' }}> <strong style={{ color: '#777a7e' }}>
<span>{item.title}</span> <span>{item.title}</span>
</strong> </strong>
<strong> <strong>
<span><a style={{ marginLeft: 10, color: '#33cde5' }} href={item.url} target={"_blank"}>{window.aliwareIntl.get("nacos.page.configurationManagement.view_details1") /*查看详情*/}</a></span> <span><a style={{ marginLeft: 10, color: '#33cde5' }} href={item.url} target={"_blank"}>{aliwareIntl.get("nacos.page.configurationManagement.view_details1") /*查看详情*/}</a></span>
</strong> </strong>
</div> </div>
</div>)} </div>)}
@ -55,15 +56,15 @@ class ConfigurationManagement extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.field = new Field(this); this.field = new Field(this);
this.appName = window.getParams('appName') || window.getParams('edasAppId') || ''; this.appName = getParams('appName') || getParams('edasAppId') || '';
this.preAppName = this.appName; this.preAppName = this.appName;
this.group = window.getParams('group') || ''; this.group = getParams('group') || '';
this.preGroup = this.group; this.preGroup = this.group;
this.dataId = window.getParams('dataId') || ''; this.dataId = getParams('dataId') || '';
this.preDataId = this.dataId; this.preDataId = this.dataId;
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.edasAppId = window.getParams('edasAppId') || ''; this.edasAppId = getParams('edasAppId') || '';
this.edasAppName = window.getParams('edasAppName') || ''; this.edasAppName = getParams('edasAppName') || '';
this.inApp = this.edasAppId; this.inApp = this.edasAppId;
this.state = { this.state = {
value: "", value: "",
@ -100,14 +101,14 @@ class ConfigurationManagement extends React.Component {
group: this.preGroup || '', group: this.preGroup || '',
appName: this.appName || '' appName: this.appName || ''
}; };
window.setParams(obj); setParams(obj);
this.batchHandle = null; this.batchHandle = null;
this.toggleShowQuestionnaire = this.toggleShowQuestionnaire.bind(this); this.toggleShowQuestionnaire = this.toggleShowQuestionnaire.bind(this);
} }
componentDidMount() { componentDidMount() {
// this.getGroup(); // this.getGroup();
if (window.pageLanguage === 'zh-cn') { if (aliwareIntl.currentLanguageCode === 'zh-cn') {
// this.getContentList(); //在中文站获取概览页 // this.getContentList(); //在中文站获取概览页
this.setState({ this.setState({
isCn: true isCn: true
@ -121,17 +122,17 @@ class ConfigurationManagement extends React.Component {
if (!this.checkQuestionnaire()) { if (!this.checkQuestionnaire()) {
if (window.location.host === 'acm.console.aliyun.com') { if (window.location.host === 'acm.console.aliyun.com') {
Dialog.alert({ Dialog.alert({
title: window.aliwareIntl.get("nacos.page.configurationManagement.questionnaire2") /*问卷调查*/ title: aliwareIntl.get("nacos.page.configurationManagement.questionnaire2") /*问卷调查*/
, style: { , style: {
width: '60%' width: '60%'
}, },
content: <div> 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 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>
<div style={{ fontSize: '15px' }}>{window.aliwareIntl.get("nacos.page.configurationManagement.no_longer_display4") /*不再显示：*/}<Checkbox onChange={this.toggleShowQuestionnaire} /> <div style={{ fontSize: '15px' }}>{aliwareIntl.get("nacos.page.configurationManagement.no_longer_display4") /*不再显示：*/}<Checkbox onChange={this.toggleShowQuestionnaire} />
</div> </div>
</div>, </div>,
language: window.aliwareIntl.currentLanguageCode language: aliwareIntl.currentLanguageCode
}); });
} }
} }
@ -142,7 +143,7 @@ class ConfigurationManagement extends React.Component {
*/ */
getContentList() { getContentList() {
window.request({ request({
url: 'com.alibaba.nacos.service.dashlist', //以 com.alibaba. 开头最终会转换为真正的url地址 url: 'com.alibaba.nacos.service.dashlist', //以 com.alibaba. 开头最终会转换为真正的url地址
data: {}, data: {},
$data: {}, //替换请求url路径中{}占位符的内容 $data: {}, //替换请求url路径中{}占位符的内容
@ -194,9 +195,9 @@ class ConfigurationManagement extends React.Component {
} }
navTo(url, record) { navTo(url, record) {
this.serverId = window.getParams('serverId') || ''; this.serverId = getParams('serverId') || '';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数 this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`${url}?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}`); this.props.history.push(`${url}?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}`);
} }
openLoading() { openLoading() {
this.setState({ this.setState({
@ -226,7 +227,7 @@ class ConfigurationManagement extends React.Component {
group: '', group: '',
dataId: '' dataId: ''
}); });
window.setParams({ setParams({
group: '', group: '',
dataId: '' dataId: ''
}); });
@ -235,8 +236,8 @@ class ConfigurationManagement extends React.Component {
} }
getData(pageNo = 1, clearSelect = true) { getData(pageNo = 1, clearSelect = true) {
let self = this; let self = this;
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数 this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
this.serverId = window.getParams('serverId') || ''; this.serverId = getParams('serverId') || '';
let urlPrefix = ""; let urlPrefix = "";
if (this.dataId.indexOf("*") !== -1 || this if (this.dataId.indexOf("*") !== -1 || this
.group.indexOf("*") !== -1) { .group.indexOf("*") !== -1) {
@ -245,7 +246,7 @@ class ConfigurationManagement extends React.Component {
urlPrefix = "/nacos/v1/cs/configs?search=accurate"; 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}`, 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 () { beforeSend: function () {
self.openLoading(); self.openLoading();
@ -299,10 +300,10 @@ class ConfigurationManagement extends React.Component {
removeConfig(record) { removeConfig(record) {
let self = this; let self = this;
Dialog.confirm({ Dialog.confirm({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.Remove_configuration'), title: aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.Remove_configuration'),
content: <div style={{ marginTop: '-20px' }}> 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> <p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span> <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#c7254e' }}> <span style={{ color: '#c7254e' }}>
@ -316,7 +317,7 @@ class ConfigurationManagement extends React.Component {
</span> </span>
</p> </p>
<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' }}> <span style={{ color: '#c7254e' }}>
{self.serverId || ''} {self.serverId || ''}
</span> </span>
@ -325,13 +326,13 @@ class ConfigurationManagement extends React.Component {
</div>, </div>,
onOk: () => { onOk: () => {
let url = `/nacos/v1/cs/configs?dataId=${record.dataId}&group=${record.group}`; let url = `/nacos/v1/cs/configs?dataId=${record.dataId}&group=${record.group}`;
window.request({ request({
url: url, url: url,
type: 'delete', type: 'delete',
success: function (res) { success: function (res) {
let _payload = {}; 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.content = '';
_payload.dataId = record.dataId; _payload.dataId = record.dataId;
_payload.group = record.group; _payload.group = record.group;
@ -349,7 +350,7 @@ class ConfigurationManagement extends React.Component {
}); });
} }
renderLastTime(value, index, record) { renderLastTime(value, index, record) {
return <div>{window.aliwareIntl.intlNumberFormat(record.lastModifiedTime)}</div>; return <div>{aliwareIntl.intlNumberFormat(record.lastModifiedTime)}</div>;
} }
showCode(record) { showCode(record) {
this.refs['showcode'].openDialog(record); this.refs['showcode'].openDialog(record);
@ -357,19 +358,19 @@ class ConfigurationManagement extends React.Component {
renderCol(value, index, record) { renderCol(value, index, record) {
return <div> 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> <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> <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> <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> <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 onItemClick={this.chooseNav.bind(this, record)}>
<Menu.Item key={"nav1"}>{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.version')}</Menu.Item> <Menu.Item key={"nav1"}>{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={"nav3"}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.listener_query')}</Menu.Item>
</Menu> </Menu>
</Dropdown> </Dropdown>
@ -454,9 +455,9 @@ class ConfigurationManagement extends React.Component {
}); });
} }
selectAll() { selectAll() {
window.setParam('dataId', this.dataId); setParams('dataId', this.dataId);
window.setParam('group', this.group); setParams('group', this.group);
window.setParam('appName', this.appName); setParams('appName', this.appName);
this.getData(); this.getData();
} }
resetAll() { resetAll() {
@ -474,9 +475,9 @@ class ConfigurationManagement extends React.Component {
this.selectAll(); this.selectAll();
} }
chooseEnv(value) { chooseEnv(value) {
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数 this.tenant = 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.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) { setNowNameSpace(name, id) {
this.setState({ this.setState({
@ -485,20 +486,20 @@ class ConfigurationManagement extends React.Component {
}); });
} }
goDetail(record) { goDetail(record) {
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数 this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
// 点击详情到另一个页面, 返回时候要保留原来的搜索条件 比如: record.dataId为详情的, this.dataId为搜索条件的. // 点击详情到另一个页面, 返回时候要保留原来的搜索条件 比如: 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) { goEditor(record) {
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数 this.tenant = 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.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) { goConfigSync(record) {
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数 this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`/configsync?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}`); this.props.history.push(`/configsync?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&namespace=${this.tenant}`);
} }
onSelectChange(...args) { onSelectChange(...args) {
@ -530,20 +531,20 @@ class ConfigurationManagement extends React.Component {
return <div> return <div>
<div style={{ fontSize: 18, color: "#373D41", overflow: "auto" }}>{res.message}</div> <div style={{ fontSize: 18, color: "#373D41", overflow: "auto" }}>{res.message}</div>
{"data" in res && res.data != null && <Accordion style={{ width: '500px' }}> {"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}> {"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={window.aliwareIntl.currentLanguageCode}> <Table dataSource={res.data.failedItems} fixedHeader={true} maxBodyHeight={400} language={aliwareIntl.currentLanguageCode}>
<Table.Column title={'Data ID'} dataIndex={"dataId"} /> <Table.Column title={'Data ID'} dataIndex={"dataId"} />
<Table.Column title={'Group'} dataIndex={"group"} /> <Table.Column title={'Group'} dataIndex={"group"} />
</Table> </Table>
</Panel> : <Panel style={{ display: 'none' }} />} </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}> {"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={window.aliwareIntl.currentLanguageCode}> <Table dataSource={res.data.succeededItems} fixedHeader={true} maxBodyHeight={400} language={aliwareIntl.currentLanguageCode}>
<Table.Column title={'Data ID'} dataIndex={"dataId"} /> <Table.Column title={'Data ID'} dataIndex={"dataId"} />
<Table.Column title={'Group'} dataIndex={"group"} /> <Table.Column title={'Group'} dataIndex={"group"} />
</Table> </Table>
</Panel> : <Panel style={{ display: 'none' }} />} </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}> {"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={window.aliwareIntl.currentLanguageCode}> <Table dataSource={res.data.unprocessedItems} fixedHeader={true} maxBodyHeight={400} language={aliwareIntl.currentLanguageCode}>
<Table.Column title={'Data ID'} dataIndex={"dataId"} /> <Table.Column title={'Data ID'} dataIndex={"dataId"} />
<Table.Column title={'Group'} dataIndex={"group"} /> <Table.Column title={'Group'} dataIndex={"group"} />
</Table> </Table>
@ -574,15 +575,15 @@ class ConfigurationManagement extends React.Component {
}); });
} }
render() { render() {
const pubnodedata = window.aliwareIntl.get('pubnodata'); const pubnodedata = aliwareIntl.get('pubnodata');
const locale = { const locale = {
empty: pubnodedata 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"}> 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> <a href={window._getLink && window._getLink("knowDataid")} target={"_blank"}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.click_to_learn_DataId')}</a>
</Balloon>; </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"}> 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> <a href={window._getLink && window._getLink("knowGoup")} target={"_blank"}>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.click_to_learn_Group')}</a>
</Balloon>; </Balloon>;
return ( return (
<div> <div>
@ -595,42 +596,42 @@ class ConfigurationManagement extends React.Component {
</div> </div>
<div style={{ display: this.inApp ? 'none' : 'block', position: 'relative', width: '100%', overflow: 'hidden', height: '40px' }}> <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' }}> <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 }}>{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 }}>|</span>
<span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>{this.state.nownamespace_name}</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> <span style={{ fontSize: '14px', color: '#000', marginRight: 18 }}>{this.state.nownamespace_id}</span>
{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.query_results')} {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.query_results')}
<strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong> <strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
{window.aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.article_meet_the_requirements')} {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.article_meet_the_requirements')}
</h3> </h3>
<div style={{ position: 'absolute', textAlign: 'right', zIndex: 2, right: 0, top: 0 }}> <div style={{ position: 'absolute', textAlign: 'right', zIndex: 2, right: 0, top: 0 }}>
</div> </div>
</div> </div>
<div style={{ position: 'relative', marginTop: 10, height: this.state.isAdvancedQuery ? 'auto' : 48 }}> <div style={{ position: 'relative', marginTop: 10, height: this.state.isAdvancedQuery ? 'auto' : 48, overflow: "hidden" }}>
<Form direction={"hoz"} inline> <Form direction={"hoz"} inline>
<FormItem label={"Data ID:"}> <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)} /> <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={"Group:"}> <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 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> </Select.AutoComplete>
</FormItem> </FormItem>
<FormItem label={""}> <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> <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>
<FormItem style={this.inApp ? { display: "none" } : { verticalAlign: "middle", marginTop: 0, marginLeft: 10 }}> <FormItem style={this.inApp ? { display: "none" } : { verticalAlign: "middle", marginTop: 0, marginLeft: 10 }}>
<div style={{ color: '#33cde5', fontSize: 12, cursor: 'pointer' }} onClick={this.changeAdvancedQuery}> <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'} /> <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> </div>
</FormItem> </FormItem>
<br /> <br />
<FormItem style={this.inApp ? { display: "none" } : {}} label={window.aliwareIntl.get("nacos.page.configurationManagement.HOME_Application0") /*归属应用：*/}> <FormItem style={this.inApp ? { display: "none" } : {}} label={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)} /> <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>
<FormItem label={window.aliwareIntl.get('nacos.page.configurationManagement.Tags')}> <FormItem label={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} /> <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> </FormItem>
</Form> </Form>
<div style={{ position: 'absolute', right: 10, top: 4 }}> <div style={{ position: 'absolute', right: 10, top: 4 }}>
@ -639,14 +640,14 @@ class ConfigurationManagement extends React.Component {
</div> </div>
<div> <div>
<Table dataSource={this.state.dataSource} locale={locale} fixedHeader={true} maxBodyHeight={400} language={window.aliwareIntl.currentLanguageCode} ref={"dataTable"}> <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={helpDataId} dataIndex={"dataId"} />
<Table.Column title={helpGroup} dataIndex={"group"} /> <Table.Column title={helpGroup} dataIndex={"group"} />
{!this.inApp ? <Table.Column title={window.aliwareIntl.get('nacos.page.configurationManagement.HOME_Application')} dataIndex={"appName"} /> : <div></div>} {!this.inApp ? <Table.Column title={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.Column title={aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.operation')} cell={this.renderCol.bind(this)} />
</Table> </Table>
{this.state.dataSource.length > 0 && <div style={{ marginTop: 10, overflow: "hidden" }}> {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)} /> <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>}
</div> </div>
<ShowCodeing ref={"showcode"} /> <ShowCodeing ref={"showcode"} />

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import './index.less'; import './index.less';
import { Button, Field, Form, Input } from '@alifd/next'; import { Button, Field, Form, Input } from '@alifd/next';
const FormItem = Form.Item; const FormItem = Form.Item;
@ -23,20 +24,20 @@ class HistoryDetail extends React.Component {
this.state = { this.state = {
showmore: false showmore: false
}; };
this.edasAppName = window.getParams('edasAppName'); this.edasAppName = getParams('edasAppName');
this.edasAppId = window.getParams('edasAppId'); this.edasAppId = getParams('edasAppId');
this.inApp = this.edasAppName; this.inApp = this.edasAppName;
this.field = new Field(this); this.field = new Field(this);
this.dataId = window.getParams('dataId') || 'yanlin'; this.dataId = getParams('dataId') || 'yanlin';
this.group = window.getParams('group') || 'DEFAULT_GROUP'; this.group = getParams('group') || 'DEFAULT_GROUP';
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.nid = window.getParams('nid') || '123509854'; this.nid = getParams('nid') || '123509854';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数 this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
//this.params = window.location.hash.split('?')[1]||''; //this.params = window.location.hash.split('?')[1]||'';
this.typeMap = { this.typeMap = {
'U': window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.update'), 'U': aliwareIntl.get('com.alibaba.nacos.page.historyDetail.update'),
'I': window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.insert'), 'I': aliwareIntl.get('com.alibaba.nacos.page.historyDetail.insert'),
'D': window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.delete') 'D': aliwareIntl.get('com.alibaba.nacos.page.historyDetail.delete')
}; };
} }
@ -51,7 +52,7 @@ class HistoryDetail extends React.Component {
getDataDetail() { getDataDetail() {
let self = this; let self = this;
window.request({ request({
url: `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`, url: `/nacos/v1/cs/history?dataId=${this.dataId}&group=${this.group}&nid=${this.nid}`,
success: function (result) { success: function (result) {
if (result != null) { if (result != null) {
@ -70,7 +71,7 @@ class HistoryDetail extends React.Component {
goList() { goList() {
//console.log(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`) //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() { render() {
const init = this.field.init; const init = this.field.init;
@ -84,34 +85,34 @@ class HistoryDetail extends React.Component {
}; };
return ( return (
<div style={{ padding: 10 }}> <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}> <Form field={this.field}>
<FormItem label="Data ID:" required {...formItemLayout}> <FormItem label="Data ID:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('dataId')} /> <Input htmlType="text" readOnly={true} {...init('dataId')} />
<div style={{ marginTop: 10 }}> <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> </div>
</FormItem> </FormItem>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}> <div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<FormItem label="Group:" required {...formItemLayout}> <FormItem label="Group:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('group')} /> <Input htmlType="text" readOnly={true} {...init('group')} />
</FormItem> </FormItem>
<FormItem label={window.aliwareIntl.get('com.alibaba.nacos.page.historyDetail.home')} {...formItemLayout}> <FormItem label={aliwareIntl.get('com.alibaba.nacos.page.historyDetail.home')} {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('appName')} /> <Input htmlType="text" readOnly={true} {...init('appName')} />
</FormItem> </FormItem>
</div> </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')} /> <Input htmlType="text" readOnly={true} {...init('opType')} />
</FormItem> </FormItem>
<FormItem label="MD5:" required {...formItemLayout}> <FormItem label="MD5:" required {...formItemLayout}>
<Input htmlType="text" readOnly={true} {...init('md5')} /> <Input htmlType="text" readOnly={true} {...init('md5')} />
</FormItem> </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')} /> <Input.TextArea htmlType="text" multiple rows={15} readOnly={true} {...init('content')} />
</FormItem> </FormItem>
<FormItem label=" " {...formItemLayout}> <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> </FormItem>
</Form> </Form>

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

@ -14,6 +14,7 @@
import React from 'react'; import React from 'react';
import { Button, Field, Form, Input, Loading, Pagination, Table } from '@alifd/next'; 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'; import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/ /*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -22,14 +23,14 @@ class HistoryRollback extends React.Component {
super(props); super(props);
this.field = new Field(this); this.field = new Field(this);
this.appName = window.getParams('appName') || ''; this.appName = getParams('appName') || '';
this.preAppName = this.appName; this.preAppName = this.appName;
this.group = window.getParams('group') || ''; this.group = getParams('group') || '';
this.preGroup = this.group; this.preGroup = this.group;
this.dataId = window.getParams('dataId') || ''; this.dataId = getParams('dataId') || '';
this.preDataId = this.dataId; this.preDataId = this.dataId;
this.serverId = window.getParams('serverId') || ''; this.serverId = getParams('serverId') || '';
this.state = { this.state = {
value: "", value: "",
visible: false, visible: false,
@ -52,7 +53,7 @@ class HistoryRollback extends React.Component {
appName: this.appName || '', appName: this.appName || '',
serverId: this.serverId || '' serverId: this.serverId || ''
}; };
window.setParams(obj); setParams(obj);
} }
componentDidMount() { componentDidMount() {
@ -98,7 +99,7 @@ class HistoryRollback extends React.Component {
group: '', group: '',
dataId: '' dataId: ''
}); });
window.setParams({ setParams({
group: '', group: '',
dataId: '' dataId: ''
}); });
@ -108,9 +109,9 @@ class HistoryRollback extends React.Component {
} }
getData(pageNo = 1) { getData(pageNo = 1) {
let self = this; let self = this;
this.serverId = window.getParams('serverId') || ''; this.serverId = getParams('serverId') || '';
if (!this.dataId) return false; if (!this.dataId) return false;
window.request({ request({
beforeSend: function () { beforeSend: function () {
self.openLoading(); self.openLoading();
}, },
@ -132,9 +133,9 @@ class HistoryRollback extends React.Component {
showMore() { } showMore() { }
renderCol(value, index, record) { renderCol(value, index, record) {
return <div> 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> <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>; </div>;
} }
changePage(value) { changePage(value) {
@ -195,11 +196,11 @@ class HistoryRollback extends React.Component {
} }
selectAll() { selectAll() {
if (this.dataId !== this.preDataId) { if (this.dataId !== this.preDataId) {
window.setParam('dataId', this.dataId); setParams('dataId', this.dataId);
this.preDataId = this.dataId; this.preDataId = this.dataId;
} }
if (this.group !== this.preGroup) { if (this.group !== this.preGroup) {
window.setParam('group', this.preGroup); setParams('group', this.preGroup);
this.preGroup = this.group; this.preGroup = this.group;
} }
this.getData(); this.getData();
@ -215,7 +216,7 @@ class HistoryRollback extends React.Component {
showAppName: false, showAppName: false,
showgroup: false showgroup: false
}); });
window.setParams({ setParams({
group: '', group: '',
dataId: '' dataId: ''
}); });
@ -224,20 +225,20 @@ class HistoryRollback extends React.Component {
console.log(value); console.log(value);
} }
renderLastTime(value, index, record) { renderLastTime(value, index, record) {
return window.aliwareIntl.intlTimeFormat(record.lastModifiedTime); return aliwareIntl.intlTimeFormat(record.lastModifiedTime);
} }
goDetail(record) { goDetail(record) {
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数 this.tenant = getParams('namespace') || ''; //为当前实例保存tenant参数
window.hashHistory.push(`/historyDetail?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&nid=${record.id}&namespace=${this.tenant}`); this.props.history.push(`/historyDetail?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&nid=${record.id}&namespace=${this.tenant}`);
} }
goRollBack(record) { goRollBack(record) {
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
this.tenant = window.getParams('namespace') || ''; //为当前实例保存tenant参数 this.tenant = 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.props.history.push(`/configRollback?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${record.group}&nid=${record.id}&namespace=${this.tenant}&nid=${record.id}`);
} }
render() { render() {
const pubnodedata = window.aliwareIntl.get('pubnodata'); const pubnodedata = aliwareIntl.get('pubnodata');
const locale = { const locale = {
empty: pubnodedata empty: pubnodedata
@ -245,7 +246,7 @@ class HistoryRollback extends React.Component {
return ( return (
<div style={{ padding: 10 }}> <div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative', width: "100%" }} visible={this.state.loading} tip="Loading..." color="#333"> <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'}> {/**<div className={'namespacewrapper'}>
<NameSpaceList namespaceCallBack={this.cleanAndGetData.bind(this)} /> <NameSpaceList namespaceCallBack={this.cleanAndGetData.bind(this)} />
</div>**/} </div>**/}
@ -254,17 +255,17 @@ class HistoryRollback extends React.Component {
<Form inline> <Form inline>
<Form.Item label="Data ID:"> <Form.Item label="Data ID:">
<Input htmlType="text" placeholder={window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.dataid')} <Input htmlType="text" placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.dataid')}
style={{ width: 200 }} value={this.state.dataId} onChange={this.getDataId.bind(this)} /> style={{ width: 200 }} value={this.state.dataId} onChange={this.getDataId.bind(this)} />
</Form.Item> </Form.Item>
<Form.Item label="Group:"> <Form.Item label="Group:">
<Input placeholder={window.aliwareIntl.get('com.alibaba.nacos.page.historyRollback.group')} id="userName" name="userName" value={this.state.group} <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)} /> style={{ width: 200 }} onChange={this.getGroup.bind(this)} />
</Form.Item> </Form.Item>
<Form.Item label=""> <Form.Item label="">
<Button type="primary" style={{ marginRight: 10 }} onClick={this.selectAll.bind(this)}> <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> </Form.Item>
@ -275,21 +276,21 @@ class HistoryRollback extends React.Component {
</div> </div>
<div style={{ position: 'relative', width: '100%', overflow: 'hidden', height: '40px' }}> <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>
<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="Data ID" dataIndex="dataId" />
<Table.Column title="Group" dataIndex="group" /> <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={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.operation')} cell={this.renderCol.bind(this)} />
</Table> </Table>
</div> </div>
<div style={{ marginTop: 10, textAlign: 'right' }}> <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> </div>
</Loading> </Loading>
</div> </div>

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

@ -13,6 +13,7 @@
import React from 'react'; import React from 'react';
import RegionGroup from '../../../components/RegionGroup'; import RegionGroup from '../../../components/RegionGroup';
import { getParams, request, aliwareIntl } from '../../../globalLib';
import './index.less'; import './index.less';
import { Button, Field, Form, Grid, Input, Loading, Pagination, Select, Table } from '@alifd/next'; import { Button, Field, Form, Grid, Input, Loading, Pagination, Select, Table } from '@alifd/next';
const FormItem = Form.Item; const FormItem = Form.Item;
@ -32,10 +33,10 @@ class ListeningToQuery extends React.Component {
dataSource: [] dataSource: []
}; };
this.field = new Field(this); this.field = new Field(this);
this.group = window.getParams('group') || ''; this.group = getParams('group') || '';
this.dataId = window.getParams('dataId') || ''; this.dataId = getParams('dataId') || '';
this.serverId = window.getParams('serverId') || ''; this.serverId = getParams('serverId') || '';
this.tenant = window.getParams('namespace') || ''; this.tenant = getParams('namespace') || '';
} }
componentDidMount() { componentDidMount() {
@ -70,7 +71,7 @@ class ListeningToQuery extends React.Component {
if (!dataId) return false; if (!dataId) return false;
queryUrl = `/nacos/v1/cs/configs/listener?dataId=${dataId}&group=${group}`; queryUrl = `/nacos/v1/cs/configs/listener?dataId=${dataId}&group=${group}`;
} }
window.request({ request({
url: queryUrl, url: queryUrl,
beforeSend: function () { beforeSend: function () {
self.openLoading(); self.openLoading();
@ -116,7 +117,7 @@ class ListeningToQuery extends React.Component {
this.forceUpdate(); this.forceUpdate();
} }
renderStatus(values, index, record) { 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>; </div>;
} }
getQueryLater() { getQueryLater() {
@ -129,14 +130,14 @@ class ListeningToQuery extends React.Component {
const { init, getValue } = this.field; const { init, getValue } = this.field;
this.init = init; this.init = init;
this.getValue = getValue; this.getValue = getValue;
const pubnodedata = window.aliwareIntl.get('pubnodata'); const pubnodedata = aliwareIntl.get('pubnodata');
const locale = { const locale = {
empty: pubnodedata empty: pubnodedata
}; };
const selectDataSource = [ const selectDataSource = [
{ {
label: window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.configuration'), label: aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.configuration'),
value: 0 value: 0
}, },
{ {
@ -147,55 +148,55 @@ class ListeningToQuery extends React.Component {
return ( return (
<div style={{ padding: 10 }}> <div style={{ padding: 10 }}>
<Loading shape="flower" style={{ position: 'relative' }} visible={this.state.loading} tip="Loading..." color="#333"> <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'}> {/**<div className={'namespacewrapper'}>
<NameSpaceList namespaceCallBack={this.getQueryLater.bind(this)} /> <NameSpaceList namespaceCallBack={this.getQueryLater.bind(this)} />
</div>**/} </div>**/}
<Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}> <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
<Col span="24"> <Col span="24">
<Form inline field={this.field}> <Form inline field={this.field}>
<FormItem label={window.aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_dimension')}> <FormItem label={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_dimension')}>
<Select dataSource={selectDataSource} style={{ width: 200 }} {...this.init('type')} language={window.aliwareIntl.currentLanguageCode} /> <Select dataSource={selectDataSource} style={{ width: 200 }} {...this.init('type')} language={aliwareIntl.currentLanguageCode} />
</FormItem> </FormItem>
<FormItem label="Data ID:" style={{ <FormItem label="Data ID:" style={{
display: this.getValue('type') === 0 ? '' : 'none' 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>
<FormItem label="Group:" style={{ <FormItem label="Group:" style={{
display: this.getValue('type') === 0 ? '' : 'none' 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>
<FormItem label="IP:" style={{ <FormItem label="IP:" style={{
display: this.getValue('type') === 0 ? 'none' : '' 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>
<FormItem label=""> <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> </FormItem>
</Form> </Form>
</Col> </Col>
</Row> </Row>
<div style={{ position: 'relative' }}> <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> </div>
<Row style={{ padding: 0 }}> <Row style={{ padding: 0 }}>
<Col span="24" 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="Data ID" dataIndex="dataId" />
<Table.Column title="Group" dataIndex="group" /> <Table.Column title="Group" dataIndex="group" />
<Table.Column title="MD5" dataIndex="md5" /> <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="IP" dataIndex="ip" />
<Table.Column title="MD5" dataIndex="md5" /> <Table.Column title="MD5" dataIndex="md5" />
</Table>} </Table>}
</Col> </Col>
</Row> </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={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> </div>
</Loading> </Loading>
</div> </div>

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

@ -14,6 +14,7 @@
import React from 'react'; import React from 'react';
import $ from 'jquery'; import $ from 'jquery';
import SuccessDialog from '../../../components/SuccessDialog'; import SuccessDialog from '../../../components/SuccessDialog';
import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
import './index.less'; import './index.less';
import { Balloon, Button, Dialog, Field, Form, Icon, Input, Loading, Message, Select, Radio } from '@alifd/next'; import { Balloon, Button, Dialog, Field, Form, Icon, Input, Loading, Message, Select, Radio } from '@alifd/next';
const FormItem = Form.Item; const FormItem = Form.Item;
@ -26,15 +27,15 @@ class NewConfig extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.field = new Field(this); this.field = new Field(this);
this.edasAppName = window.getParams('edasAppName') || ''; this.edasAppName = getParams('edasAppName') || '';
this.edasAppId = window.getParams('edasAppId') || ''; this.edasAppId = getParams('edasAppId') || '';
this.inApp = this.edasAppName; this.inApp = this.edasAppName;
this.field.setValue('appName', this.inApp ? this.edasAppName : ''); this.field.setValue('appName', this.inApp ? this.edasAppName : '');
this.inEdas = window.globalConfig.isParentEdas(); this.inEdas = window.globalConfig.isParentEdas();
this.dataId = window.getParams('dataId') || ''; this.dataId = getParams('dataId') || '';
this.group = window.getParams('group') || 'DEFAULT_GROUP'; this.group = getParams('group') || 'DEFAULT_GROUP';
this.searchDataId = window.getParams('searchDataId') || ''; this.searchDataId = getParams('searchDataId') || '';
this.searchGroup = window.getParams('searchGroup') || ''; this.searchGroup = getParams('searchGroup') || '';
this.state = { this.state = {
configType: 'text', configType: 'text',
codeValue: ``, codeValue: ``,
@ -61,7 +62,7 @@ class NewConfig extends React.Component {
this.betaips = document.getElementById('betaips'); this.betaips = document.getElementById('betaips');
//this.createCodeMirror('text', ''); //this.createCodeMirror('text', '');
this.chontenttab = document.getElementById('chontenttab'); //diff标签 this.chontenttab = document.getElementById('chontenttab'); //diff标签
this.tenant = window.getParams('namespace') || ''; this.tenant = getParams('namespace') || '';
this.field.setValue('group', this.group); this.field.setValue('group', this.group);
if (!window.monaco) { if (!window.monaco) {
window.importEditor(() => { window.importEditor(() => {
@ -163,10 +164,10 @@ class NewConfig extends React.Component {
}); });
} }
goList() { goList() {
this.tenant = window.getParams('namespace') || ''; this.tenant = getParams('namespace') || '';
this.serverId = window.getParams('serverId') || ''; this.serverId = getParams('serverId') || '';
//console.log(`/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`) //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() { openLoading() {
this.setState({ this.setState({
@ -208,7 +209,7 @@ class NewConfig extends React.Component {
if (!content) { if (!content) {
return; return;
} }
this.tenant = window.getParams('namespace') || ''; this.tenant = getParams('namespace') || '';
let payload = { let payload = {
dataId: self.state.addonBefore + this.field.getValue('dataId'), dataId: self.state.addonBefore + this.field.getValue('dataId'),
group: this.field.getValue('group'), group: this.field.getValue('group'),
@ -219,9 +220,9 @@ class NewConfig extends React.Component {
appName: this.inApp ? this.edasAppId : this.field.getValue('appName'), appName: this.inApp ? this.edasAppId : this.field.getValue('appName'),
tenant: this.tenant tenant: this.tenant
}; };
this.serverId = window.getParams('serverId') || 'center'; this.serverId = getParams('serverId') || 'center';
let url = `/nacos/v1/cs/configs`; let url = `/nacos/v1/cs/configs`;
window.request({ request({
type: 'post', type: 'post',
contentType: 'application/x-www-form-urlencoded', contentType: 'application/x-www-form-urlencoded',
url: url, url: url,
@ -231,15 +232,15 @@ class NewConfig extends React.Component {
}, },
success: function (res) { success: function (res) {
let _payload = {}; let _payload = {};
_payload.maintitle = window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing_main'); _payload.maintitle = aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing_main');
_payload.title = window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing'); _payload.title = aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing');
_payload.content = ''; _payload.content = '';
_payload.dataId = payload.dataId; _payload.dataId = payload.dataId;
_payload.group = payload.group; _payload.group = payload.group;
if (res === true) { if (res === true) {
self.group = payload.group; self.group = payload.group;
self.dataId = payload.dataId; self.dataId = payload.dataId;
window.setParams({ group: payload.group, dataId: payload.dataId }); //设置参数 setParams({ group: payload.group, dataId: payload.dataId }); //设置参数
_payload.isok = true; _payload.isok = true;
} else { } else {
_payload.isok = false; _payload.isok = false;
@ -252,8 +253,8 @@ class NewConfig extends React.Component {
}, },
error: function (res) { error: function (res) {
Dialog.alert({ Dialog.alert({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.publish_failed') content: aliwareIntl.get('com.alibaba.nacos.page.newconfig.publish_failed')
}); });
self.closeLoading(); self.closeLoading();
} }
@ -284,7 +285,7 @@ class NewConfig extends React.Component {
const chartReg = /[@#\$%\^&\*]+/g; const chartReg = /[@#\$%\^&\*]+/g;
if (chartReg.test(value)) { 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 { } else {
callback(); callback();
} }
@ -333,63 +334,63 @@ class NewConfig extends React.Component {
return ( return (
<div style={{ padding: 10 }}> <div style={{ padding: 10 }}>
<Loading shape={"flower"} tip={"Loading..."} style={{ width: '100%', position: 'relative' }} visible={this.state.loading} color={"#333"}> <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}> <Form field={this.field}>
<FormItem label={"Data ID:"} required {...formItemLayout}> <FormItem label={"Data ID:"} required {...formItemLayout}>
<Input {...init('dataId', { <Input {...init('dataId', {
rules: [{ rules: [{
required: true, required: true,
message: window.aliwareIntl.get('com.alibaba.nacos.page.newconfig') message: aliwareIntl.get('com.alibaba.nacos.page.newconfig')
}, { }, {
max: 255, 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) }] }, { validator: this.validateChart.bind(this) }]
})} addonTextBefore={this.state.addonBefore ? <div style={{ minWidth: 100, color: "#373D41" }}>{this.state.addonBefore}</div> : null} /> })} addonTextBefore={this.state.addonBefore ? <div style={{ minWidth: 100, color: "#373D41" }}>{this.state.addonBefore}</div> : null} />
</FormItem> </FormItem>
<FormItem label={"Group:"} required {...formItemLayout}> <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: [{ rules: [{
required: true, 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, 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) }] }, { 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> </Combobox>
</FormItem> </FormItem>
<FormItem label={" "} {...formItemLayout} style={{ display: this.state.showGroupWarning ? "block" : "none" }}> <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>
<FormItem label={""} {...formItemLayout}> <FormItem label={""} {...formItemLayout}>
<div> <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> </div>
</FormItem> </FormItem>
<div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}> <div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
<FormItem label={window.aliwareIntl.get('nacos.page.newconfig.Tags')} {...formItemLayout}> <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={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}> <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> </Select>
</FormItem> </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} /> <Input {...init('appName')} readOnly={this.inApp} />
</FormItem> </FormItem>
</div> </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')} /> <Input.TextArea htmlType={"text"} multiple rows={3} {...init('desc')} />
</FormItem> </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)} /> <RadioGroup dataSource={list} value={this.state.configType} onChange={this.newChangeConfig.bind(this)} />
</FormItem> </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"}> <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>{window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.configure_contents_of')}</p> <p>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.configure_contents_of')}</p>
<p>{window.aliwareIntl.get('com.alibaba.nacos.page.newconfig.full_screen')}</p> <p>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.full_screen')}</p>
</Balloon>:</span>} required {...formItemLayout}> </Balloon>:</span>} required {...formItemLayout}>
<div id={"container"} style={{ width: '100%', height: 300 }}></div> <div id={"container"} style={{ width: '100%', height: 300 }}></div>
</FormItem> </FormItem>
@ -397,9 +398,9 @@ class NewConfig extends React.Component {
<FormItem {...formItemLayout} label={""}> <FormItem {...formItemLayout} label={""}>
<div style={{ textAlign: 'right' }}> <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> </div>
</FormItem> </FormItem>
</Form> </Form>

81
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 DeleteDialog from '../../components/DeleteDialog';
import NewNameSpace from '../../components/NewNameSpace'; import NewNameSpace from '../../components/NewNameSpace';
import EditorNameSpace from '../../components/EditorNameSpace'; import EditorNameSpace from '../../components/EditorNameSpace';
import { getParams, setParams, request, aliwareIntl } from '../../globalLib';
import './index.less'; import './index.less';
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/ /*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
@ -36,10 +37,10 @@ class NameSpace extends React.Component {
} }
getNameSpaces(delayTime = 2000) { getNameSpaces(delayTime = 2000) {
let self = this; let self = this;
// let serverId = window.getParams('serverId') || 'center'; // let serverId = getParams('serverId') || 'center';
self.openLoading(); self.openLoading();
setTimeout(() => { setTimeout(() => {
window.request({ request({
type: 'get', type: 'get',
beforeSend: function () { }, beforeSend: function () { },
url: `/nacos/v1/console/namespaces`, url: `/nacos/v1/console/namespaces`,
@ -61,8 +62,8 @@ class NameSpace extends React.Component {
}); });
} else { } else {
Dialog.alert({ Dialog.alert({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: window.aliwareIntl.get('com.alibaba.nacos.page.namespace.prompt'), title: aliwareIntl.get('com.alibaba.nacos.page.namespace.prompt'),
content: res.message content: res.message
}); });
} }
@ -94,7 +95,7 @@ class NameSpace extends React.Component {
detailNamespace(record) { detailNamespace(record) {
let namespace = record.namespace; //获取ak,sk let namespace = record.namespace; //获取ak,sk
window.request({ request({
url: `/nacos/v1/console/namespaces?show=all&namespaceId=${namespace}`, url: `/nacos/v1/console/namespaces?show=all&namespaceId=${namespace}`,
beforeSend: () => { beforeSend: () => {
this.openLoading(); this.openLoading();
@ -104,30 +105,30 @@ class NameSpace extends React.Component {
Dialog.alert({ Dialog.alert({
style: { width: "500px" }, style: { width: "500px" },
needWrapper: false, needWrapper: false,
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
title: window.aliwareIntl.get('nacos.page.namespace.Namespace_details'), title: aliwareIntl.get('nacos.page.namespace.Namespace_details'),
content: <div> content: <div>
<div style={{ marginTop: '10px' }}> <div style={{ marginTop: '10px' }}>
<p> <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' }}> <span style={{ color: '#c7254e' }}>
{res.namespaceShowName} {res.namespaceShowName}
</span> </span>
</p> </p>
<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' }}> <span style={{ color: '#c7254e' }}>
{res.namespace} {res.namespace}
</span> </span>
</p> </p>
<p> <p>
<span style={{ color: '#999', marginRight: 5 }}>{window.aliwareIntl.get('com.alibaba.nacos.page.namespace.configuration')}</span> <span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('com.alibaba.nacos.page.namespace.configuration')}</span>
<span style={{ color: '#c7254e' }}> <span style={{ color: '#c7254e' }}>
{res.configCount} / {res.quota} {res.configCount} / {res.quota}
</span> </span>
</p> </p>
<p> <p>
<span style={{ color: '#999', marginRight: 5 }}>{window.aliwareIntl.get('nacos.page.configdetail.Description')}</span> <span style={{ color: '#999', marginRight: 5 }}>{aliwareIntl.get('nacos.page.configdetail.Description')}</span>
<span style={{ color: '#c7254e' }}> <span style={{ color: '#c7254e' }}>
{res.namespaceDesc} {res.namespaceDesc}
</span> </span>
@ -144,46 +145,46 @@ class NameSpace extends React.Component {
} }
removeNamespace(record) { removeNamespace(record) {
// let serverId = window.getParams('serverId') || 'center'; // let serverId = getParams('serverId') || 'center';
Dialog.confirm({ 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' }}> 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> <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' }}> <span style={{ color: '#c7254e' }}>
{record.namespaceShowName} {record.namespaceShowName}
</span> </span>
</p> </p>
<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' }}> <span style={{ color: '#c7254e' }}>
{record.namespace} {record.namespace}
</span> </span>
</p> </p>
</div>, </div>,
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
onOk: () => { onOk: () => {
let url = `/nacos/v1/console/namespaces?namespaceId=${record.namespace}`; let url = `/nacos/v1/console/namespaces?namespaceId=${record.namespace}`;
window.request({ request({
url: url, url: url,
type: 'delete', type: 'delete',
success: res => { success: res => {
let _payload = {}; 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) { if (res === true) {
let urlnamespace = window.getParams('namespace'); let urlnamespace = getParams('namespace');
if (record.namespace === urlnamespace) { if (record.namespace === urlnamespace) {
window.setParams('namespace', this.state.defaultNamespace); setParams('namespace', this.state.defaultNamespace);
} }
Dialog.confirm({ Dialog.confirm({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: window.aliwareIntl.get('nacos.page.namespace._Remove_the_namespace_success'), content: aliwareIntl.get('nacos.page.namespace._Remove_the_namespace_success'),
title: window.aliwareIntl.get('nacos.page.namespace.deleted_successfully') title: aliwareIntl.get('nacos.page.namespace.deleted_successfully')
}); });
} else { } else {
Dialog.confirm({ Dialog.confirm({
language: window.pageLanguage || 'zh-cn', language: aliwareIntl.currentLanguageCode || 'zh-cn',
content: res.message, content: res.message,
title: "删除失败" title: "删除失败"
}); });
@ -197,7 +198,7 @@ class NameSpace extends React.Component {
} }
refreshNameSpace() { refreshNameSpace() {
window.request({ request({
type: 'get', type: 'get',
url: `/nacos/v1/console/namespaces`, url: `/nacos/v1/console/namespaces`,
success: res => { success: res => {
@ -219,15 +220,15 @@ class NameSpace extends React.Component {
this.refs['editgroup'].openDialog(record); this.refs['editgroup'].openDialog(record);
} }
renderOption(value, index, 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) { 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) { 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> return <div>
{_detailinfo} {_detailinfo}
@ -242,7 +243,7 @@ class NameSpace extends React.Component {
let name = record.namespaceShowName; let name = record.namespaceShowName;
if (record.type === 0) { 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>; return <div>{name}</div>;
} }
@ -250,27 +251,27 @@ class NameSpace extends React.Component {
return <div>{value} / {record.quota}</div>; return <div>{value} / {record.quota}</div>;
} }
render() { render() {
const pubnodedata = window.aliwareIntl.get('pubnodata'); const pubnodedata = aliwareIntl.get('pubnodata');
const locale = { const locale = {
empty: pubnodedata empty: pubnodedata
}; };
return <div style={{ padding: 10 }} className='clearfix'> 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"> <div className="fusion-demo">
<Loading shape="flower" tip="Loading..." color="#333" style={{ width: '100%' }} visible={this.state.loading}> <Loading shape="flower" tip="Loading..." color="#333" style={{ width: '100%' }} visible={this.state.loading}>
<div> <div>
<div style={{ textAlign: 'right', marginBottom: 10 }}> <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>
<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={window.aliwareIntl.get('com.alibaba.nacos.page.namespace.namespace_names')} dataIndex="namespaceShowName" cell={this.renderName.bind(this)} /> <Table.Column title={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={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.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> </Table>
</div> </div>
</div> </div>

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { request } from '../../../globalLib';
import { Dialog, Form, Input, Switch, Select, Message } from '@alifd/next'; import { Dialog, Form, Input, Switch, Select, Message } from '@alifd/next';
import { I18N, DIALOG_FORM_LAYOUT } from './constant' import { I18N, DIALOG_FORM_LAYOUT } from './constant'
@ -45,7 +46,7 @@ class EditClusterDialog extends React.Component {
onConfirm() { onConfirm() {
const { openLoading, closeLoading, getServiceDetail } = this.props const { openLoading, closeLoading, getServiceDetail } = this.props
const { name, serviceName, metadataText, defaultCheckPort, useIPPort4Check, healthChecker } = this.state.editCluster const { name, serviceName, metadataText, defaultCheckPort, useIPPort4Check, healthChecker } = this.state.editCluster
window.request({ request({
method: 'POST', method: 'POST',
url: '/nacos/v1/ns/cluster/update', url: '/nacos/v1/ns/cluster/update',
data: { data: {

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { request } from '../../../globalLib';
import { Dialog, Form, Input, Switch, Message } from '@alifd/next'; import { Dialog, Form, Input, Switch, Message } from '@alifd/next';
import { I18N, DIALOG_FORM_LAYOUT } from './constant' import { I18N, DIALOG_FORM_LAYOUT } from './constant'
@ -43,7 +44,7 @@ class EditInstanceDialog extends React.Component {
onConfirm() { onConfirm() {
const { serviceName, clusterName, getInstanceList, openLoading, closeLoading } = this.props const { serviceName, clusterName, getInstanceList, openLoading, closeLoading } = this.props
const { ip, port, weight, enabled, metadataText } = this.state.editInstance const { ip, port, weight, enabled, metadataText } = this.state.editInstance
window.request({ request({
method: 'POST', method: 'POST',
url: '/nacos/v1/ns/instance/update', 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 },

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { request } from '../../../globalLib';
import { Dialog, Form, Input, Select, Message } from '@alifd/next'; import { Dialog, Form, Input, Select, Message } from '@alifd/next';
import { I18N, DIALOG_FORM_LAYOUT } from './constant' import { I18N, DIALOG_FORM_LAYOUT } from './constant'
@ -44,7 +45,7 @@ class EditServiceDialog extends React.Component {
onConfirm() { onConfirm() {
const editService = Object.assign({}, this.state.editService) const editService = Object.assign({}, this.state.editService)
const { name, protectThreshold, healthCheckMode, metadataText } = editService const { name, protectThreshold, healthCheckMode, metadataText } = editService
window.request({ request({
method: 'POST', method: 'POST',
url: '/nacos/v1/ns/service/update', url: '/nacos/v1/ns/service/update',
data: { serviceName: name, protectThreshold, healthCheckMode, metadata: metadataText }, data: { serviceName: name, protectThreshold, healthCheckMode, metadata: metadataText },

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { request } from '../../../globalLib';
import { Button, Pagination, Table } from '@alifd/next'; import { Button, Pagination, Table } from '@alifd/next';
import { I18N, HEALTHY_COLOR_MAPPING } from './constant' import { I18N, HEALTHY_COLOR_MAPPING } from './constant'
import EditInstanceDialog from "./EditInstanceDialog"; import EditInstanceDialog from "./EditInstanceDialog";
@ -45,7 +46,7 @@ class InstanceTable extends React.Component {
const { clusterName, serviceName } = this.props const { clusterName, serviceName } = this.props
if (!clusterName) return if (!clusterName) return
const { pageSize, pageNum } = this.state const { pageSize, pageNum } = this.state
window.request({ request({
url: '/nacos/v1/ns/catalog/instanceList', url: '/nacos/v1/ns/catalog/instanceList',
data: { data: {
serviceName, serviceName,
@ -69,7 +70,7 @@ class InstanceTable extends React.Component {
const { clusterName, serviceName } = this.props const { clusterName, serviceName } = this.props
const newVal = Object.assign({}, instance) const newVal = Object.assign({}, instance)
newVal.list[index]['enabled'] = !enabled newVal.list[index]['enabled'] = !enabled
window.request({ request({
method: 'POST', method: 'POST',
url: '/nacos/v1/ns/instance/update', url: '/nacos/v1/ns/instance/update',
data: { serviceName, clusterName, ip, port, weight, enable: !enabled }, data: { serviceName, clusterName, ip, port, weight, enable: !enabled },

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

@ -12,6 +12,7 @@
*/ */
import React from 'react'; import React from 'react';
import { request } from '../../../globalLib';
import { Button, Card, Form, Loading } from '@alifd/next'; import { Button, Card, Form, Loading } from '@alifd/next';
import EditServiceDialog from './EditServiceDialog' import EditServiceDialog from './EditServiceDialog'
import EditClusterDialog from './EditClusterDialog' import EditClusterDialog from './EditClusterDialog'
@ -52,7 +53,7 @@ class ServiceDetail extends React.Component {
getServiceDetail() { getServiceDetail() {
const { serviceName } = this.state const { serviceName } = this.state
window.request({ request({
url: `/nacos/v1/ns/catalog/serviceDetail?serviceName=${serviceName}`, url: `/nacos/v1/ns/catalog/serviceDetail?serviceName=${serviceName}`,
beforeSend: () => this.openLoading(), beforeSend: () => this.openLoading(),
success: ({ clusters = [], service = {} }) => this.setState({ service, clusters }), success: ({ clusters = [], service = {} }) => this.setState({ service, clusters }),

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

@ -11,7 +11,9 @@
* limitations under the License. * 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 = {} export const I18N = {}
/** /**
* 服务列表 * 服务列表

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

@ -13,6 +13,7 @@
import React from 'react'; import React from 'react';
import RegionGroup from '../../../components/RegionGroup/index'; import RegionGroup from '../../../components/RegionGroup/index';
import { request, aliwareIntl } from '../../../globalLib';
import { Button, Field, Form, Grid, Input, Loading, Pagination, Table } from '@alifd/next'; import { Button, Field, Form, Grid, Input, Loading, Pagination, Table } from '@alifd/next';
import { I18N, STATUS_COLOR_MAPPING } from './constant' import { I18N, STATUS_COLOR_MAPPING } from './constant'
import './ServiceList.less' import './ServiceList.less'
@ -47,7 +48,7 @@ class ServiceList extends React.Component {
queryServiceList() { queryServiceList() {
const { currentPage, pageSize, keyword } = this.state const { currentPage, pageSize, keyword } = this.state
const parameter = [`startPg=${currentPage}`, `pgSize=${pageSize}`, `keyword=${keyword}`] const parameter = [`startPg=${currentPage}`, `pgSize=${pageSize}`, `keyword=${keyword}`]
window.request({ request({
url: `/nacos/v1/ns/catalog/serviceList?${parameter.join('&')}`, url: `/nacos/v1/ns/catalog/serviceList?${parameter.join('&')}`,
beforeSend: () => this.openLoading(), beforeSend: () => this.openLoading(),
success: ({ count = 0, serviceList = [] } = {}) => this.setState({ success: ({ count = 0, serviceList = [] } = {}) => this.setState({
@ -117,7 +118,7 @@ class ServiceList extends React.Component {
fixedHeader={true} fixedHeader={true}
maxBodyHeight={530} maxBodyHeight={530}
locale={locale} locale={locale}
language={window.aliwareIntl.currentLanguageCode} language={aliwareIntl.currentLanguageCode}
className={r => this.rowColor[r.status]} className={r => this.rowColor[r.status]}
getRowProps={this.rowColor} getRowProps={this.rowColor}
> >
@ -140,7 +141,7 @@ class ServiceList extends React.Component {
total={this.state.total} total={this.state.total}
pageSize={this.state.pageSize} pageSize={this.state.pageSize}
onChange={currentPage => this.setState({ currentPage }, () => this.queryServiceList())} onChange={currentPage => this.setState({ currentPage }, () => this.queryServiceList())}
language={window.pageLanguage} language={aliwareIntl.currentLanguageCode}
/> />
</div> </div>
</Loading> </Loading>

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

@ -11,7 +11,9 @@
* limitations under the License. * 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 = {} export const I18N = {}
/** /**
* 服务列表 * 服务列表

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

@ -13,7 +13,6 @@
import React from 'react'; import React from 'react';
import { Router, Route, Switch } from 'dva/router'; import { Router, Route, Switch } from 'dva/router';
import './globalLib';
import './lib.js'; import './lib.js';
import App from './containers/App'; import App from './containers/App';
import Namespace from './pages/NameSpace'; import Namespace from './pages/NameSpace';
@ -30,11 +29,10 @@ import ServiceList from './pages/ServiceManagement/ServiceList';
import ServiceDetail from './pages/ServiceManagement/ServiceDetail'; import ServiceDetail from './pages/ServiceManagement/ServiceDetail';
function RouterConfig({ history }) { function RouterConfig({ history }) {
window.hashHistory = history;
return ( return (
<Router history={history}> <Router history={history}>
<Switch> <Switch>
<App> <App history={history}>
<Route path="/Namespace" component={Namespace} /> <Route path="/Namespace" component={Namespace} />
<Route path="/Newconfig" component={Newconfig} /> <Route path="/Newconfig" component={Newconfig} />
<Route path="/Configsync" component={Configsync} /> <Route path="/Configsync" component={Configsync} />