Rebuild the dashboard with umi/max v4 and antd pro

src/dashboard2/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: require.resolve('@umijs/max/eslint'),
+};

src/dashboard2/.gitignore

@@ -0,0 +1,14 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.umi
+/.umi-production
+/.umi-test
+/dist
+/.mfsu
+.swc
+.turbopack

src/dashboard2/.lintstagedrc

@@ -0,0 +1,17 @@
+{
+  "*.{md,json}": [
+    "prettier --cache --write"
+  ],
+  "*.{js,jsx}": [
+    "max lint --fix --eslint-only",
+    "prettier --cache --write"
+  ],
+  "*.{css,less}": [
+    "max lint --fix --stylelint-only",
+    "prettier --cache --write"
+  ],
+  "*.ts?(x)": [
+    "max lint --fix --eslint-only",
+    "prettier --cache --parser=typescript --write"
+  ]
+}

src/dashboard2/.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.com/
+

src/dashboard2/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+.umi
+.umi-production

src/dashboard2/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
+}

src/dashboard2/.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: require.resolve('@umijs/max/stylelint'),
+};

src/dashboard2/.umirc.ts

@@ -0,0 +1,71 @@
+import { defineConfig } from '@umijs/max';
+
+export default defineConfig({
+  antd: {},
+  access: {},
+  model: {},
+  initialState: {},
+  request: {},
+  locale: {
+    default: 'en-US',
+    antd: true,
+    baseNavigator: true,
+  },
+  layout: {
+    title: 'Hyperledger Cello',
+  },
+  favicons: [
+    '/favicon.png'
+  ],
+  routes: [
+    {
+      name: 'login',
+      path: '/login',
+      component: './Login',
+      headerRender: false,
+      menuRender: false,
+      hideInMenu: true,
+    },
+    {
+      name: 'home',
+      path: '/',
+      component: './Home',
+      hideInMenu: true,
+    },
+    {
+      name: 'organization',
+      path: '/organization',
+      component: './Organization',
+
+      icon: 'Team',
+      title: true
+    },
+    {
+      name: 'node',
+      path: '/node',
+      component: './Node',
+      icon: 'NodeIndex',
+      title: true
+    },
+    {
+      name: 'channel',
+      path: '/channel',
+      component: './Channel',
+      icon: 'DeploymentUnit',
+      title: true
+    },
+    {
+      name: 'chaincode',
+      path: '/chaincode',
+      component: './Chaincode',
+      icon: 'Function',
+      title: true
+    },
+  ],
+  npmClient: 'yarn',
+  utoopack: {},
+  define: {
+    'process.env.API_BASE_URL': process.env.API_BASE_URL
+  },
+});
+

src/dashboard2/.yarnrc.yml

@@ -0,0 +1,6 @@
+approvedGitRepositories:
+  - "**"
+
+enableScripts: true
+
+nodeLinker: node-modules

src/dashboard2/README.md

@@ -0,0 +1,3 @@
+# README
+
+`@umijs/max` 模板项目，更多功能参考 [Umi Max 简介](https://umijs.org/docs/max/introduce)

src/dashboard2/package.json

@@ -0,0 +1,30 @@
+{
+  "private": true,
+  "author": "dodo920306 <dodo920306@gmail.com>",
+  "scripts": {
+    "dev": "max dev",
+    "build": "max build",
+    "format": "prettier --cache --write .",
+    "prepare": "husky",
+    "postinstall": "max setup",
+    "setup": "max setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.0.1",
+    "@ant-design/pro-components": "^2.4.4",
+    "@umijs/max": "^4.6.47",
+    "antd": "^5.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "husky": "^9",
+    "lint-staged": "^13.2.0",
+    "prettier": "^2.8.7",
+    "prettier-plugin-organize-imports": "^3.2.2",
+    "prettier-plugin-packagejson": "^2.4.3",
+    "typescript": "^5.0.3"
+  },
+  "packageManager": "yarn@4.14.1"
+}

src/dashboard2/src/app.tsx

@@ -0,0 +1,154 @@
+import type { HeaderProps } from '@ant-design/pro-layout';
+import { history } from 'umi';
+import { ConfigProvider, Menu, Modal, theme } from 'antd';
+import HeaderRight from './components/HeaderRight/HeaderRight';
+import { ApiOutlined, BookOutlined, GithubOutlined } from '@ant-design/icons';
+import { useIntl } from 'umi';
+
+export const rootContainer = (container: React.ReactNode) => {
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm: theme.darkAlgorithm,
+        token: {
+          colorBgLayout: '#20343e',
+          colorBgBase: '#2d3f49',
+          colorText: '#ffffff',
+          colorTextSecondary: '#dfe6eb',
+        },
+      }}
+    >
+      {container}
+    </ConfigProvider>
+  );
+};
+
+const { useToken } = theme;
+
+export const layout = () => {
+  const { token } = useToken();
+  return {
+    logo: '/favicon.png',
+    layout: 'mix',
+
+    token: {
+      header: {
+        colorBgHeader: token.colorBgLayout,
+      },
+
+      sider: {
+        colorMenuBackground: token.colorBgBase,
+        colorTextMenu: token.colorText,
+        colorTextMenuItemHover: '#5aaafa',
+        colorTextMenuSelected: '#5aaafa',
+        colorBgMenuItemSelected: '#121e35',
+      },
+
+      pageContainer: {
+        colorBgPageContainer: token.colorBgLayout,
+      },
+    },
+
+    actionsRender: (_props: HeaderProps, defaultDom: React.ReactNode) => {
+      return <HeaderRight />;
+    },
+
+    menuFooterRender: () => {
+      const intl = useIntl();
+      return (
+        <Menu
+          mode="inline"
+          selectable={false}
+          inlineIndent={16}
+          style={{
+            background: token.colorBgLayout,
+            borderTop: '1px solid rgba(112,204,254,0.27)',
+            paddingBottom: 10
+          }}
+          items={[
+            {
+              key: 'api',
+              icon: <ApiOutlined />,
+              label: (
+                <a
+                  href={process.env.API_BASE_URL + '/api/v1/docs'}
+                  target="_blank"
+                >
+                  REST API
+                </a>
+              ),
+            },
+            {
+              key: 'github',
+              icon: <GithubOutlined />,
+              label: (
+                <a
+                  href='https://github.com/hyperledger-cello'
+                  target="_blank"
+                >
+                  GitHub
+                </a>
+              ),
+            },
+            {
+              key: 'docs',
+              icon: <BookOutlined />,
+              label: (
+                <a
+                  href='https://hyperledger-cello.readthedocs.io'
+                  target="_blank"
+                >
+                  {intl.formatMessage({id: 'menu.docs'},)}
+                </a>
+              ),
+            },
+          ]}
+        />
+      );
+    },
+
+    onPageChange: () => {
+      const { location } = history;
+      const isLogin = !!localStorage.getItem('token');
+      if (isLogin && location.pathname == '/login') {
+        history.push('/');
+      }
+    },
+  };
+};
+
+export const request = {
+  requestInterceptors: [
+    (url: string, options: any) => {
+      options.baseURL = process.env.API_BASE_URL;
+      return { url, options };
+    },
+  ],
+
+  responseInterceptors: [[
+    (response: any) => response,
+    (error: any) => {
+      const { location } = history;
+      if (location.pathname == '/login') {
+        return Promise.reject(error);
+      }
+      if (error?.response?.status === 401) {
+        if (document.querySelector('.token-expired-modal')) {
+          return Promise.reject(error);
+        }
+
+        Modal.error({
+          className: 'token-expired-modal',
+          title: '登入已過期',
+          content: '您的登入狀態已過期，請重新登入。',
+          okText: '重新登入',
+          onOk: () => {
+            localStorage.removeItem('token');
+            history.push('/login');
+          },
+        });
+      }
+      return Promise.reject(error);
+    },
+  ]],
+};

src/dashboard2/src/components/CustomizedSelectLang/CustomizedSelectLang.less

@@ -0,0 +1,3 @@
+.dropdown {
+    padding: 0px;
+}

src/dashboard2/src/components/CustomizedSelectLang/CustomizedSelectLang.tsx

@@ -0,0 +1,23 @@
+import { GlobalOutlined } from "@ant-design/icons";
+import styles from './CustomizedSelectLang.less'
+import { SelectLang, useIntl } from '@umijs/max';
+import { Button } from "antd";
+
+export default function CustomizedSelectLang() {
+  const intl = useIntl();
+
+  return (
+    <SelectLang
+      icon={
+        <Button
+          className={styles.dropdown}
+          type="text"
+        >
+          <GlobalOutlined />
+          <span className="lang-text">{intl.formatMessage({id: 'navBar.lang',})}</span>
+        </Button>
+      }
+      reload={false}
+    />
+  );
+}

src/dashboard2/src/components/HeaderRight/HeaderRight.less

@@ -0,0 +1,3 @@
+.dropdown {
+    padding: 0px;
+}