fix: closes #640, #648

2019-01-18 23:46:41 +08:00 · 2019-01-18 23:46:41 +08:00 · 73c98d3541
commit 73c98d3541
parent 59fd26abaa
10 changed files with 76 additions and 17 deletions
--- a/console/src/main/resources/static/console-fe/public/css/bootstrap.css
+++ b/console/src/main/resources/static/console-fe/public/css/bootstrap.css
@ -323,7 +323,6 @@ select,
 textarea {
  font-family: inherit;
  font-size: inherit;
-  line-height: inherit;
 }

 a {
@ -7122,4 +7121,4 @@ td.visible-print {
  td.hidden-print {
    display: none !important;
  }
-}
+}
--- a/console/src/main/resources/static/console-fe/public/index.html
+++ b/console/src/main/resources/static/console-fe/public/index.html
@ -20,6 +20,7 @@
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>Nacos</title>
 	<link rel="shortcut icon" href="//www.aliyun.com/favicon.ico" type="image/x-icon" />
+  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 	<link rel="stylesheet" type="text/css" href="css/console1412.css">
 	<!-- 第三方css开始 -->
 	<link rel="stylesheet" type="text/css" href="css/codemirror.css">
--- a/console/src/main/resources/static/console-fe/src/index.js
+++ b/console/src/main/resources/static/console-fe/src/index.js
@ -114,7 +114,6 @@ class App extends React.Component {
      <HashRouter>
        <Switch>
          <Route path="/login" component={Login} />
-
          <Layout navList={_menu.data}>
            {MENU.map(item => (
              <Route key={item.path} {...item} />
--- a/console/src/main/resources/static/console-fe/src/layouts/Header.js
+++ b/console/src/main/resources/static/console-fe/src/layouts/Header.js
@ -32,6 +32,8 @@ class Header extends React.Component {

  static propTypes = {
    locale: PropTypes.object,
+    history: PropTypes.object,
+    location: PropTypes.object,
    language: PropTypes.string,
    changeLanguage: PropTypes.func,
  };
@ -53,7 +55,6 @@ class Header extends React.Component {
      const base64Url = token.split('.')[1];
      const base64 = base64Url.replace('-', '+').replace('_', '/');
      const parsedToken = JSON.parse(window.atob(base64));
-      console.log(parsedToken);
      return parsedToken.sub;
    }
    return '';
--- a/console/src/main/resources/static/console-fe/src/layouts/MainLayout.js
+++ b/console/src/main/resources/static/console-fe/src/layouts/MainLayout.js
@ -31,6 +31,7 @@ class MainLayout extends React.Component {
  static propTypes = {
    navList: PropTypes.array,
    history: PropTypes.object,
+    location: PropTypes.object,
    locale: PropTypes.object,
    children: PropTypes.any,
  };
@ -74,6 +75,11 @@ class MainLayout extends React.Component {
    iconClass.className = tmpClassName;
  }

+  /**
+   * Click the back button
+   * TODO: this.props.history.goBack(); ???
+   * @param url
+   */
  nacosGoBack(url) {
    const params = window.location.hash.split('?')[1];
    const urlArr = params.split('&') || [];
@ -93,6 +99,9 @@ class MainLayout extends React.Component {
        }
      }
    }
+    if (localStorage.getItem('namespace')) {
+      queryParams.push(`namespace=${localStorage.getItem('namespace')}`);
+    }
    this.props.history.push(`/${url}?${queryParams.join('&')}`);
  }

@ -401,7 +410,6 @@ class MainLayout extends React.Component {
                    <span style={{ marginLeft: 5 }}>{nacosVersion}</span>
                  </div>
                )}
-
                <div
                  className="product-nav-list"
                  style={{ position: 'relative', top: 0, height: '100%' }}
--- a/console/src/main/resources/static/console-fe/src/locales/en-US.js
+++ b/console/src/main/resources/static/console-fe/src/locales/en-US.js
@ -125,6 +125,9 @@ const I18N_CONF = {
    healthCheckPatternService: 'Service',
    healthCheckPatternClient: 'Client',
    healthCheckPatternNone: 'None',
+    serviceNameRequired: 'Please enter a service name',
+    protectThresholdRequired: 'Please enter a protect threshold',
+    healthCheckModeRequired: 'Please select health check pattern',
  },
  InstanceTable: {
    operation: 'Operation',
--- a/console/src/main/resources/static/console-fe/src/locales/zh-CN.js
+++ b/console/src/main/resources/static/console-fe/src/locales/zh-CN.js
@ -125,6 +125,9 @@ const I18N_CONF = {
    healthCheckPatternService: '服务端',
    healthCheckPatternClient: '客户端',
    healthCheckPatternNone: '禁止',
+    serviceNameRequired: '请输入服务名',
+    protectThresholdRequired: '请输入保护阈值',
+    healthCheckModeRequired: '请选择健康检查模式',
  },
  InstanceTable: {
    operation: '操作',
--- a/console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/NewConfig/NewConfig.js
+++ b/console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/NewConfig/NewConfig.js
@ -442,13 +442,10 @@ class NewConfig extends React.Component {
                      required: true,
                      message: locale.newConfig,
                    },
-                    {
-                      max: 255,
-                      message: locale.dataIdIsNotEmpty,
-                    },
                    { validator: this.validateChart.bind(this) },
                  ],
                })}
+                maxLength={255}
                addonTextBefore={
                  this.state.addonBefore ? (
                    <div style={{ minWidth: 100, color: '#373D41' }}>{this.state.addonBefore}</div>
--- a/console/src/main/resources/static/console-fe/src/pages/Login/Login.jsx
+++ b/console/src/main/resources/static/console-fe/src/pages/Login/Login.jsx
@ -5,6 +5,7 @@ import { withRouter } from 'react-router-dom';
 import './index.scss';
 import Header from '../../layouts/Header';
 import { request } from '../../globalLib';
+import PropTypes from 'prop-types';

 const FormItem = Form.Item;

@ -13,6 +14,11 @@ const FormItem = Form.Item;
 class Login extends React.Component {
  static displayName = 'Login';

+  static propTypes = {
+    locale: PropTypes.object,
+    history: PropTypes.object,
+  };
+
  constructor(props) {
    super(props);
    this.field = new Field(this);
@ -28,15 +34,14 @@ class Login extends React.Component {
        type: 'post',
        url: 'v1/auth/login',
        data: values,
-        success: res => {
-          if (res.code === 200) {
-            const data = res.data;
+        success: ({ code, data }) => {
+          if (code === 200) {
            // TODO: 封装一个方法存储、读取token
            localStorage.setItem('token', data);
            // TODO: 使用react router
            this.props.history.push('/');
          }
-          if (res.code === 401) {
+          if (code === 401) {
            Message.error({
              content: locale.invalidUsernameOrPassword,
            });
--- a/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js
+++ b/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js
@ -33,6 +33,7 @@ class EditServiceDialog extends React.Component {
      isCreate: false,
      editService: {},
      editServiceDialogVisible: false,
+      errors: { name: {}, protectThreshold: {}, healthCheckMode: {} },
    };
    this.show = this.show.bind(this);
  }
@ -52,10 +53,29 @@ class EditServiceDialog extends React.Component {
    this.setState({ editServiceDialogVisible: false });
  }

+  validator(field) {
+    const { locale = {} } = this.props;
+    const errors = Object.assign({}, this.state.errors);
+    const helpMap = {
+      name: locale.serviceNameRequired,
+      protectThreshold: locale.protectThresholdRequired,
+      healthCheckMode: locale.healthCheckModeRequired,
+    };
+    for (const key in field) {
+      if (!field[key]) {
+        errors[key] = { validateState: 'error', help: helpMap[key] };
+        this.setState({ errors });
+        return false;
+      }
+    }
+    return true;
+  }
+
  onConfirm() {
    const { isCreate } = this.state;
    const editService = Object.assign({}, this.state.editService);
    const { name, protectThreshold, healthCheckMode, metadataText, selector } = editService;
+    if (!this.validator({ name, protectThreshold, healthCheckMode })) return;
    request({
      method: isCreate ? 'POST' : 'PUT',
      url: 'v1/ns/service',
@ -86,7 +106,15 @@ class EditServiceDialog extends React.Component {
  }

  onChangeCluster(changeVal) {
+    const resetKey = ['name', 'protectThreshold', 'healthCheckMode'];
    const { editService = {} } = this.state;
+    const errors = Object.assign({}, this.state.errors);
+    resetKey.forEach(key => {
+      if (changeVal[key]) {
+        errors[key] = {};
+        this.setState({ errors });
+      }
+    });
    this.setState({
      editService: Object.assign({}, editService, changeVal),
    });
@ -99,7 +127,7 @@ class EditServiceDialog extends React.Component {

  render() {
    const { locale = {} } = this.props;
-    const { isCreate, editService, editServiceDialogVisible } = this.state;
+    const { isCreate, editService, editServiceDialogVisible, errors } = this.state;
    const {
      name,
      protectThreshold,
@ -118,20 +146,35 @@ class EditServiceDialog extends React.Component {
        onClose={() => this.hide()}
      >
        <Form {...DIALOG_FORM_LAYOUT}>
-          <Form.Item label={`${locale.serviceName}:`} {...formItemLayout} required>
+          <Form.Item
+            required={isCreate}
+            {...formItemLayout}
+            label={`${locale.serviceName}:`}
+            {...errors.name}
+          >
            {!isCreate ? (
              <p>{name}</p>
            ) : (
              <Input value={name} onChange={name => this.onChangeCluster({ name })} />
            )}
          </Form.Item>
-          <Form.Item label={`${locale.protectThreshold}:`} {...formItemLayout}>
+          <Form.Item
+            required
+            {...formItemLayout}
+            label={`${locale.protectThreshold}:`}
+            {...errors.protectThreshold}
+          >
            <Input
              value={protectThreshold}
              onChange={protectThreshold => this.onChangeCluster({ protectThreshold })}
            />
          </Form.Item>
-          <Form.Item label={`${locale.healthCheckPattern}:`} {...formItemLayout}>
+          <Form.Item
+            required
+            {...formItemLayout}
+            label={`${locale.healthCheckPattern}:`}
+            {...errors.healthCheckMode}
+          >
            <Select
              className="full-width"
              defaultValue={healthCheckMode}