chore: build the frontend by esbuild instead of webpack (#1063)

Co-authored-by: Yini Xu <[email protected]>
Co-authored-by: Suhaha <[email protected]>

.github/workflows/pr-build.yaml

@@ -41,7 +41,7 @@ jobs:
         uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: "16.x"
       - uses: actions/setup-go@v1
         with:
           go-version: "1.13.5"
@@ -67,7 +67,7 @@ jobs:
           make yarn_dependencies
       - name: Check format
         run: |
-          yarn prettier --check . || (echo "::error ::Please format your code using 'yarn fmt'"; exit 1)
+          yarn prettier --check . || (echo "::error ::Please format your code by using 'yarn fmt'"; exit 1)
         working-directory: ui
       - name: Build UI
         run: |

.github/workflows/release.yaml

@@ -16,7 +16,7 @@ jobs:
         uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: "16.x"
       - uses: actions/setup-go@v1
         with:
           go-version: "1.13.5"

.github/workflows/test.yaml

@@ -84,7 +84,7 @@ jobs:
         uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: "16.x"
       - uses: actions/setup-go@v1
         with:
           go-version: "1.13.5"
@@ -159,10 +159,10 @@ jobs:
           cat ui/start_tiup.log
           echo "==============="
           cat ui/wait_tiup.log
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v2
-        with:
-          files: ./ui/.nyc_output/out.json
-          fail_ci_if_error: true
-          flags: e2e_test
-          verbose: true
+      # - name: Upload coverage to Codecov
+      #   uses: codecov/codecov-action@v2
+      #   with:
+      #     files: ./ui/.nyc_output/out.json
+      #     fail_ci_if_error: true
+      #     flags: e2e_test
+      #     verbose: true

scripts/start_tiup.sh

@@ -4,6 +4,7 @@ tidb_version=$1
 mode=$2
 
 TIUP_BIN_DIR=$HOME/.tiup/bin/tiup
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 
 if [ $mode = "restart" ]; then
     # get process id
@@ -15,12 +16,15 @@ if [ $mode = "restart" ]; then
         echo "killing $id"
         kill -9 $id;
     done
+
+    # Run Tiup
+    $TIUP_BIN_DIR playground ${tidb_version} --db.config=$DIR/tiup.config.toml --tiflash=0 &> start_tiup.log &
 else
     echo "install tiup"
     # Install TiUP
     curl --proto '=https' --tlsv1.2 -sSf https://tiup-mirrors.pingcap.com/install.sh | sh
     $TIUP_BIN_DIR update playground
-fi
 
-# Run Tiup
-$TIUP_BIN_DIR playground ${tidb_version} --tiflash=0 &> start_tiup.log &
+    # Run Tiup
+    $TIUP_BIN_DIR playground ${tidb_version} --tiflash=0 &> start_tiup.log &
+fi

scripts/tiup.config.toml

@@ -0,0 +1,2 @@
+[log]
+slow-threshold = 800

ui/.env.development

@@ -1,6 +1,6 @@
 PORT=3001
+PUBLIC_URL='/dashboard'
 REACT_APP_VERSION=$npm_package_version
-REACT_APP_NAME=$npm_package_name
 REACT_APP_SENTRY_DSN=https://[email protected]/5721090
 REACT_APP_SENTRY_ENABLED=false
 # REACT_APP_RELEASE_VERSION is set in config-overrides.js

ui/.env.production

@@ -1,7 +1,6 @@
 INLINE_RUNTIME_CHUNK=false
-PUBLIC_URL=__PUBLIC_PATH_PREFIX__/
+PUBLIC_URL=__PUBLIC_PATH_PREFIX__
 REACT_APP_VERSION=$npm_package_version
-REACT_APP_NAME=$npm_package_name
 REACT_APP_SENTRY_DSN=https://[email protected]/5721090
 REACT_APP_SENTRY_ENABLED=true
 # REACT_APP_RELEASE_VERSION is set in config-overrides.js

ui/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: ['react-app'],
+  ignorePatterns: ['lib/client/api/*.ts'],
+  rules: {
+    'react/react-in-jsx-scope': 'error',
+    'jsx-a11y/anchor-is-valid': 'off',
+    'jsx-a11y/alt-text': 'off',
+    'import/no-anonymous-default-export': 'off',
+  },
+}

ui/.gitignore

@@ -30,4 +30,6 @@ dist/
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
+
+.eslintcache

ui/builder.js

@@ -0,0 +1,211 @@
+const fs = require('fs-extra')
+const os = require('os')
+const chalk = require('chalk')
+const { start } = require('live-server')
+const { createProxyMiddleware } = require('http-proxy-middleware')
+const { watch } = require('chokidar')
+const { build } = require('esbuild')
+const postCssPlugin = require('@baurine/esbuild-plugin-postcss3')
+const { yamlPlugin } = require('esbuild-plugin-yaml')
+const autoprefixer = require('autoprefixer')
+
+const isDev = process.env.NODE_ENV !== 'production'
+
+// handle .env
+if (isDev) {
+  fs.copyFileSync('./.env.development', './.env')
+} else {
+  fs.copyFileSync('./.env.production', './.env')
+}
+// load .env file
+require('dotenv').config()
+
+const dashboardApiPrefix =
+  process.env.REACT_APP_DASHBOARD_API_URL || 'http://127.0.0.1:12333'
+const devServerPort = process.env.PORT
+const devServerParams = {
+  port: devServerPort,
+  root: 'build',
+  open: '/dashboard',
+  // Set base URL
+  // https://github.com/tapio/live-server/issues/287 - How can I serve from a base URL?
+  proxy: [['/dashboard', `http://127.0.0.1:${devServerPort}`]],
+  middleware: isDev && [
+    function (req, _res, next) {
+      if (/\/dashboard\/api\/diagnose\/reports\/\S+\/detail/.test(req.url)) {
+        req.url = '/diagnoseReport.html'
+      }
+      next()
+    },
+    createProxyMiddleware('/dashboard/api/diagnose/reports/*/data.js', {
+      target: dashboardApiPrefix,
+      changeOrigin: true,
+    }),
+  ],
+}
+
+const lessModifyVars = {
+  '@primary-color': '#3351ff',
+  '@body-background': '#fff',
+  '@tooltip-bg': 'rgba(0, 0, 0, 0.9)',
+  '@tooltip-max-width': '500px',
+}
+const lessGlobalVars = {
+  '@padding-page': '48px',
+  '@gray-1': '#fff',
+  '@gray-2': '#fafafa',
+  '@gray-3': '#f5f5f5',
+  '@gray-4': '#f0f0f0',
+  '@gray-5': '#d9d9d9',
+  '@gray-6': '#bfbfbf',
+  '@gray-7': '#8c8c8c',
+  '@gray-8': '#595959',
+  '@gray-9': '#262626',
+  '@gray-10': '#000',
+}
+
+function getInternalVersion() {
+  const version = fs
+    .readFileSync('../release-version', 'utf8')
+    .split(os.EOL)
+    .map((l) => l.trim())
+    .filter((l) => !l.startsWith('#') && l !== '')[0]
+  if (version === '') {
+    throw new Error(
+      `invalid release version, please check the release-version @tidb-dashboard/root`
+    )
+  }
+  return version
+}
+
+function genDefine() {
+  const define = {}
+  for (const k in process.env) {
+    if (k.startsWith('REACT_APP_')) {
+      let envVal = process.env[k]
+      // Example: REACT_APP_VERSION=$npm_package_version
+      // Expect output: REACT_APP_VERSION=0.1.0
+      if (envVal.startsWith('$')) {
+        envVal = process.env[envVal.substring(1)]
+      }
+      define[`process.env.${k}`] = JSON.stringify(envVal)
+    }
+  }
+  define['process.env.REACT_APP_RELEASE_VERSION'] = JSON.stringify(
+    getInternalVersion()
+  )
+  return define
+}
+
+// customized plugin: log time
+const logTime = (_options = {}) => ({
+  name: 'logTime',
+  setup(build) {
+    let time
+
+    build.onStart(() => {
+      time = new Date()
+      console.log(`Build started`)
+    })
+
+    build.onEnd(() => {
+      console.log(`Build ended: ${chalk.yellow(`${new Date() - time}ms`)}`)
+    })
+  },
+})
+
+const esbuildParams = {
+  color: true,
+  entryPoints: {
+    dashboardApp: 'src/index.ts',
+    diagnoseReport: 'diagnoseReportApp/index.tsx',
+  },
+  loader: { '.ts': 'tsx' },
+  outdir: 'build',
+  minify: !isDev,
+  format: 'esm',
+  bundle: true,
+  sourcemap: true,
+  logLevel: 'error',
+  incremental: true,
+  splitting: true,
+  platform: 'browser',
+  plugins: [
+    postCssPlugin.default({
+      lessOptions: {
+        modifyVars: lessModifyVars,
+        globalVars: lessGlobalVars,
+        javascriptEnabled: true,
+      },
+      enableCache: true,
+      plugins: [autoprefixer],
+    }),
+    yamlPlugin(),
+    logTime(),
+  ],
+  define: genDefine(),
+  inject: ['./process-shim.js'], // fix runtime crash
+}
+
+function buildHtml(inputFilename, outputFilename) {
+  let result = fs.readFileSync(inputFilename).toString()
+
+  const placeholders = ['PUBLIC_URL']
+  placeholders.forEach((key) => {
+    result = result.replace(new RegExp(`%${key}%`, 'g'), process.env[key])
+  })
+
+  // handle distro strings res, only for dev mode
+  const distroStringsResFilePath = './build/distro-res/strings.json'
+  if (isDev && fs.existsSync(distroStringsResFilePath)) {
+    const distroStringsRes = require(distroStringsResFilePath)
+    result = result.replace(
+      '__DISTRO_STRINGS_RES__',
+      btoa(JSON.stringify(distroStringsRes))
+    )
+  }
+
+  fs.writeFileSync(outputFilename, result)
+}
+
+function handleAssets() {
+  fs.copySync('./public', './build')
+  if (isDev) {
+    copyDistroRes()
+  }
+
+  buildHtml('./public/index.html', './build/index.html')
+  buildHtml('./public/diagnoseReport.html', './build/diagnoseReport.html')
+}
+
+function copyDistroRes() {
+  const distroResPath = '../bin/distro-res'
+  if (fs.existsSync(distroResPath)) {
+    fs.copySync(distroResPath, './build/distro-res')
+  }
+}
+
+async function main() {
+  fs.removeSync('./build')
+
+  const builder = await build(esbuildParams)
+  handleAssets()
+
+  if (isDev) {
+    start(devServerParams)
+
+    const tsConfig = require('./tsconfig.json')
+    tsConfig.include.forEach((folder) => {
+      watch(`${folder}/**/*`, { ignoreInitial: true }).on('all', () => {
+        builder.rebuild()
+      })
+    })
+    watch('public/**/*', { ignoreInitial: true }).on('all', () => {
+      handleAssets()
+    })
+  } else {
+    process.exit(0)
+  }
+}
+
+main()

ui/cypress.json

@@ -1,5 +1,5 @@
 {
-  "defaultCommandTimeout": 120000,
+  "defaultCommandTimeout": 10000,
   "responseTimeout": 60000,
   "requestTimeout": 60000,
   "screenshotOnRunFailure": false,