refactor: clean code && Upgrade

jangocheng · Jan 10, 2019 · 829f538 · 829f538
1 parent 8fdbf68
commit 829f538
Show file tree

Hide file tree

Showing 35 changed files with 8,691 additions and 116 deletions.
diff --git a/console/src/main/resources/static/console-fe/.babelrc b/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",
       {

diff --git a/console/src/main/resources/static/console-fe/package.json b/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-core": "^6.26.3",
+    "@babel/cli": "^7.2.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-plugin-import": "^1.10.0",
-    "babel-plugin-transform-decorators": "^6.24.1",
-    "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",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-import": "^1.11.0",
+    "babel-preset-react-app": "^6.1.0",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.6.0",
     "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
-    "eslint": "^5.9.0",
-    "eslint-config-ali": "^4.0.0",
+    "css-loader": "^2.0.2",
+    "eslint": "^5.11.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",
-    "node-sass": "^4.1.0",
+    "mini-css-extract-plugin": "^0.5.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",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "url-loader": "^1.1.1",
-    "webpack": "^4.20.2",
+    "style-loader": "^0.23.1",
+    "uglifyjs-webpack-plugin": "^2.1.0",
+    "url-loader": "^1.1.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-dom": "^16.6.0",
-    "react-redux": "^5.1.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-redux": "^5.1.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-router-redux": "^4.0.8",

diff --git a/console/src/main/resources/static/console-fe/src/components/DeleteDialog/DeleteDialog.js b/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 });
   }

diff --git a/.../src/main/resources/static/console-fe/src/components/DiffEditorDialog/DiffEditorDialog.js b/.../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,
   };

diff --git a/...le/src/main/resources/static/console-fe/src/components/EditorNameSpace/EditorNameSpace.js b/...le/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 = {

diff --git a/console/src/main/resources/static/console-fe/src/components/NameSpaceList/NameSpaceList.js b/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,

diff --git a/console/src/main/resources/static/console-fe/src/components/NewNameSpace/NewNameSpace.js b/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 = {

diff --git a/console/src/main/resources/static/console-fe/src/components/RegionGroup/RegionGroup.js b/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,

diff --git a/console/src/main/resources/static/console-fe/src/components/ShowCodeing/ShowCodeing.js b/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 = {

diff --git a/console/src/main/resources/static/console-fe/src/components/SuccessDialog/SuccessDialog.js b/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 });
   }

diff --git a/console/src/main/resources/static/console-fe/src/constants.js b/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__';
diff --git a/console/src/main/resources/static/console-fe/src/index.js b/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)) {
-  CookieHelp.setValue(LANGUAGE_KEY, navigator.language === 'zh-CN' ? 'zh-cn' : 'en-us');
+if (!localStorage.getItem(LANGUAGE_KEY)) {
+  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" />} />
-            <Route path="/namespace" component={Namespace} />
-            <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} />
+            {MENU.map(item => (
+              <Route key={item.path} {...item} />
+            ))}
           </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>
     );
   }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,3 +16,5 @@ export const LANGUAGE_SWITCH = 'LANGUAGE_SWITCH';

		// TODO: 后端暂时没有统一成功失败标记
		// export const SUCCESS_RESULT_CODE = 'SUCCESS';

		export const REDUX_DEVTOOLS = '__REDUX_DEVTOOLS_EXTENSION__';