From 900471bce563eda26e79b6a65c71faf685304633 Mon Sep 17 00:00:00 2001 From: Haitao Yue Date: Wed, 27 May 2020 17:08:59 +0800 Subject: [PATCH] improvement: upgrade antd version to 4 fix connect import error from dva, fix i18n bug fix #154 Signed-off-by: Haitao Yue --- src/dashboard/config/router.config.js | 4 +- src/dashboard/config/theme.js | 2 - src/dashboard/package.json | 6 +- .../components/GlobalHeader/RightContent.js | 9 +- .../src/components/GlobalHeader/index.js | 4 +- .../src/components/IconFont/index.js | 2 +- .../src/components/Login/LoginItem.js | 12 +- src/dashboard/src/components/Login/index.js | 22 +- src/dashboard/src/components/Login/map.js | 10 +- .../PageHeaderWrapper/GridContent.js | 2 +- .../src/components/SelectLang/index.js | 7 +- .../components/SettingDrawer/BlockCheckbox.js | 7 +- .../components/SettingDrawer/ThemeColor.js | 10 +- .../src/components/SettingDrawer/index.js | 72 +-- .../src/components/SettingDrawer/index.less | 2 +- .../src/components/SiderMenu/BaseMenu.js | 27 +- src/dashboard/src/layouts/BasicLayout.js | 6 +- src/dashboard/src/layouts/Footer.js | 5 +- src/dashboard/src/layouts/UserLayout.js | 5 +- src/dashboard/src/models/user.js | 1 - src/dashboard/src/pages/Authorized.js | 3 +- .../src/pages/Exception/TriggerException.js | 2 +- src/dashboard/src/pages/Operator/Agent.js | 2 +- .../src/pages/Operator/Agent/Agent.js | 128 +++-- .../src/pages/Operator/Agent/newAgent.js | 513 +++++++++--------- .../src/pages/Operator/Node/New/nodeInfo.js | 3 +- src/dashboard/src/pages/Operator/Node/Node.js | 228 ++++---- .../src/pages/Operator/Organization.js | 94 ++-- src/dashboard/src/pages/Operator/Overview.js | 2 +- .../src/pages/Operator/UserManagement.js | 347 ++++++------ src/dashboard/src/pages/Operator/styles.less | 2 +- .../pages/Overview/{Overview.js => index.js} | 6 +- src/dashboard/src/pages/User/Login.js | 16 +- 33 files changed, 793 insertions(+), 768 deletions(-) rename src/dashboard/src/pages/Overview/{Overview.js => index.js} (62%) diff --git a/src/dashboard/config/router.config.js b/src/dashboard/config/router.config.js index 9096e3ea4..50687602e 100755 --- a/src/dashboard/config/router.config.js +++ b/src/dashboard/config/router.config.js @@ -29,7 +29,7 @@ export default [ path: '/overview', name: 'overview', icon: 'eye', - component: './Overview/Overview', + component: './Overview/index', }, { path: '/operator', @@ -99,7 +99,7 @@ export default [ }, ], }, - ] + ], }, { component: '404', diff --git a/src/dashboard/config/theme.js b/src/dashboard/config/theme.js index 0d1be37be..bb835503d 100644 --- a/src/dashboard/config/theme.js +++ b/src/dashboard/config/theme.js @@ -16,8 +16,6 @@ module.exports = { 'border-color-split': '#152935', 'text-color ': 'fade(#fff, 80%)', 'text-color-secondary ': 'fade(#dfe6eb, 80%)', - 'text-color-warning': '#efc100', - 'text-color-danger': '#ff5050', 'success-color': '#8cd211', 'error-color': '#ff5050', 'warning-color': '#efc100', diff --git a/src/dashboard/package.json b/src/dashboard/package.json index 0274af85f..0a6dcb214 100755 --- a/src/dashboard/package.json +++ b/src/dashboard/package.json @@ -52,7 +52,8 @@ ], "dependencies": { "@antv/data-set": "^0.10.1", - "antd": "3.16.1", + "antd": "^4.2.5", + "@ant-design/icons": "^4.1.0", "bizcharts": "3.5.2-beta.1", "bizcharts-plugin-slider": "^2.1.1-beta.1", "classnames": "^2.2.6", @@ -82,6 +83,8 @@ "cello-paginator": "^1.0.1", "umi-request": "^1.2.19", "@ant-design/pro-layout": "^5.0.0", + "umi": "^3.1.4", + "redux": "^4.0.5", "validator": "^11.0.0" }, "devDependencies": { @@ -126,7 +129,6 @@ "tslint-config-prettier": "^1.17.0", "tslint-react": "^3.6.0", "faker": "^4.1.0", - "umi": "^3.1.4", "@umijs/preset-react": "^1.2.2" }, "engines": { diff --git a/src/dashboard/src/components/GlobalHeader/RightContent.js b/src/dashboard/src/components/GlobalHeader/RightContent.js index 1e9ed0f34..cde1acd56 100644 --- a/src/dashboard/src/components/GlobalHeader/RightContent.js +++ b/src/dashboard/src/components/GlobalHeader/RightContent.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react'; import { injectIntl } from 'umi'; -import { Spin, Menu, Icon, Avatar } from 'antd'; +import { Spin, Menu, Avatar } from 'antd'; +import { LogoutOutlined } from '@ant-design/icons'; import HeaderDropdown from '../HeaderDropdown'; import SelectLang from '../SelectLang'; import styles from './index.less'; @@ -11,10 +12,10 @@ class GlobalHeaderRight extends PureComponent { const menu = ( - + {intl.formatMessage({ id: 'menu.account.logout', - defaultMessage: 'logout' + defaultMessage: 'logout', })} @@ -41,4 +42,4 @@ class GlobalHeaderRight extends PureComponent { } } -export default injectIntl(GlobalHeaderRight) +export default injectIntl(GlobalHeaderRight); diff --git a/src/dashboard/src/components/GlobalHeader/index.js b/src/dashboard/src/components/GlobalHeader/index.js index 35bff3bd4..3853e81c1 100644 --- a/src/dashboard/src/components/GlobalHeader/index.js +++ b/src/dashboard/src/components/GlobalHeader/index.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Icon } from 'antd'; +import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'; import { Link } from 'umi'; import Debounce from 'lodash-decorators/debounce'; import styles from './index.less'; @@ -32,7 +32,7 @@ export default class GlobalHeader extends PureComponent { )} - + {collapsed ? : } diff --git a/src/dashboard/src/components/IconFont/index.js b/src/dashboard/src/components/IconFont/index.js index 0b99dec3a..a497033cf 100644 --- a/src/dashboard/src/components/IconFont/index.js +++ b/src/dashboard/src/components/IconFont/index.js @@ -1,4 +1,4 @@ -import { Icon } from 'antd'; +import Icon from '@ant-design/icons'; import { iconfontUrl as scriptUrl } from '../../defaultSettings'; // 使用： diff --git a/src/dashboard/src/components/Login/LoginItem.js b/src/dashboard/src/components/Login/LoginItem.js index b3cc4d48a..fa449a5c6 100644 --- a/src/dashboard/src/components/Login/LoginItem.js +++ b/src/dashboard/src/components/Login/LoginItem.js @@ -73,10 +73,6 @@ class WrapFormItem extends Component { render() { const { count } = this.state; - const { - form: { getFieldDecorator }, - } = this.props; - // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props const { onChange, @@ -98,10 +94,10 @@ class WrapFormItem extends Component { if (type === 'Captcha') { const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']); return ( - + - {getFieldDecorator(name, options)()} + - {formatMessage({ id: 'app.setting.production.hint' })}{' '} + {intl.formatMessage({ id: 'app.setting.production.hint' })}{' '} , + dashboard: , +}; // Allow menu.js config icon as string or ReactNode // icon: 'setting', @@ -17,13 +22,13 @@ const { SubMenu } = Menu; // icon: , const getIcon = icon => { if (typeof icon === 'string') { - if (isUrl(icon)) { - return icon} />; - } - if (icon.startsWith('icon-')) { - return ; - } - return ; + // if (isUrl(icon)) { + // return icon} />; + // } + // if (icon.startsWith('icon-')) { + // return ; + // } + return menus[icon]; } return icon; }; diff --git a/src/dashboard/src/layouts/BasicLayout.js b/src/dashboard/src/layouts/BasicLayout.js index da23b8d20..a043b75c4 100644 --- a/src/dashboard/src/layouts/BasicLayout.js +++ b/src/dashboard/src/layouts/BasicLayout.js @@ -4,16 +4,16 @@ import React from 'react'; import { Layout } from 'antd'; import DocumentTitle from 'react-document-title'; -import { connect } from 'dva'; +import { connect } from 'umi'; import { ContainerQuery } from 'react-container-query'; import classNames from 'classnames'; import Media from 'react-media'; +import SiderMenu from '@/components/SiderMenu'; +import getPageTitle from '@/utils/getPageTitle'; import logo from '../assets/logo.svg'; import Footer from './Footer'; import Header from './Header'; import Context from './MenuContext'; -import SiderMenu from '@/components/SiderMenu'; -import getPageTitle from '@/utils/getPageTitle'; import styles from './BasicLayout.less'; // lazy load SettingDrawer diff --git a/src/dashboard/src/layouts/Footer.js b/src/dashboard/src/layouts/Footer.js index bdccfd403..6bc1d9691 100644 --- a/src/dashboard/src/layouts/Footer.js +++ b/src/dashboard/src/layouts/Footer.js @@ -1,5 +1,6 @@ import React, { Fragment } from 'react'; -import { Layout, Icon } from 'antd'; +import { Layout } from 'antd'; +import { CopyrightOutlined } from '@ant-design/icons'; import GlobalFooter from '@/components/GlobalFooter'; const { Footer } = Layout; @@ -8,7 +9,7 @@ const FooterView = () => ( - Copyright Cello + Copyright Cello } /> diff --git a/src/dashboard/src/layouts/UserLayout.js b/src/dashboard/src/layouts/UserLayout.js index df15a956f..c51c17f0a 100644 --- a/src/dashboard/src/layouts/UserLayout.js +++ b/src/dashboard/src/layouts/UserLayout.js @@ -1,11 +1,10 @@ import React, { Component, Fragment } from 'react'; -import { connect } from 'dva'; -import { Link } from 'umi'; +import { Link, connect } from 'umi'; import GlobalFooter from '@/components/GlobalFooter'; import DocumentTitle from 'react-document-title'; import SelectLang from '@/components/SelectLang'; -import styles from './UserLayout.less'; import getPageTitle from '@/utils/getPageTitle'; +import styles from './UserLayout.less'; const links = []; diff --git a/src/dashboard/src/models/user.js b/src/dashboard/src/models/user.js index dac2c85c3..33ec11f99 100644 --- a/src/dashboard/src/models/user.js +++ b/src/dashboard/src/models/user.js @@ -40,7 +40,6 @@ export default { }, *fetchCurrent(_, { call, put }) { const response = yield call(queryCurrent); - console.log(response); yield put({ type: 'saveCurrentUser', payload: response.user, diff --git a/src/dashboard/src/pages/Authorized.js b/src/dashboard/src/pages/Authorized.js index 5889812b6..c6b85c1a7 100644 --- a/src/dashboard/src/pages/Authorized.js +++ b/src/dashboard/src/pages/Authorized.js @@ -1,7 +1,6 @@ import React from 'react'; -import Redirect from 'umi/redirect'; import pathToRegexp from 'path-to-regexp'; -import { connect } from 'dva'; +import { connect, Redirect } from 'umi'; import Authorized from '@/utils/Authorized'; import { getAuthority } from '@/utils/authority'; import Exception403 from '@/pages/Exception/403'; diff --git a/src/dashboard/src/pages/Exception/TriggerException.js b/src/dashboard/src/pages/Exception/TriggerException.js index 15ace510f..12a9be704 100644 --- a/src/dashboard/src/pages/Exception/TriggerException.js +++ b/src/dashboard/src/pages/Exception/TriggerException.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import { Button, Spin, Card } from 'antd'; -import { connect } from 'dva'; +import { connect } from 'umi'; import styles from './style.less'; @connect(state => ({ diff --git a/src/dashboard/src/pages/Operator/Agent.js b/src/dashboard/src/pages/Operator/Agent.js index 62a1aec6b..640043ad1 100644 --- a/src/dashboard/src/pages/Operator/Agent.js +++ b/src/dashboard/src/pages/Operator/Agent.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { connect } from 'dva'; +import { connect } from 'umi'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; @connect(() => ({})) diff --git a/src/dashboard/src/pages/Operator/Agent/Agent.js b/src/dashboard/src/pages/Operator/Agent/Agent.js index ea1a41736..13b793e4c 100755 --- a/src/dashboard/src/pages/Operator/Agent/Agent.js +++ b/src/dashboard/src/pages/Operator/Agent/Agent.js @@ -13,22 +13,24 @@ import { InputNumber, Select, } from 'antd'; +import { PlusOutlined } from '@ant-design/icons'; import moment from 'moment'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; -import styles from '../styles.less'; import { getAuthority } from '@/utils/authority'; +import styles from '../styles.less'; const FormItem = Form.Item; const { Option } = Select; -const ApplyAgentForm = Form.create()(props => { - const { visible, form, handleSubmit, handleModalVisible, confirmLoading } = props; +const ApplyAgentForm = props => { + const [form] = Form.useForm(); + const { visible, handleSubmit, handleModalVisible, confirmLoading } = props; const intl = useIntl(); const onSubmit = () => { - form.validateFields((err, fieldsValue) => { - if (err) return; - handleSubmit(fieldsValue); - }); + form.submit(); + }; + const onFinish = values => { + handleSubmit(values); }; const agentTypeValues = ['docker', 'kubernetes']; const agentTypeOptions = agentTypeValues.map(item => ( @@ -52,33 +54,40 @@ const ApplyAgentForm = Form.create()(props => { return ( handleModalVisible()} > - - {form.getFieldDecorator('capacity', { - initialValue: '', - rules: [ + { max={100} style={width} /> - )} - - - {form.getFieldDecorator('type', { - initialValue: agentTypeValues[0], - rules: [ + + {agentTypeOptions})} - + ]} + > + + + ); -}); +}; @connect(({ agent, organization, user, loading }) => ({ agent, @@ -343,14 +352,15 @@ class Agent extends PureComponent {
-

- {intl.formatMessage({ id: 'app.operator.agent.type', defaultMessage: 'Type' })} -

+

{intl.formatMessage({ id: 'app.operator.agent.type', defaultMessage: 'Type' })}

{type}

- {intl.formatMessage({ id: 'app.operator.agent.table.header.creationTime', defaultMessage: 'Creation Time' })} + {intl.formatMessage({ + id: 'app.operator.agent.table.header.creationTime', + defaultMessage: 'Creation Time', + })}

{moment(createdAt).format('YYYY-MM-DD HH:mm:ss')}

@@ -370,19 +380,20 @@ class Agent extends PureComponent { return (
@@ -396,13 +407,19 @@ class Agent extends PureComponent { this.editAgent(item)}> - {intl.formatMessage({ id: 'iform.menu.item.update', defaultMessage: 'Update' })} + {intl.formatMessage({ + id: 'iform.menu.item.update', + defaultMessage: 'Update', + })} , this.nodeList(item)}> {intl.formatMessage({ id: 'menu.operator.node', defaultMessage: 'Node' })} , this.handleDelete(item)}> - {intl.formatMessage({ id: 'form.menu.item.delete', defaultMessage: 'Delete' })} + {intl.formatMessage({ + id: 'form.menu.item.delete', + defaultMessage: 'Delete', + })} , ]} > @@ -412,7 +429,10 @@ class Agent extends PureComponent {

{item.ip}

- {intl.formatMessage({ id: 'app.operator.agent.listItem.organization', defaultMessage: 'Organization' })} + {intl.formatMessage({ + id: 'app.operator.agent.listItem.organization', + defaultMessage: 'Organization', + })} {' : '} {userRole === 'operator' ? filterOrgName(item.organization_id) diff --git a/src/dashboard/src/pages/Operator/Agent/newAgent.js b/src/dashboard/src/pages/Operator/Agent/newAgent.js index 065ede30a..3a2da8b61 100755 --- a/src/dashboard/src/pages/Operator/Agent/newAgent.js +++ b/src/dashboard/src/pages/Operator/Agent/newAgent.js @@ -1,18 +1,9 @@ -import React, { PureComponent } from 'react'; -import { - Card, - Form, - Input, - Button, - Select, - Switch, - Icon, - InputNumber, - Upload, - message, -} from 'antd'; +import React from 'react'; +import { Card, Form, Input, Button, Select, Switch, InputNumber, Upload, message } from 'antd'; +import { UploadOutlined } from '@ant-design/icons'; +import { compose } from 'redux'; import isIP from 'validator/lib/isIP'; -import { connect, withRouter, useIntl, history } from 'umi'; +import { connect, withRouter, useIntl, history, injectIntl } from 'umi'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import { getAuthority } from '@/utils/authority'; @@ -25,8 +16,7 @@ const { Option } = Select; updating: loading.effects['agent/updateAgent'], loadingAgent: loading.effects['agent/getAgent'], })) -@Form.create() -class CreateAgent extends PureComponent { +class CreateAgent extends React.Component { componentDidMount() { const { location } = this.props; const { query = {} } = location; @@ -55,18 +45,15 @@ class CreateAgent extends PureComponent { history.push('/operator/agent'); }; - validateIp = (rule, value, callback) => { - const intl = useIntl(); - if (value !== '') { - if (!isIP(value)) { - callback( - intl.formatMessage({ id: 'app.operator.newAgent.error.ip', defaultMessage: 'Please enter a valid IP address.For example:192.168.0.10.' }) - ); - } else { - callback(); - } - } else { - callback(); + validateIp = async (rule, value) => { + const { intl } = this.props; + if (!isIP(value)) { + throw new Error( + intl.formatMessage({ + id: 'app.operator.newAgent.error.ip', + defaultMessage: 'Please enter a valid IP address.For example:192.168.0.10.', + }) + ); } }; @@ -87,8 +74,9 @@ class CreateAgent extends PureComponent { }; validateUpdateResponse = () => { + const { intl } = this.props; message.success( - formatMessage({ + intl.formatMessage({ id: 'app.operator.updateAgent.success', defaultMessage: 'Update agent success', }) @@ -113,57 +101,49 @@ class CreateAgent extends PureComponent { } }; - handleSubmit = e => { - e.preventDefault(); + handleSubmit = values => { const { location } = this.props; const { query = {} } = location; const action = query.action || 'create'; - const { - form: { validateFieldsAndScroll }, - dispatch, - } = this.props; - validateFieldsAndScroll((err, values) => { - if (!err) { - if (action === 'edit') { - const formData = new FormData(); - const userRole = getAuthority()[0]; - const id = query.id; - const requestMethod = userRole === 'operator' ? 'PUT' : 'PATCH'; + const { dispatch } = this.props; + if (action === 'edit') { + const formData = new FormData(); + const userRole = getAuthority()[0]; + const id = query.id; + const requestMethod = userRole === 'operator' ? 'PUT' : 'PATCH'; - formData.append('name', values.name); - formData.append('capacity', values.capacity); - formData.append('log_level', values.log_level); + formData.append('name', values.name); + formData.append('capacity', values.capacity); + formData.append('log_level', values.log_level); - if (userRole === 'operator') { - formData.append('schedulable', values.schedulable); - } + if (userRole === 'operator') { + formData.append('schedulable', values.schedulable); + } - dispatch({ - type: 'agent/updateAgent', - payload: { - data: formData, - id, - requestMethod, - }, - callback: this.submitCallback, - }); - } else { - const formData = new FormData(); + dispatch({ + type: 'agent/updateAgent', + payload: { + data: formData, + id, + requestMethod, + }, + callback: this.submitCallback, + }); + } else { + const formData = new FormData(); - Object.keys(values).forEach(key => { - formData.append(key, values[key]); - }); + Object.keys(values).forEach(key => { + formData.append(key, values[key]); + }); - dispatch({ - type: 'agent/createAgent', - payload: { - formData, - }, - callback: this.submitCallback, - }); - } - } - }); + dispatch({ + type: 'agent/createAgent', + payload: { + formData, + }, + callback: this.submitCallback, + }); + } }; normFile = e => { @@ -174,19 +154,17 @@ class CreateAgent extends PureComponent { }; render() { - const { location } = this.props; + const { location, intl } = this.props; const { query = {} } = location; const action = query.action || 'create'; const userRole = getAuthority()[0]; - const intl = useIntl(); const { - form: { getFieldDecorator, getFieldValue }, agent: { agent }, submitting, updating, loadingAgent, } = this.props; - const configFile = agent.config_file ? agent.config_file : ''; + // const configFile = agent.config_file ? agent.config_file : ''; const schedulable = action === 'edit' ? agent.schedulable : true; const formItemLayout = { labelCol: { @@ -231,231 +209,238 @@ class CreateAgent extends PureComponent { return ( -

+ - {getFieldDecorator('name', { - initialValue: action === 'create' ? '' : agent.name, - rules: [ - { - required: false, - message: ( - intl.formatMessage({ id: 'app.operator.newAgent.required.Name', defaultMessage: 'Please input name.' }) - ), - }, - ], - })( - - )} + - {getFieldDecorator('ip', { - initialValue: action === 'create' ? '' : agent.ip, - rules: [ - { - required: true, - message: ( - intl.formatMessage({ id: 'app.operator.newAgent.required.ip', defaultMessage: 'Please input the ip address of the agent.' }) - ), - }, - { - validator: this.validateIp, - }, - ], - })( - - )} + - {getFieldDecorator('image', { - initialValue: action === 'create' ? '' : agent.image, - rules: [ - { - required: true, - message: ( - intl.formatMessage({ id: 'app.operator.newAgent.required.image', defaultMessage: 'Please input the name of the agent\'s image.' }) - ), - }, - ], - })( - - )} + - {getFieldDecorator('capacity', { - initialValue: action === 'create' ? 1 : agent.capacity, - rules: [ - { - required: true, - message: ( - intl.formatMessage({ id: 'app.operator.newAgent.required.agentCapacity', defaultMessage: 'Please input the capacity of the agent.' }) - ), - }, - ], - })( - - )} + - {getFieldDecorator('node_capacity', { - initialValue: action === 'create' ? 10 : agent.node_capacity, - rules: [ - { - required: true, - message: ( - intl.formatMessage({ id: 'app.operator.newAgent.required.nodeCapacity', defaultMessage: 'Please input the capacity of nodes.' }) - ), - }, - ], - })( - - )} + - {getFieldDecorator('type', { - initialValue: action === 'create' ? agentTypeValues[0] : agent.type, - rules: [ - { - required: true, - message: ( - intl.formatMessage({ id: 'app.operator.newAgent.required.type', defaultMessage: 'Please select a type.' }) - ), - }, - ], - })( - - )} + - {getFieldDecorator('config_file', { - getValueFromEvent: this.normFile, - initialValue: null, - })( - action === 'edit' ? ( - {configFile.substring(configFile.lastIndexOf('/') + 1)} - ) : ( - - - - ) - )} + + + - {getFieldDecorator('log_level', { - initialValue: action === 'create' ? logLevelValues[0] : agent.log_level, - rules: [ - { - required: false, - message: ( - intl.formatMessage({ id: 'app.operator.newAgent.required.LogLevel', defaultMessage: 'Please select a log level.' }) - ), - }, - ], - })()} + - {getFieldDecorator('schedulable', { - initialValue: schedulable, - })( - - )} +
({})) diff --git a/src/dashboard/src/pages/Operator/UserManagement.js b/src/dashboard/src/pages/Operator/UserManagement.js index c9450f61a..bb24b0794 100644 --- a/src/dashboard/src/pages/Operator/UserManagement.js +++ b/src/dashboard/src/pages/Operator/UserManagement.js @@ -2,7 +2,7 @@ SPDX-License-Identifier: Apache-2.0 */ import React, { PureComponent, Fragment } from 'react'; -import { connect, useIntl, injectIntl } from 'umi'; +import { connect, injectIntl } from 'umi'; import { Card, Button, @@ -12,10 +12,10 @@ import { Select, message, Dropdown, - Icon, Menu, AutoComplete, } from 'antd'; +import { DownOutlined, PlusOutlined } from '@ant-design/icons'; import moment from 'moment'; import isEmail from 'validator/lib/isEmail'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; @@ -27,10 +27,9 @@ const FormItem = Form.Item; const Option = Select.Option; const AutoCompleteOption = AutoComplete.Option; -const CreateUpdateForm = Form.create()(props => { +const CreateUpdateForm = props => { const { visible, - form, method, handleSubmit, handleModalVisible, @@ -38,75 +37,88 @@ const CreateUpdateForm = Form.create()(props => { user, organizations, onSearchOrganization, + intl, } = props; - const { getFieldValue } = form; + const [form] = Form.useForm(); const userRole = getAuthority()[0]; - const intl = useIntl(); + let orgID = ''; const onSubmit = () => { - form.validateFields((err, fieldsValue) => { - if (err) return; - handleSubmit(method, fieldsValue, user); - }); + form.submit(); }; - const validateEmail = (rule, value, callback) => { + const onFinish = values => { + handleSubmit( + method, + { + ...values, + organization: orgID, + }, + user + ); + }; + const validateEmail = async (rule, value) => { if (value && !isEmail(value)) { - callback( + throw new Error( intl.formatMessage({ id: 'app.operator.user.form.email.noValid', defaultMessage: 'Please input valid email', }) ); } - callback(); }; const organizationOptions = organizations.map(org => ( - {org.name} + + {org.name} + )); - const onSelectOrganization = value => { + const onSelectOrganization = (value, option) => { form.setFieldsValue({ organization: value, }); + orgID = option.key; }; - const validatePasswordConfirm = (rule, value, callback) => { - if (value && getFieldValue('password') !== value) { - callback( + const validatePasswordConfirm = async (rule, value) => { + if (value && form.getFieldValue('password') !== value) { + throw new Error( intl.formatMessage({ id: 'app.operator.user.form.passwordConfirm.noValid', defaultMessage: 'Inconsistent password input twice', }) ); } - callback(); }; return ( handleModalVisible()} > - - {form.getFieldDecorator('username', { - initialValue: method === 'create' ? '' : user.username, - rules: [ + { }), min: 1, }, - ], - })( + ]} + > - )} - - - {form.getFieldDecorator('role', { - initialValue: method === 'create' ? 'user' : user.role, - })( + + - )} - - - {form.getFieldDecorator('email', { - initialValue: method === 'create' ? '' : user.email, - rules: [ + + { { validator: validateEmail, }, - ], - })( + ]} + > - )} - - - {form.getFieldDecorator('password', { - initialValue: method === 'create' ? '' : user.username, - rules: [ + + { defaultMessage: 'Please input password', }), }, - ], - })( + ]} + > - )} - - - {form.getFieldDecorator('passwordConfirm', { - initialValue: method === 'create' ? '' : user.usernamep, - rules: [ + + { { validator: validatePasswordConfirm, }, - ], - })( + ]} + > - )} - - {userRole === 'operator' && ( - - {form.getFieldDecorator( - 'organization', - {} - )( + + {userRole === 'operator' && ( + { > {organizationOptions} - )} - - )} + + )} + ); -}); +}; @connect(({ user, organization, loading }) => ({ user, @@ -498,43 +490,37 @@ class UserManagement extends PureComponent { })); const columns = [ { - title: ( - intl.formatMessage({ - id: 'app.operator.user.table.header.name', - defaultMessage: 'User Name', - }) - ), - dataIndex: 'username', - }, + title: intl.formatMessage({ + id: 'app.operator.user.table.header.name', + defaultMessage: 'User Name', + }), + dataIndex: 'username', + }, { - title: ( - intl.formatMessage({ - id: 'app.operator.user.table.header.role', - defaultMessage: 'User Role', - }) - ), + title: intl.formatMessage({ + id: 'app.operator.user.table.header.role', + defaultMessage: 'User Role', + }), dataIndex: 'role', - render: text => ( + render: text => intl.formatMessage({ id: `app.operator.user.role.${text}`, defaultMessage: 'User', - }) - ), + }), }, { - title: ( - intl.formatMessage({ - id: 'app.operator.user.table.header.organization', - defaultMessage: 'Organization', - }) - ), + title: intl.formatMessage({ + id: 'app.operator.user.table.header.organization', + defaultMessage: 'Organization', + }), dataIndex: 'organization', render: text => (text ? text.name : ''), }, { - title: ( - intl.formatMessage({ id: 'app.operator.organization.table.header.createTime', defaultMessage: 'Create Time' }) - ), + title: intl.formatMessage({ + id: 'app.operator.organization.table.header.createTime', + defaultMessage: 'Create Time', + }), dataIndex: 'created_at', render: text => {moment(text).format('YYYY-MM-DD HH:mm:ss')}, }, @@ -546,12 +532,10 @@ class UserManagement extends PureComponent { render: (text, record) => ( this.handleDelete(record)}> - { - intl.formatMessage({ - id: 'form.menu.item.delete', - defaultMessage: 'Delete', - }) - } + {intl.formatMessage({ + id: 'form.menu.item.delete', + defaultMessage: 'Delete', + })} ), @@ -559,6 +543,7 @@ class UserManagement extends PureComponent { ]; const formProps = { + intl, visible: modalVisible, method: modalMethod, handleModalVisible: this.handleModalVisible, @@ -577,47 +562,39 @@ class UserManagement extends PureComponent { const menu = ( - { - intl.formatMessage({ - id: 'form.menu.item.delete', - defaultMessage: 'Delete', - }) - } + {intl.formatMessage({ + id: 'form.menu.item.delete', + defaultMessage: 'Delete', + })} ); return (
- {selectedRows.length > 0 && ( diff --git a/src/dashboard/src/pages/Operator/styles.less b/src/dashboard/src/pages/Operator/styles.less index 2ea129e49..d8af7dbdb 100755 --- a/src/dashboard/src/pages/Operator/styles.less +++ b/src/dashboard/src/pages/Operator/styles.less @@ -69,7 +69,7 @@ } .danger { - color: @text-color-danger; + color: @error-color; } .disabled { diff --git a/src/dashboard/src/pages/Overview/Overview.js b/src/dashboard/src/pages/Overview/index.js similarity index 62% rename from src/dashboard/src/pages/Overview/Overview.js rename to src/dashboard/src/pages/Overview/index.js index 5804fb5a8..bb8cb5b58 100644 --- a/src/dashboard/src/pages/Overview/Overview.js +++ b/src/dashboard/src/pages/Overview/index.js @@ -1,12 +1,10 @@ import React, { PureComponent } from 'react'; -import { connect } from 'dva'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; -@connect(() => ({})) -class Overview extends PureComponent { +class Index extends PureComponent { render() { return User Overview; } } -export default Overview; +export default Index; diff --git a/src/dashboard/src/pages/User/Login.js b/src/dashboard/src/pages/User/Login.js index 10275bda1..948fc32a7 100644 --- a/src/dashboard/src/pages/User/Login.js +++ b/src/dashboard/src/pages/User/Login.js @@ -54,13 +54,7 @@ class LoginPage extends Component { const { type, autoLogin } = this.state; return (
- { - this.loginForm = form; - }} - > + {login.status === 'error' && login.type === 'account' && !submitting && @@ -84,21 +78,17 @@ class LoginPage extends Component { message: intl.formatMessage({ id: 'validation.password.required' }), }, ]} - onPressEnter={e => { - e.preventDefault(); - this.loginForm.validateFields(this.handleSubmit); - }} />
{intl.formatMessage({ - id: 'app.login.remember-me' + id: 'app.login.remember-me', })}
{intl.formatMessage({ - id: 'app.login.login' + id: 'app.login.login', })}