refactor: clean code && Upgrade

console/src/main/resources/static/console-fe/.babelrc

@@ -1,9 +1,20 @@
 {
   "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      }
+    ],
     "react-app"
   ],
   "plugins": [
-    "transform-decorators-legacy",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
     [
       "babel-plugin-import",
       {

console/src/main/resources/static/console-fe/package.json

@@ -27,22 +27,21 @@
     "url": "git+https://github.com/alibaba/nacos.git"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
+    "@babel/cli": "^7.2.3",
-    "babel-core": "^6.26.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-decorators": "^7.2.3",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/runtime": "^7.2.0",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^7.1.5",
+    "babel-loader": "^8.0.4",
-    "babel-plugin-import": "^1.10.0",
+    "babel-plugin-import": "^1.11.0",
-    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-preset-react-app": "^6.1.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.5",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react-app": "^3.1.1",
-    "babel-runtime": "^6.23.0",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.6.0",
     "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
+    "css-loader": "^2.0.2",
-    "eslint": "^5.9.0",
+    "eslint": "^5.11.0",
-    "eslint-config-ali": "^4.0.0",
+    "eslint-config-ali": "^4.1.0",
     "eslint-config-prettier": "^3.3.0",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-import": "^2.14.0",
@@ -52,27 +51,27 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.1.4",
     "lint-staged": "^8.0.4",
-    "mini-css-extract-plugin": "^0.4.3",
+    "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.1.0",
+    "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "prettier": "1.15.2",
     "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.0",
+    "style-loader": "^0.23.1",
-    "uglifyjs-webpack-plugin": "^2.0.1",
+    "uglifyjs-webpack-plugin": "^2.1.0",
-    "url-loader": "^1.1.1",
+    "url-loader": "^1.1.2",
-    "webpack": "^4.20.2",
+    "webpack": "^4.28.2",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.9"
+    "webpack-dev-server": "^3.1.13"
   },
   "dependencies": {
-    "@alifd/next": "^1.9.19",
+    "@alifd/next": "^1.11.5",
     "axios": "^0.18.0",
     "jquery": "^3.3.1",
-    "moment": "^2.22.2",
+    "moment": "^2.23.0",
     "prop-types": "^15.6.2",
-    "react": "^16.6.0",
+    "react": "^16.7.0",
-    "react-dom": "^16.6.0",
+    "react-dom": "^16.7.0",
-    "react-redux": "^5.1.0",
+    "react-redux": "^5.1.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-router-redux": "^4.0.8",

console/src/main/resources/static/console-fe/src/components/DeleteDialog/DeleteDialog.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Button, ConfigProvider, Dialog, Grid, Icon } from '@alifd/next';
 
 import './index.scss';
@@ -22,6 +23,10 @@ const { Row, Col } = Grid;
 class DeleteDialog extends React.Component {
   static displayName = 'DeleteDialog';
 
+  static propTypes = {
+    locale: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -35,6 +40,10 @@ class DeleteDialog extends React.Component {
   }
 
   componentDidMount() {
+    this.initData();
+  }
+
+  initData() {
     const { locale = {} } = this.props;
     this.setState({ title: locale.confManagement });
   }

console/src/main/resources/static/console-fe/src/components/DiffEditorDialog/DiffEditorDialog.js

@@ -23,6 +23,10 @@ const { Row, Col } = Grid;
 class DiffEditorDialog extends React.Component {
   static displayName = 'DiffEditorDialog';
 
+  static propTypes = {
+    locale: PropTypes.object,
+  };
+
   static propTypes = {
     publishConfig: PropTypes.func,
   };

console/src/main/resources/static/console-fe/src/components/EditorNameSpace/EditorNameSpace.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { request } from '../../globalLib';
 import { Button, ConfigProvider, Dialog, Field, Form, Input, Loading } from '@alifd/next';
 
@@ -23,6 +24,11 @@ const FormItem = Form.Item;
 class EditorNameSpace extends React.Component {
   static displayName = 'EditorNameSpace';
 
+  static propTypes = {
+    getNameSpaces: PropTypes.func,
+    locale: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.state = {

console/src/main/resources/static/console-fe/src/components/NameSpaceList/NameSpaceList.js

@@ -26,6 +26,7 @@ class NameSpaceList extends React.Component {
   static displayName = 'NameSpaceList';
 
   static propTypes = {
+    locale: PropTypes.object,
     setNowNameSpace: PropTypes.func,
     namespaceCallBack: PropTypes.func,
     title: PropTypes.string,

console/src/main/resources/static/console-fe/src/components/NewNameSpace/NewNameSpace.js

@@ -16,6 +16,7 @@ import { request } from '../../globalLib';
 import { Button, ConfigProvider, Dialog, Field, Form, Input, Loading } from '@alifd/next';
 
 import './index.scss';
+import PropTypes from 'prop-types';
 
 const FormItem = Form.Item;
 
@@ -28,6 +29,11 @@ const formItemLayout = {
 class NewNameSpace extends React.Component {
   static displayName = 'NewNameSpace';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    getNameSpaces: PropTypes.func,
+  };
+
   constructor(props) {
     super(props);
     this.state = {

console/src/main/resources/static/console-fe/src/components/RegionGroup/RegionGroup.js

@@ -77,7 +77,10 @@ class RegionGroup extends React.Component {
     //     this.setRegionWidth();
     //     this.handleRegionListStatus();
     // });
-    this.nameSpaceList.current.getInstance().getNameSpaces();
+    const nameSpaceList = this.nameSpaceList.current;
+    if (nameSpaceList) {
+      nameSpaceList.getInstance().getNameSpaces();
+    }
   }
 
   componentWillUnmount() {
@@ -152,7 +155,10 @@ class RegionGroup extends React.Component {
       this.handleRegionList(window._regionList);
     } else {
       // TODO
-      this.nameSpaceList.current.getInstance().getNameSpaces();
+      const nameSpaceList = this.nameSpaceList.current;
+      if (nameSpaceList) {
+        nameSpaceList.getInstance().getNameSpaces();
+      }
 
       request({
         url: this.state.url,
@@ -189,7 +195,10 @@ class RegionGroup extends React.Component {
     setTimeout(() => {
       this.changeRegionBarRegionId(this.currRegionId);
     }, 1000);
-    this.nameSpaceList.current.getInstance().getNameSpaces();
+    const nameSpaceList = this.nameSpaceList.current;
+    if (nameSpaceList) {
+      nameSpaceList.getInstance().getNameSpaces();
+    }
     this.setState({
       currRegionId: envcontent,
       instanceData,

console/src/main/resources/static/console-fe/src/components/ShowCodeing/ShowCodeing.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { getParams } from '../../globalLib';
 import { ConfigProvider, Dialog, Loading, Tab } from '@alifd/next';
 
@@ -23,6 +24,10 @@ const TabPane = Tab.Item;
 class ShowCodeing extends React.Component {
   static displayName = 'ShowCodeing';
 
+  static propTypes = {
+    locale: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.state = {

console/src/main/resources/static/console-fe/src/components/SuccessDialog/SuccessDialog.js

@@ -24,6 +24,7 @@ class SuccessDialog extends React.Component {
   static displayName = 'SuccessDialog';
 
   static propTypes = {
+    locale: PropTypes.object,
     unpushtrace: PropTypes.bool,
   };
 
@@ -41,6 +42,10 @@ class SuccessDialog extends React.Component {
   }
 
   componentDidMount() {
+    this.initData();
+  }
+
+  initData() {
     const { locale = {} } = this.props;
     this.setState({ title: locale.title });
   }

console/src/main/resources/static/console-fe/src/constants.js

@@ -16,3 +16,5 @@ export const LANGUAGE_SWITCH = 'LANGUAGE_SWITCH';
 
 // TODO: 后端暂时没有统一成功失败标记
 // export const SUCCESS_RESULT_CODE = 'SUCCESS';
+
+export const REDUX_DEVTOOLS = '__REDUX_DEVTOOLS_EXTENSION__';

console/src/main/resources/static/console-fe/src/index.js

@@ -27,7 +27,7 @@ import _menu from './menu';
 
 import Layout from './layouts/MainLayout';
 import CookieHelp from './utils/cookie';
-import { LANGUAGE_KEY } from './constants';
+import { LANGUAGE_KEY, REDUX_DEVTOOLS } from './constants';
 
 import Namespace from './pages/NameSpace';
 import Newconfig from './pages/ConfigurationManagement/NewConfig';
@@ -46,11 +46,12 @@ import reducers from './reducers';
 import { changeLanguage } from './reducers/locale';
 
 import './index.scss';
+import PropTypes from 'prop-types';
 
 module.hot && module.hot.accept();
 
-if (!CookieHelp.getValue(LANGUAGE_KEY)) {
+if (!localStorage.getItem(LANGUAGE_KEY)) {
-  CookieHelp.setValue(LANGUAGE_KEY, navigator.language === 'zh-CN' ? 'zh-cn' : 'en-us');
+  localStorage.setItem(LANGUAGE_KEY, navigator.language === 'zh-CN' ? 'zh-CN' : 'en-US');
 }
 
 const reducer = combineReducers({
@@ -62,15 +63,36 @@ const store = createStore(
   reducer,
   compose(
     applyMiddleware(thunk),
-    window.devToolsExtension ? window.devToolsExtension() : f => f
+    window[REDUX_DEVTOOLS] ? window[REDUX_DEVTOOLS]() : f => f
   )
 );
 
+const MENU = [
+  { path: '/', exact: true, render: () => <Redirect to="/configurationManagement" /> },
+  { path: '/namespace', component: Namespace },
+  { path: '/newconfig', component: Newconfig },
+  { path: '/configsync', component: Configsync },
+  { path: '/configdetail', component: Configdetail },
+  { path: '/configeditor', component: Configeditor },
+  { path: '/historyDetail', component: HistoryDetail },
+  { path: '/configRollback', component: ConfigRollback },
+  { path: '/historyRollback', component: HistoryRollback },
+  { path: '/listeningToQuery', component: ListeningToQuery },
+  { path: '/configurationManagement', component: ConfigurationManagement },
+  { path: '/serviceManagement', component: ServiceList },
+  { path: '/serviceDetail', component: ServiceDetail },
+];
+
 @connect(
   state => ({ ...state.locale }),
   { changeLanguage }
 )
 class App extends React.Component {
+  static propTypes = {
+    locale: PropTypes.object,
+    changeLanguage: PropTypes.func,
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -81,28 +103,18 @@ class App extends React.Component {
   }
 
   componentDidMount() {
-    const language = CookieHelp.getValue(LANGUAGE_KEY);
+    const language = localStorage.getItem(LANGUAGE_KEY);
     this.props.changeLanguage(language);
   }
 
-  static generateRouter() {
+  get router() {
     return (
       <HashRouter>
         <Layout navList={_menu.data}>
           <Switch>
-            <Route path="/" exact render={() => <Redirect to="/configurationManagement" />} />
+            {MENU.map(item => (
-            <Route path="/namespace" component={Namespace} />
+              <Route key={item.path} {...item} />
-            <Route path="/newconfig" component={Newconfig} />
+            ))}
-            <Route path="/configsync" component={Configsync} />
-            <Route path="/configdetail" component={Configdetail} />
-            <Route path="/configeditor" component={Configeditor} />
-            <Route path="/historyDetail" component={HistoryDetail} />
-            <Route path="/configRollback" component={ConfigRollback} />
-            <Route path="/historyRollback" component={HistoryRollback} />
-            <Route path="/listeningToQuery" component={ListeningToQuery} />
-            <Route path="/configurationManagement" component={ConfigurationManagement} />
-            <Route path="/serviceManagement" component={ServiceList} />
-            <Route path="/serviceDetail" component={ServiceDetail} />
           </Switch>
         </Layout>
       </HashRouter>
@@ -120,7 +132,7 @@ class App extends React.Component {
         fullScreen
         {...this.state.nacosLoading}
       >
-        <ConfigProvider locale={locale}>{App.generateRouter()}</ConfigProvider>
+        <ConfigProvider locale={locale}>{this.router}</ConfigProvider>
       </Loading>
     );
   }

console/src/main/resources/static/console-fe/src/layouts/Header.js

@@ -12,11 +12,11 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { ConfigProvider } from '@alifd/next';
 import siteConfig from '../config';
 import { changeLanguage } from '@/reducers/locale';
-import { aliwareIntl } from '@/globalLib';
 
 import './index.scss';
 
@@ -28,45 +28,36 @@ import './index.scss';
 class Header extends React.Component {
   static displayName = 'Header';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    language: PropTypes.string,
+    changeLanguage: PropTypes.func,
+  };
+
   switchLang = () => {
-    const { language = 'en-us', changeLanguage } = this.props;
+    const { language = 'en-US', changeLanguage } = this.props;
-    const currentLanguage = language === 'en-us' ? 'zh-cn' : 'en-us';
+    const currentLanguage = language === 'en-US' ? 'zh-CN' : 'en-US';
     changeLanguage(currentLanguage);
-    aliwareIntl.changeLanguage(currentLanguage);
-    document.cookie = `docsite_language=${currentLanguage}`;
-    window.location.reload();
   };
 
   render() {
-    const { locale = {}, language = 'en-us' } = this.props;
+    const { locale = {}, language = 'en-US' } = this.props;
     const { home, docs, blog, community, languageSwitchButton } = locale;
-    const BASE_URL = `https://nacos.io/${language}/`;
+    const BASE_URL = `https://nacos.io/${language.toLocaleLowerCase()}/`;
     const NAV_MENU = [
-      {
+      { id: 1, title: home, link: BASE_URL },
-        id: 1,
+      { id: 2, title: docs, link: `${BASE_URL}docs/what-is-nacos.html` },
-        title: home,
+      { id: 3, title: blog, link: `${BASE_URL}blog/index.html` },
-        link: BASE_URL,
+      { id: 4, title: community, link: `${BASE_URL}community/index.html` },
-      },
-      {
-        id: 2,
-        title: docs,
-        link: `${BASE_URL}docs/what-is-nacos.html`,
-      },
-      {
-        id: 3,
-        title: blog,
-        link: `${BASE_URL}blog/index.html`,
-      },
-      {
-        id: 4,
-        title: community,
-        link: `${BASE_URL}community/index.html`,
-      },
     ];
     return (
       <header className="header-container header-container-primary">
         <div className="header-body">
-          <a href="https://nacos.io/zh-cn/" target="_blank" rel="noopener noreferrer">
+          <a
+            href={`https://nacos.io/${language.toLocaleLowerCase()}/`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <img
               src="img/TB118jPv_mWBKNjSZFBXXXxUFXa-2000-390.svg"
               className="logo"

console/src/main/resources/static/console-fe/src/layouts/MainLayout.js

@@ -29,6 +29,7 @@ class MainLayout extends React.Component {
   static propTypes = {
     navList: PropTypes.array,
     history: PropTypes.object,
+    locale: PropTypes.object,
     children: PropTypes.any,
   };
 

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js

@@ -16,6 +16,7 @@ import { Button, ConfigProvider, Dialog, Field, Form, Input, Loading, Tab } from
 import { getParams, request } from '../../../globalLib';
 
 import './index.scss';
+import PropTypes from 'prop-types';
 
 const TabPane = Tab.Item;
 const FormItem = Form.Item;
@@ -24,6 +25,11 @@ const FormItem = Form.Item;
 class ConfigDetail extends React.Component {
   static displayName = 'ConfigDetail';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    history: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -48,13 +54,17 @@ class ConfigDetail extends React.Component {
   }
 
   componentDidMount() {
+    this.initData();
+    this.getDataDetail();
+  }
+
+  initData() {
     const { locale = {} } = this.props;
     if (this.dataId.startsWith('cipher-')) {
       this.setState({
         switchEncrypt: true,
       });
     }
-    this.getDataDetail();
     this.setState({ tag: [{ title: locale.official, key: 'normal' }] });
   }
 

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigEditor/ConfigEditor.js

@@ -11,8 +11,9 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import $ from 'jquery';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { getParams, request } from '../../../globalLib';
 import DiffEditorDialog from '../../../components/DiffEditorDialog';
 import SuccessDialog from '../../../components/SuccessDialog';
@@ -43,6 +44,11 @@ const { Group: RadioGroup } = Radio;
 class ConfigEditor extends React.Component {
   static displayName = 'ConfigEditor';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    history: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.diffEditorDialog = React.createRef();
@@ -81,6 +87,13 @@ class ConfigEditor extends React.Component {
   }
 
   componentDidMount() {
+    this.initData();
+    this.betaips = document.getElementById('betaips');
+    this.getDataDetail();
+    this.chontenttab = document.getElementById('chontenttab'); // diff标签
+  }
+
+  initData() {
     const { locale = {} } = this.props;
     this.setState({
       tag: [
@@ -91,13 +104,8 @@ class ConfigEditor extends React.Component {
       ],
     });
     if (this.dataId.startsWith('cipher-')) {
-      this.setState({
+      this.setState({ switchEncrypt: true });
-        switchEncrypt: true,
-      });
     }
-    this.betaips = document.getElementById('betaips');
-    this.getDataDetail();
-    this.chontenttab = document.getElementById('chontenttab'); // diff标签
   }
 
   initMoacoEditor(language, value) {

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigRollback/ConfigRollback.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { getParams, request } from '../../../globalLib';
 import { Button, ConfigProvider, Dialog, Field, Form, Input } from '@alifd/next';
 
@@ -38,6 +39,11 @@ class ConfigRollback extends React.Component {
     // this.params = window.location.hash.split('?')[1]||'';
   }
 
+  static propTypes = {
+    history: PropTypes.object,
+    locale: PropTypes.object,
+  };
+
   componentDidMount() {
     const { locale = {} } = this.props;
     this.typeMap = {

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigSync/ConfigSync.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Button, Checkbox, ConfigProvider, Dialog, Field, Form, Input, Loading } from '@alifd/next';
 import SuccessDialog from '../../../components/SuccessDialog';
 import { getParams, request } from '../../../globalLib';
@@ -22,6 +23,11 @@ import './index.scss';
 class ConfigSync extends React.Component {
   static displayName = 'ConfigSync';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    history: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.successDialog = React.createRef();

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js

@@ -38,6 +38,7 @@ import DashboardCard from './DashboardCard';
 import { getParams, setParams, request, aliwareIntl } from '@/globalLib';
 
 import './index.scss';
+import { LANGUAGE_KEY } from '../../../constants';
 
 const { Panel } = Collapse;
 
@@ -46,6 +47,7 @@ class ConfigurationManagement extends React.Component {
   static displayName = 'ConfigurationManagement';
 
   static propTypes = {
+    locale: PropTypes.object,
     history: PropTypes.object,
   };
 
@@ -107,16 +109,7 @@ class ConfigurationManagement extends React.Component {
   componentDidMount() {
     const { locale = {} } = this.props;
     // this.getGroup();
-    if (aliwareIntl.currentLanguageCode === 'zh-cn') {
+    this.setIsCn();
-      // this.getContentList(); //在中文站获取概览页
-      this.setState({
-        isCn: true,
-      });
-    } else {
-      this.setState({
-        isCn: false,
-      });
-    }
     if (window._getLink && window._getLink('isCn') === 'true') {
       if (!this.checkQuestionnaire()) {
         if (window.location.host === 'acm.console.aliyun.com') {
@@ -145,6 +138,10 @@ class ConfigurationManagement extends React.Component {
     }
   }
 
+  setIsCn() {
+    this.setState({ isCn: localStorage.getItem(LANGUAGE_KEY) === 'zh-CN' });
+  }
+
   /**
    * 获取概览页数据
    */
@@ -726,7 +723,7 @@ class ConfigurationManagement extends React.Component {
                     {this.state.nownamespace_id}
                   </span>
                   {locale.queryResults}
-                  <strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
+                  <strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
                   {locale.articleMeetRequirements}
                 </h3>
                 <div

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigurationManagement/DashboardCard.js

@@ -12,12 +12,19 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { ConfigProvider, Slider } from '@alifd/next';
 
 @ConfigProvider.config
 class DashboardCard extends React.Component {
   static displayName = 'DashboardCard';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    data: PropTypes.object,
+    height: PropTypes.number,
+  };
+
   render() {
     const { data = {}, height, locale = {} } = this.props;
     return (

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/HistoryDetail/HistoryDetail.js

@@ -23,6 +23,7 @@ class HistoryDetail extends React.Component {
   static displayName = 'HistoryDetail';
 
   static propTypes = {
+    locale: PropTypes.object,
     history: PropTypes.object,
   };
 

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { ConfigProvider, Field, Form, Input, Loading, Pagination, Table } from '@alifd/next';
 import RegionGroup from 'components/RegionGroup';
 import { getParams, setParams, request, aliwareIntl } from '@/globalLib';
@@ -22,6 +23,11 @@ import './index.scss';
 class HistoryRollback extends React.Component {
   static displayName = 'HistoryRollback';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    history: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
 

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ListeningToQuery/ListeningToQuery.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import RegionGroup from '../../../components/RegionGroup';
 import { getParams, request } from '../../../globalLib';
 import {
@@ -35,6 +36,10 @@ const { Row, Col } = Grid;
 class ListeningToQuery extends React.Component {
   static displayName = 'ListeningToQuery';
 
+  static propTypes = {
+    locale: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.state = {

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/NewConfig/NewConfig.js

@@ -11,8 +11,9 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import $ from 'jquery';
+import React from 'react';
+import PropTypes from 'prop-types';
 import SuccessDialog from '../../../components/SuccessDialog';
 import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
 import {
@@ -41,6 +42,11 @@ const { AutoComplete: Combobox } = Select;
 class NewConfig extends React.Component {
   static displayName = 'NewConfig';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    history: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.successDialog = React.createRef();

console/src/main/resources/static/console-fe/src/pages/NameSpace/NameSpace.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Button, ConfigProvider, Dialog, Loading, Table } from '@alifd/next';
 import RegionGroup from '../../components/RegionGroup';
 import NewNameSpace from '../../components/NewNameSpace';
@@ -24,6 +25,10 @@ import './index.scss';
 class NameSpace extends React.Component {
   static displayName = 'NameSpace';
 
+  static propTypes = {
+    locale: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.editgroup = React.createRef();

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditClusterDialog.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { request } from '../../../globalLib';
 import { Dialog, Form, Input, Switch, Select, Message, ConfigProvider } from '@alifd/next';
 import { DIALOG_FORM_LAYOUT } from './constant';
@@ -20,6 +21,13 @@ import { DIALOG_FORM_LAYOUT } from './constant';
 class EditClusterDialog extends React.Component {
   static displayName = 'EditClusterDialog';
 
+  static propTypes = {
+    openLoading: PropTypes.func,
+    closeLoading: PropTypes.func,
+    getServiceDetail: PropTypes.func,
+    locale: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.state = {

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditInstanceDialog.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { request } from '../../../globalLib';
 import { Dialog, Form, Input, Switch, Message, ConfigProvider } from '@alifd/next';
 import { DIALOG_FORM_LAYOUT } from './constant';
@@ -20,6 +21,15 @@ import { DIALOG_FORM_LAYOUT } from './constant';
 class EditInstanceDialog extends React.Component {
   static displayName = 'EditInstanceDialog';
 
+  static propTypes = {
+    serviceName: PropTypes.string,
+    clusterName: PropTypes.string,
+    openLoading: PropTypes.string,
+    closeLoading: PropTypes.string,
+    getInstanceList: PropTypes.func,
+    locale: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.state = {

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { request } from '../../../globalLib';
 import { Dialog, Form, Input, Select, Message, ConfigProvider } from '@alifd/next';
 import { DIALOG_FORM_LAYOUT } from './constant';
@@ -20,6 +21,12 @@ import { DIALOG_FORM_LAYOUT } from './constant';
 class EditServiceDialog extends React.Component {
   static displayName = 'EditServiceDialog';
 
+  static propTypes = {
+    queryServiceList: PropTypes.func,
+    getServiceDetail: PropTypes.func,
+    locale: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -85,12 +92,10 @@ class EditServiceDialog extends React.Component {
     });
   }
 
-  getFormItemLayout = () => {
+  getFormItemLayout = () => ({
-    return {
     labelCol: { span: 6 },
     wrapperCol: { span: 14 },
-    };
+  });
-  };
 
   render() {
     const { locale = {} } = this.props;

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/InstanceTable.js

@@ -23,6 +23,7 @@ class InstanceTable extends React.Component {
   static displayName = 'InstanceTable';
 
   static propTypes = {
+    locale: PropTypes.object,
     clusterName: PropTypes.string,
     serviceName: PropTypes.string,
   };

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { request } from '@/globalLib';
 import { Button, Card, ConfigProvider, Form, Loading } from '@alifd/next';
 import EditServiceDialog from './EditServiceDialog';
@@ -30,6 +31,12 @@ const pageFormLayout = {
 class ServiceDetail extends React.Component {
   static displayName = 'ServiceDetail';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    history: PropTypes.object,
+    location: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.editServiceDialog = React.createRef();

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceList/ServiceList.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   Button,
   Field,
@@ -39,6 +40,11 @@ const { Column } = Table;
 class ServiceList extends React.Component {
   static displayName = 'ServiceList';
 
+  static propTypes = {
+    locale: PropTypes.object,
+    history: PropTypes.object,
+  };
+
   constructor(props) {
     super(props);
     this.editServiceDialog = React.createRef();

console/src/main/resources/static/console-fe/src/reducers/locale.js

@@ -26,9 +26,9 @@ const initialState = {
 };
 
 const changeLanguage = lang => dispatch => {
-  const language = lang === 'zh-cn' ? 'zh-cn' : 'en-us';
+  const language = lang === 'zh-CN' ? 'zh-CN' : 'en-US';
-  CookieHelp.setValue(LANGUAGE_KEY, language);
+  localStorage.setItem(LANGUAGE_KEY, language);
-  dispatch({ type: LANGUAGE_SWITCH, language, locale: language === 'zh-cn' ? zhCN : enUS });
+  dispatch({ type: LANGUAGE_SWITCH, language, locale: language === 'zh-CN' ? zhCN : enUS });
 };
 
 export default (state = initialState, action) => {