From 73c98d35416bbbaec7af6ea5fcc40fcfab323d78 Mon Sep 17 00:00:00 2001
From: LoadChange <soocto@gmail.com>
Date: Fri, 18 Jan 2019 23:46:41 +0800
Subject: [PATCH] fix: closes #640, #648

---
 .../console-fe/public/css/bootstrap.css       |  3 +-
 .../static/console-fe/public/index.html       |  1 +
 .../resources/static/console-fe/src/index.js  |  1 -
 .../static/console-fe/src/layouts/Header.js   |  3 +-
 .../console-fe/src/layouts/MainLayout.js      | 10 +++-
 .../static/console-fe/src/locales/en-US.js    |  3 ++
 .../static/console-fe/src/locales/zh-CN.js    |  3 ++
 .../NewConfig/NewConfig.js                    |  5 +-
 .../console-fe/src/pages/Login/Login.jsx      | 13 +++--
 .../ServiceDetail/EditServiceDialog.js        | 51 +++++++++++++++++--
 10 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/console/src/main/resources/static/console-fe/public/css/bootstrap.css b/console/src/main/resources/static/console-fe/public/css/bootstrap.css
index 3bcd6346c..ce3ef2335 100644
--- 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;
   }
-}
\ No newline at end of file
+}
diff --git a/console/src/main/resources/static/console-fe/public/index.html b/console/src/main/resources/static/console-fe/public/index.html
index bbad4d378..5d4dbe01b 100644
--- 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">
diff --git a/console/src/main/resources/static/console-fe/src/index.js b/console/src/main/resources/static/console-fe/src/index.js
index a4fd3c65e..2fd1f9988 100644
--- 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} />
diff --git a/console/src/main/resources/static/console-fe/src/layouts/Header.js b/console/src/main/resources/static/console-fe/src/layouts/Header.js
index 17ac95ec5..371d5f866 100644
--- 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 '';
diff --git a/console/src/main/resources/static/console-fe/src/layouts/MainLayout.js b/console/src/main/resources/static/console-fe/src/layouts/MainLayout.js
index e2b88c34c..4209056b4 100644
--- 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%' }}
diff --git 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
index 06ca47364..b9a67db23 100644
--- 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',
diff --git 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
index 71bfda2f7..0dbc8b2b6 100644
--- 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: '操作',
diff --git 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
index 5c9077053..7354e985e 100644
--- 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>
diff --git 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
index 53fdfa3a4..307a558ec 100644
--- 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,
             });
diff --git 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
index 2b9f6e785..195a9e507 100644
--- 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}