feat: perses dashboard (#609)

* feat: perses dashboard

* style: sidebar

* feat: create

* chore: name,style color

* style: height

* fix: scroll

* fix: form model

* chore: remote strict

* feat: url sync

* build: fix build

Author: sunchanglong

config/vite.config.base.ts

@@ -2,9 +2,42 @@ import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import react from '@vitejs/plugin-react'
 import svgLoader from 'vite-svg-loader'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import { transformSync } from 'esbuild'
+
+const tsxTransformer = () => ({
+  name: 'tsx-transformer',
+  enforce: 'pre' as const,
+  transform(code: string, id: string) {
+    if (id.includes('.tsx') && !id.includes('node_modules')) {
+      const result = transformSync(code, {
+        loader: 'tsx',
+        jsx: 'automatic',
+        target: 'esnext',
+        format: 'esm',
+        sourcemap: false,
+      })
+      let sourceMap: string | null = null
+      if (result.map && typeof result.map === 'string' && result.map.trim().length > 0) {
+        try {
+          JSON.parse(result.map)
+          sourceMap = result.map
+        } catch {
+          sourceMap = null
+        }
+      }
+      return {
+        code: result.code,
+        map: sourceMap,
+      }
+    }
+    return null
+  },
+})
 
 const useDevMode = true
 export default defineConfig({
@@ -43,8 +76,27 @@ export default defineConfig({
     },
   },
   plugins: [
+    tsxTransformer(),
     vue(),
     vueJsx(),
+    react({
+      include: [/\.tsx$/],
+    }),
+    createHtmlPlugin({
+      minify: true,
+      pages: [
+        {
+          entry: '/src/main.ts',
+          filename: 'index.html',
+          template: 'index.html',
+        },
+        {
+          entry: '/src/dashboard-main.tsx',
+          filename: 'dashboard.html',
+          template: 'dashboard.html',
+        },
+      ],
+    }),
     svgLoader({ svgoConfig: {} }),
     AutoImport({
       dts: true,
@@ -53,11 +105,13 @@ export default defineConfig({
       },
       imports: ['vue', 'pinia', 'vue-router'],
       dirs: ['src/store', 'src/hooks'],
+      exclude: [/src\/perses-dashboard\/react\//, /src\/dashboard-main\.tsx/],
     }),
     Components({
       dts: true,
       dirs: ['src/components', 'src/views'],
       extensions: ['vue', 'arco-design'],
+      exclude: [/src\/perses-dashboard\/react\//, /src\/dashboard-main\.tsx/],
     }),
   ],
   resolve: {
@@ -74,16 +128,39 @@ export default defineConfig({
         find: 'vue-i18n',
         replacement: 'vue-i18n/dist/vue-i18n.cjs.js', // Resolve the i18n warning issue
       },
+      {
+        find: 'hoist-non-react-statics',
+        replacement: resolve(__dirname, '../src/perses-dashboard/vendor/hoist-non-react-statics'),
+      },
+      {
+        find: 'react-is',
+        replacement: resolve(__dirname, '../src/perses-dashboard/vendor/react-is'),
+      },
       {
         find: 'vue',
         replacement: 'vue/dist/vue.esm-bundler.js', // compile template
       },
     ],
-    extensions: ['.ts', '.js'],
+    extensions: ['.ts', '.js', '.tsx', '.jsx'],
   },
   define: {
     'process.env': {},
   },
+  optimizeDeps: {
+    include: [
+      'react',
+      'react-dom',
+      'react-router-dom',
+      '@mui/material',
+      '@emotion/react',
+      '@emotion/styled',
+      '@perses-dev/components',
+      '@perses-dev/core',
+    ],
+    esbuildOptions: {
+      target: 'esnext',
+    },
+  },
   css: {
     preprocessorOptions: {
       less: {

config/vite.config.prod.ts

@@ -37,11 +37,13 @@ export default mergeConfig(
             },
             imports: ['vue', 'pinia', 'vue-router'],
             dirs: ['src/store', 'src/hooks'],
+            exclude: [/src\/perses-dashboard\/react\//, /src\/dashboard-main\.tsx/],
           }),
           Components({
             dts: true,
             dirs: ['src/components', 'src/views'],
             extensions: ['vue', 'arco-design'],
+            exclude: [/src\/perses-dashboard\/react\//, /src\/dashboard-main\.tsx/],
           }),
         ],
       },

dashboard.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/src/assets/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard | Greptime</title>
+  </head>
+  <body>
+    <div id="react-root"></div>
+    <script type="module" src="/src/dashboard-main.tsx"></script>
+  </body>
+</html>

package.json

@@ -47,14 +47,29 @@
     "@codemirror/state": "6.4.1",
     "@codemirror/theme-one-dark": "6.1.2",
     "@codemirror/view": "6.18.0",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.14.0",
+    "@hookform/resolvers": "^4.1.0",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.2",
     "@lezer/lr": "^1.2.3",
+    "@mui/material": "^6.1.10",
+    "@perses-dev/clickhouse-plugin": "0.5.0-beta.0",
+    "@perses-dev/components": "0.53.0-beta.4",
+    "@perses-dev/core": "0.53.0-beta.4",
+    "@perses-dev/dashboards": "0.53.0-beta.4",
+    "@perses-dev/gauge-chart-plugin": "0.12.0-beta.0",
+    "@perses-dev/plugin-system": "0.53.0-beta.4",
+    "@perses-dev/prometheus-plugin": "0.57.0-beta.0",
+    "@perses-dev/stat-chart-plugin": "0.12.0-beta.0",
+    "@perses-dev/table-plugin": "0.11.0-beta.0",
+    "@perses-dev/timeseries-chart-plugin": "0.12.0-beta.0",
     "@prometheus-io/codemirror-promql": "0.305.0",
     "@tauri-apps/api": "^2.*",
     "@tauri-apps/plugin-dialog": "^2.2.0",
     "@tauri-apps/plugin-process": "^2.2.0",
     "@tauri-apps/plugin-updater": "~2.5.0",
+    "@tanstack/react-query": "^5.66.7",
     "@types/d3": "^7.4.3",
     "@types/d3-flextree": "^2.1.4",
     "@types/json-bigint": "^1.0.1",
@@ -84,13 +99,18 @@
     "pinia": "^2.1.6",
     "qs": "^6.11.0",
     "query-string": "^8.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
+    "react-is": "^18.3.1",
     "sortablejs": "^1.15.0",
     "sql-formatter": "^12.1.3",
     "stylelint-config-rational-order-fix": "^0.1.9",
     "stylelint-config-recommended-less": "^1.0.4",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-stylus": "^0.18.0",
     "ts-md5": "^1.3.1",
+    "use-query-params": "^2.2.1",
     "vue": "^3.5.20",
     "vue-codemirror": "^6.1.1",
     "vue-echarts": "^6.5.0",
@@ -111,14 +131,18 @@
     "@types/nprogress": "^0.2.0",
     "@types/numeral": "^2.0.2",
     "@types/qs": "^6.9.7",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "@types/sortablejs": "^1.15.0",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.53.0",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
+    "@vitejs/plugin-react": "^4.3.2",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/language-plugin-pug": "^2.2.10",
     "cross-env": "^7.0.3",
+    "esbuild": "0.18.20",
     "eslint": "^8.40.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.7.0",
@@ -145,6 +169,7 @@
     "vite": "^4.5.14",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-html": "^3.2.0",
     "vite-plugin-markdown": "2.2.0-2",
     "vite-plugin-style-import": "2.0.0",
     "vite-svg-loader": "^4.0.0",
@@ -180,4 +205,4 @@
       "braces": "^3.0.3"
     }
   }
-}
+}