fix(web ui): profiler #2145 (#2304)

web-ui/arthasWebConsole/.env

@@ -0,0 +1,2 @@
+VITE_ARTHAS_PROXY_IP=localhost
+VITE_ARTHAS_PROXY_PORT=8563

web-ui/arthasWebConsole/src/App.vue

@@ -5,20 +5,22 @@ import { FitAddon } from 'xterm-addon-fit';
 import {WebglAddon} from "xterm-addon-webgl"
 
 let ws: WebSocket | undefined;
-let xterm = new Terminal({allowProposedApi: true})
+
 const DEFAULT_SCROLL_BACK = 1000
 const MAX_SCROLL_BACK = 9999999
 const MIN_SCROLL_BACK = 1
-const webglAddon = new WebglAddon();
-const ip = ref("127.0.0.1")
-const port = ref('3568')
+const ARTHAS_PORT = '8563'
+const ip = ref("")
+const port = ref('')
 const iframe = ref(true)
 const fullSc = ref(true)
-let fitAddon = new FitAddon();
+const fitAddon = new FitAddon();
+const webglAddon = new WebglAddon();
+let xterm = new Terminal({allowProposedApi: true})
 
 onMounted(() => {
   ip.value = getUrlParam('ip') ?? window.location.hostname;
-  port.value = getUrlParam('port') ?? '8563';
+  port.value = getUrlParam('port') ?? ARTHAS_PORT;
   let _iframe = getUrlParam('iframe')
   if (_iframe && _iframe.trim() !== 'false') iframe.value = false
 

web-ui/arthasWebConsole/src/env.d.ts

@@ -4,12 +4,4 @@ declare module '*.vue' {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component
-}
-interface ImportMetaEnv {
-  readonly VITE_APP_TITLE: string
-  // 更多环境变量...
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv
 }

web-ui/arthasWebConsole/ui/src/env.d.ts

@@ -5,12 +5,4 @@ declare module '*.vue' {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component
-}
-interface ImportMetaEnv {
-  readonly VITE_APP_TITLE: string
-  // 更多环境变量...
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv
 }

web-ui/arthasWebConsole/ui/src/stores/fetch.ts

@@ -202,7 +202,7 @@ export const fetchStore = defineStore("fetch", {
         });
       }
       this.jobRunning = false;
-      return Promise.reject("There art not  job running");
+      return Promise.reject("There are not jobs running");
     },
     openJobRun() {
       this.jobRunning = true;

web-ui/arthasWebConsole/ui/src/views/async/Profiler.vue

@@ -197,7 +197,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <template v-if="!support">
+  <template v-if="support">
     <div class="flex py-2 border-b-2  border-gray-300">
       <h3 class="text-lg w-40">status: </h3>
       <div class="mx-2">
@@ -210,15 +210,16 @@ onBeforeUnmount(() => {
       <h3 class="text-lg w-40">How to start: </h3>
       <Listbox v-model="selectEvent">
         <div class=" relative mx-2">
-          <ListboxButton class="btn btn-sm btn-outline w-52 "> even:
-            {{ selectEvent}}
+          <ListboxButton class="btn btn-sm btn-outline"> even:
+            <span class="normal-case">{{ selectEvent}}</span>
           </ListboxButton>
           <ListboxOptions
-            class=" absolute w-52 mt-2 border py-2 rounded-md hover:shadow-xl transition bg-white max-h-80 overflow-y-auto">
+            class=" absolute w-52 mt-2 border py-2 rounded-md hover:shadow-xl transition max-h-80 overflow-y-auto bg-base-100">
             <ListboxOption v-for="(e,i) in eventList" :key="i" :value="e" v-slot="{active, selected}">
-              <div class=" p-2 transition break-words text-base-100" :class="{
+              <div class=" p-2 transition break-words" :class="{
               'bg-neutral text-neutral-content': active,
               'bg-neutral-focus text-neutral-content': selected,
+              ' text-neutral':!active && !selected
               }">
                 {{ e }}
               </div>
@@ -228,14 +229,16 @@ onBeforeUnmount(() => {
       </Listbox>
       <button class="btn btn-sm btn-outline mr-2" @click="changeDuration">duration :{{duration}}</button>
       <button class="btn btn-sm btn-outline mr-2" @click="changeFramebuf">framebuf :{{framebuf}}</button>
-      <button class="btn btn-sm btn-outline mr-2" @click="changeFile">file :<span class="normal-case">{{fileformat}}</span></button>
+      <button class="btn btn-sm btn-outline mr-2" @click="changeFile">file :<span
+          class="normal-case">{{fileformat}}</span></button>
       <TodoList title="include" :val-set="includesVal" class=" mr-2"></TodoList>
       <TodoList title="exclude" :val-set="excludesVal" class="mr-2"></TodoList>
       <button class="btn btn-primary btn-sm btn-outline" @click="startSubmit">start</button>
     </div>
     <div class="flex items-center border-b-2 border-gray-300 py-2">
       <h3 class="text-lg w-40">Resume or stop: </h3>
-      <button class="btn btn-primary btn-sm btn-outline mx-2" @click="resumeProfiler" v-if="!profilerStatus.is">resume</button>
+      <button class="btn btn-primary btn-sm btn-outline mx-2" @click="resumeProfiler"
+        v-if="!profilerStatus.is">resume</button>
       <button class="btn btn-primary btn-sm btn-outline" @click="stopProfiler" v-if="profilerStatus.is">stop</button>
     </div>
     <div class="flex items-center py-2">
@@ -244,4 +247,7 @@ onBeforeUnmount(() => {
       <button class="btn btn-primary btn-sm btn-outline ml-2" @click="toOutputDir">go to the output direction</button>
     </div>
   </template>
+  <div v-else>
+    Your system is not supported!
+  </div>
 </template>

web-ui/arthasWebConsole/vite.config.ts

@@ -1,50 +1,50 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import * as path from "path";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue({
-    reactivityTransform:true
-  })],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./ui/src/"),
-    },
-  },
-  build: {
-    emptyOutDir: true,
-    minify: "terser",
-    terserOptions: {
-      compress: {
-        //生产环境时移除console
-        drop_console: true,
-        drop_debugger: true,
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  const proxyTarget =`${env.VITE_ARTHAS_PROXY_IP}:${env.VITE_ARTHAS_PROXY_PORT}`;
+  console.log("Arthas proxy :", proxyTarget);
+  return {
+    plugins: [vue({
+      reactivityTransform: true,
+    })],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./ui/src/"),
       },
     },
-    rollupOptions: {
-      input: {
-        main: path.resolve(__dirname, "index.html"),
-        ui: path.resolve(__dirname, "ui/index.html"),
-      },
-      output: {
-        chunkFileNames: "static/js/[name]-[hash].js",
-        entryFileNames: "static/js/[name]-[hash].js",
-        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
-      },
-      
-    },
-  },
-  define:{
-    '__VUE_OPTIONS_API__':false
-  },
-  base: "/",
-  server: {
-    proxy: {
-      "/api": {
-        target: "http://127.0.0.1:8563",
-        changeOrigin: true,
+    build: {
+      emptyOutDir: true,
+      minify: "esbuild",
+      rollupOptions: {
+        input: {
+          main: path.resolve(__dirname, "index.html"),
+          ui: path.resolve(__dirname, "ui/index.html"),
+        },
+        output: {
+          chunkFileNames: "static/js/[name]-[hash].js",
+          entryFileNames: "static/js/[name]-[hash].js",
+          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
+        },
       },
     },
-  },
+    esbuild: {
+      drop: ["console", "debugger"],
+    },
+    define: {
+      "__VUE_OPTIONS_API__": false,
+    },
+    base: "/",
+    server: {
+      proxy: {
+        "/api": {
+          target: `http://${proxyTarget}`,
+          changeOrigin: true,
+        }
+      },
+    },
+  };
 });

web-ui/arthasWebConsole/yarn.lock

@@ -14,12 +14,12 @@
 
 "@heroicons/vue@^1.0.6":
   version "1.0.6"
-  resolved "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz#d8b90734b436eb5a87f40cc300b64a0fb0031f7f"
+  resolved "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz"
   integrity sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==
 
 "@highlightjs/vue-plugin@^2.1.0":
   version "2.1.0"
-  resolved "https://registry.npmmirror.com/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz#b7c41e3597a46975665b10cad57882cbde1d1594"
+  resolved "https://registry.npmmirror.com/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz"
   integrity sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==
 
 "@nodelib/fs.scandir@2.1.5":
@@ -575,7 +575,7 @@ has@^1.0.3:
 
 highlight.js@^11.6.0:
   version "11.6.0"
-  resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
+  resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.6.0.tgz"
   integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
 
 is-arrayish@^0.3.1:
@@ -979,7 +979,7 @@ xterm-addon-webgl@^0.13.0:
 
 xterm@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.npmmirror.com/xterm/-/xterm-5.0.0.tgz#0af50509b33d0dc62fde7a4ec17750b8e453cc5c"
+  resolved "https://registry.npmmirror.com/xterm/-/xterm-5.0.0.tgz"
   integrity sha512-tmVsKzZovAYNDIaUinfz+VDclraQpPUnAME+JawosgWRMphInDded/PuY0xmU5dOhyeYZsI0nz5yd8dPYsdLTA==
 
 yaml@^1.10.2: