feature: console integration saga-statemachine-designer (#5357)

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

@@ -30,6 +30,7 @@
     "generator-star-spacing": "off",
     "wrap-iife": "off",
     "arrow-parens": "off",
-    "indent": "off"
+    "indent": "off",
+    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }]
   }
 }

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

@@ -13,4 +13,5 @@ npm-debug.log*
 # test
 test/uirecorder.log
 test/reports
-test/screenshots/*
+test/screenshots/*
+/public/saga-statemachine-designer/

console/src/main/resources/static/console-fe/build/copyDesigner.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright 1999-2019 Seata.io Group.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const childProcess = require('child_process')
+
+const mkdir = dir => {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir);
+  }
+};
+
+// copy seata-saga-statemachine-designer to console
+const designerDir = path.join(__dirname, '../../../../../../../saga/seata-saga-statemachine-designer');
+if (!fs.existsSync(path.join(designerDir, "dist"))) {
+  // if seata-saga-statemachine-designer not build, build this
+  childProcess.execSync('cd ' + designerDir + '&& npm install && npm run build')
+}
+
+// copy file
+const designerDestDir = path.join(__dirname,'../public/saga-statemachine-designer');
+const designerHtmlFileName = path.join(designerDestDir, 'designer.html');
+const designerBundleFileName = path.join(designerDestDir, 'dist/bundle.js');
+
+mkdir(path.dirname(designerHtmlFileName));
+mkdir(path.dirname(designerBundleFileName));
+
+fs.createReadStream(path.join(designerDir, 'index.html'))
+.pipe(
+  fs.createWriteStream(designerHtmlFileName)
+  );
+
+fs.createReadStream(path.join(designerDir, 'dist/bundle.js'))
+.pipe(
+  fs.createWriteStream(designerBundleFileName)
+  );

console/src/main/resources/static/console-fe/build/copyFile.js

@@ -42,4 +42,23 @@ copyList.forEach(_fileName => {
     const readStream = fs.createReadStream(srcFileName);
     const writeStream = fs.createWriteStream(destFileName);
     readStream.pipe(writeStream);
-});
+});
+
+// copy seata-saga-statemachine-designer from console-fe/public to console resource folder
+const designerDir = path.join(__dirname, '../public/saga-statemachine-designer');
+const designerDestDir = path.join(destDir, 'saga-statemachine-designer');
+const designerHtmlFileName = path.join(designerDestDir, 'designer.html');
+const designerBundleFileName = path.join(designerDestDir, 'dist/bundle.js');
+
+mkdir(path.dirname(designerHtmlFileName));
+mkdir(path.dirname(designerBundleFileName));
+
+fs.createReadStream(path.join(designerDir, 'designer.html'))
+.pipe(
+  fs.createWriteStream(designerHtmlFileName)
+  );
+
+fs.createReadStream(path.join(designerDir, 'dist/bundle.js'))
+.pipe(
+  fs.createWriteStream(designerBundleFileName)
+  );

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

@@ -4,8 +4,8 @@
   "description": "console fe",
   "main": "index.js",
   "scripts": {
-    "start": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",
-    "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js && node build/copyFile.js",
+    "start": "node build/copyDesigner.js && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",
+    "build": "node build/copyDesigner.js && cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js && node build/copyFile.js",
     "eslint": "eslint --ext .js src/",
     "eslint-fix": "eslint  --ext .js --fix src/"
   },

console/src/main/resources/static/console-fe/src/app.tsx

@@ -19,13 +19,14 @@ import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 import { Router, Route, Switch, Redirect, RouteComponentProps } from 'react-router-dom';
 import { ConfigProvider, Loading } from '@alicloud/console-components';
-import { createHashHistory, History } from "history";
+import { createHashHistory, History } from 'history';
 import CCConsoleMenu from '@alicloud/console-components-console-menu';
 import { GlobalStateModel } from '@/reducers';
 import { changeLanguage, LocaleStateModel, getCurrentLanguage } from '@/reducers/locale';
 import Layout from '@/layout';
 import Login from '@/pages/Login';
 import router from '@/router';
+import Iframe from './components/Iframe';
 
 export const history: History = createHashHistory();
 (window as any).globalHistory = history;
@@ -35,100 +36,109 @@ export type OwnProps = any;
 export type StateToPropsType = LocaleStateModel;
 
 export type DispathToPropsType = {
-    changeLanguage: (lang: string) => void
+  changeLanguage: (lang: string) => void;
 };
 
 export type AppPropsType = StateToPropsType & DispathToPropsType & RouteComponentProps & OwnProps;
 
 export type AppStateType = {
-    loading: object;
-}
+  loading: object;
+};
 
 class App extends React.Component<AppPropsType, AppStateType> {
-    static propTypes = {
-        locale: PropTypes.object,
-        changeLanguage: PropTypes.func,
-    };
-
-    state: AppStateType = {
-        loading: {},
+  static propTypes = {
+    locale: PropTypes.object,
+    changeLanguage: PropTypes.func,
+  };
+
+  state: AppStateType = {
+    loading: {},
+  };
+
+  constructor(props: AppPropsType) {
+    super(props);
+  }
+
+  componentDidMount() {
+    console.log('this.props: ', this.props, history);
+    const language: string = getCurrentLanguage();
+    this.props.changeLanguage(language);
+  }
+
+  get menu() {
+    const { locale }: AppPropsType = this.props;
+    const { MenuRouter = {} } = locale;
+    const { overview, transactionInfo, globalLockInfo, sagaStatemachineDesigner } = MenuRouter;
+    return {
+      items: [
+        // {
+        //     key: '/Overview',
+        //     label: overview,
+        // },
+        {
+          key: '/transaction/list',
+          label: transactionInfo,
+        },
+        {
+          key: '/globallock/list',
+          label: globalLockInfo,
+        },
+        {
+          key: '/sagastatemachinedesigner',
+          label: sagaStatemachineDesigner,
+        },
+      ],
+      header: 'Seata',
+      onItemClick: (key: string) => history.push(key),
     };
-
-    constructor(props: AppPropsType) {
-        super(props);
-    }
-
-    componentDidMount() {
-        console.log('this.props: ', this.props, history);
-        const language: string = getCurrentLanguage();
-        this.props.changeLanguage(language);
-    }
-
-    get menu() {
-        const { locale }: AppPropsType = this.props;
-        const { MenuRouter = {} } = locale;
-        const { overview,transactionInfo,globalLockInfo } = MenuRouter;
-        return {
-            items: [
-                // {
-                //     key: '/Overview',
-                //     label: overview,
-                // },
-                {
-                    key: '/TransactionInfo',
-                    label: transactionInfo,
-                },
-                {
-                    key:'/GlobalLockInfo',
-                    label: globalLockInfo,
-                }
-            ],
-            header: 'Seata',
-            onItemClick: (key: string) => history.push(key)
-        }
-    }
-
-    get router() {
-        return (
-            <Router history={history}>
-                <Switch>
-                    <Route path="/login" component={Login} />
-                    <Layout nav={({ location }: any) => <CCConsoleMenu  {...this.menu} activeKey={location.pathname} />}>
-                        <Route path={'/'} exact render={() => <Redirect to="/TransactionInfo" />} />
-                        {router.map(item => (
-                            <Route key={item.path} {...item} />
-                        ))}
-                    </Layout>
-                </Switch>
-            </Router>
-        );
-    }
-
-    render() {
-        const { locale } = this.props;
-        const { loading } = this.state;
-        return (
-            <Loading
-                tip="loading..."
-                visible={false}
-                fullScreen
-                {...loading}
-            >
-                <ConfigProvider locale={locale}>
-                    {this.router}
-                </ConfigProvider>
-            </Loading>
-        );
-    }
+  }
+
+  get router() {
+    return (
+      <Router history={history}>
+        <Switch>
+          <Route path="/login" component={Login} />
+          <Layout
+            nav={({ location }: any) => (
+              <CCConsoleMenu {...this.menu} activeKey={location.pathname} />
+            )}
+          >
+            <Route path={'/'} exact render={() => <Redirect to="/transaction/list" />} />
+            <Route
+              path={'/sagastatemachinedesigner'}
+              render={() => (
+                <Iframe title={'Seata'} src={'./saga-statemachine-designer/designer.html'} />
+              )}
+            />
+            {router.map(item => (
+              <Route key={item.path} {...item} />
+            ))}
+          </Layout>
+        </Switch>
+      </Router>
+    );
+  }
+
+  render() {
+    const { locale } = this.props;
+    const { loading } = this.state;
+    return (
+      <Loading tip="loading..." visible={false} fullScreen {...loading}>
+        <ConfigProvider locale={locale}>{this.router}</ConfigProvider>
+      </Loading>
+    );
+  }
 }
 
-
 const mapStateToProps = (state: GlobalStateModel, ownProps: OwnProps): StateToPropsType => ({
-    ...state.locale
+  ...state.locale,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch): DispathToPropsType => ({
-    changeLanguage: (lang) => (changeLanguage(lang)(dispatch))
+  changeLanguage: lang => changeLanguage(lang)(dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(App as any);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(App as any);