doc(web ui):update document about introduction, tunnel server pages s…

…upport relative path (#2353)

web-ui/arthasWebConsole/README.md

@@ -1,22 +1,22 @@
 # a Web client based on HTTP API for arthas
 
+[English](./README.md)|[中文](README_ZH.md)
+
 ## usage
 
 * Through clicking the button in the top right corner, you can quickly get or clear sessionId
 * When you are in trouble, refreshing the page is a good way
 * Some features must be used with sessionId. but some features must be used without sessionId
-* In classloader module, you must selecte a classloader before using classloader to load class or resourse
+* In classloader module, you must select a classloader before using classloader to load class or resourse
 
 ## develop
 
 * Strongly recommand devloping with vscode
 * TS + Vue3 + Tailwindcss + xstate
 * You can view the Graphical http requesting process with xstate
-* The final bundle will be placed in `../target/static` 
-
+* The final bundle will be placed in `../target/static`
 
 ### notice
 
 * When use pull_results, you can't use other cmd, such as ```sc class```.  
 * The consoleMachine.ts will be replaced perRequestMachine.ts + pinia sooner or later
-

web-ui/arthasWebConsole/README_ZH.md

@@ -0,0 +1,93 @@
+# 基于 http api 的 可视化 arthas 页面
+
+[English](./README.md)|[中文](README_ZH.md)
+
+## usage
+
+- 当你遇到奇怪的问题，可以通过刷新网页解决
+- 有一些命令需要使用 sessionID ，有些不需要。不过在目前的版本中，在使用时不需要控制 sessionid 。如有必要，通过点击右上角的按钮获取 / 销毁 sessionID
+- 当出现 interrupt 的红色按钮时，代表你进入了轮询的状态（dashboard 还有 real time 里经常出现）。当不想用当前功能，通过点击该按钮来停止当前的轮询
+- 路径：/index.html (原版的 web terminal), /ui/index.html (新版的可视化界面)
+- 每个功能和cli命令同名，具体的功能可以通过看官方文档（点击arthas图标可以跳转到官方文档）
+
+### 模块介绍
+
+#### dashboard
+
+![show](public/dashboard.png)
+
+- 基于 dashboard 命令实现
+- 折线图展示 memory 的各种信息，
+- 柱状图展示 gc 数据 (可能用折线配合时间轴会更好？)
+- 表格展示 threads 信息， limit 控制展示前 n 忙的线程
+
+#### real time
+
+- 监控用的功能， 需要sessionID
+- `tt`, `monitor` 使用折线图展示了cost/RT
+
+##### tt
+
+- all records 翻出所有的记录
+- 在表格中根据 index 找到需要的记录，可以通过点击invoke触发那次调用，
+- search records 用Advice 对象翻查，如`method.name=="print"`
+
+#### immediacy
+
+- 一发送就有响应的命令， 不需要 sessionID
+- 有一部分功能提供了 refresh 用来手动更新
+
+##### thread
+
+![show](public/thread.png)
+
+- thread 应该可以实时的，为了不污染 history 和 减少后端压力，选择了用户手动点击get threads 来实现当前的thread状况
+
+###### filter: 提供了过滤功能
+
+```shell
+列名:值
+
+例如:
+  id:-1 // 此时是会过滤出一切id = -1 的行
+```
+
+- 允许多个列的过滤，目前仅支持 `=`
+- ~~具体实现比较粗糙，可能会有奇怪的bug~~
+
+###### top thread
+
+- 控制要显示前几个忙的线程
+- 0 代表不限制
+
+#### option
+
+![show](public/option.png)
+
+- 简单的展示配置
+- 提供一些配置的修改（不保证安全，允许类似修改osName这种操作）
+
+#### console
+
+- 一般不会用，调试 http api 用的
+- 已经自动 init sessionID 了
+
+#### terminal
+
+- 直接跳到基于 websocket 的 Web 终端
+
+## 开发
+
+- 墙裂推荐用 vscode 开发, 可以用 vscode 的 xstate 插件查看请求数据的状态图
+- TS + Vue3 + Tailwindcss  + daisyui + xstate
+- 打包先打到dist, 再通过 ant 复制到  `../target/static`
+
+### 注意事项
+
+- 当使用 pull_results ，不要使用其他的命令，例如 ```sc class```
+- consoleMachine.ts 以后会被 perRequestMachine.ts 完全取代，@vue/state这个依赖后续也会删除掉
+
+### 接下来的目标
+
+- [ ] 无法量化的数据暂时是用表格展示， 还需要结合用户经验去设计可视化方案
+- [ ] 代码的组织还是比较糟糕

web-ui/arthasWebConsole/all/ui/ui/src/views/async/Stack.vue

@@ -43,7 +43,6 @@ getCommonResEffect(pollingM, body => {
             }
             map.set(k, val)
           })
-        // pollResults.unshift([result.ts, map])
         tableResults.unshift(map)
       }
 
@@ -69,9 +68,7 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
   let condition = data.conditon.trim() == "" ? "" : `'${data.conditon.trim()}'`
   let n = data.count > 0 ? `-n ${data.count}` : ""
 
-  // pollResults.length = 0
   enhancer.value = undefined
-  // tableResults.length = 0
   fetchS.baseSubmit(fetchM, {
     action: "async_exec",
     command: `stack ${className} ${methodName} ${condition} ${n}`,
@@ -85,38 +82,37 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
 <template>
   <MethodInput :submit-f="submit" ncondition ncount></MethodInput>
 
-    <Enhancer :result="enhancer" v-if="enhancer"></Enhancer>
-    <div class="mt-4 overflow-x-auto w-full">
-      <table class="table w-full table-compact">
-        <thead>
-          <tr>
-            <th></th>
-            <th v-for="(v,i) in keyList" :key="i">{{v}}</th>
-          </tr>
-        </thead>
-        <tbody class="">
-          <tr v-for="(map, i) in tableResults" :key="i">
-            <th>{{i + 1}}</th>
-            <td v-for="(key,j) in keyList" :key="j">
-              <template v-if="key!== 'stackTrace'">
-                {{map.get(key)}}
-              </template>
-              <div class="flex flex-col items-end" v-else>
-
-                <div v-for="(row, k) in map.get(key)" :key="k">
-                  {{row}}
-                </div>
+  <Enhancer :result="enhancer" v-if="enhancer"></Enhancer>
+  <div class="mt-4 overflow-x-auto w-full">
+    <table class="table w-full table-compact">
+      <thead>
+        <tr>
+          <th></th>
+          <th v-for="(v, i) in keyList" :key="i" class="normal-case">{{ v }}</th>
+        </tr>
+      </thead>
+      <tbody class="">
+        <tr v-for="(map, i) in tableResults" :key="i">
+          <th></th>
+          <td v-for="(key, j) in keyList" :key="j">
+            <template v-if="key !== 'stackTrace'">
+              {{ map.get(key) }}
+            </template>
+            <div class="flex flex-col items-end" v-else>
+              <div v-for="(row, k) in map.get(key)" :key="k">
+                {{ row }}
               </div>
-            </td>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr>
-            <th></th>
-            <th v-for="(v,i) in keyList" :key="i">{{v}}</th>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th></th>
+          <th v-for="(v, i) in keyList" :key="i" class="normal-case">{{ v }}</th>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
 
 </template>

web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue

@@ -62,11 +62,11 @@ const chartOption = reactive<LineChartOption>({
   },
   dataZoom: {
     type: "inside",
-    minValueSpan:30,
-    maxValueSpan:30,
+    minValueSpan: 30,
+    maxValueSpan: 30,
     start: 50,
     end: 100,
-    throttle:0,
+    throttle: 0,
     zoomLock: true
   },
   toolbox: {
@@ -145,12 +145,12 @@ onBeforeMount(() => {
 onBeforeUnmount(() => {
   loop.close()
 })
-const submit = async (data: { classItem: Item, methodItem: Item, count: number, conditon: string }) => {
+const submit = async (data: { classItem: Item, methodItem: Item, count: number,express:string }) => {
   let n = data.count > 0 ? `-n ${data.count}` : ""
-  let condition = data.conditon
+  let express =  data.express.trim() !== ""? `-w ${data.express}`:""
   fetchS.baseSubmit(fetchM, {
     action: "async_exec",
-    command: `tt -t ${data.classItem.value} ${data.methodItem.value} ${n} ${condition}`,
+    command: `tt -t ${data.classItem.value} ${data.methodItem.value} ${n} ${express}`,
     sessionId: undefined
   }).then(res => {
     enhancer.value = undefined
@@ -236,7 +236,7 @@ const searchTt = () => {
 </script>
 
 <template>
-  <MethodInput :submit-f="submit" ncount ncondition>
+  <MethodInput :submit-f="submit" ncount nexpress>
   </MethodInput>
   <div class="divider"></div>
   <div class="flex items-center justify-between">
@@ -280,15 +280,19 @@ const searchTt = () => {
               <button class="btn btn-primary btn-sm btn-outline" @click="reTrigger(map.get('index')!)">invoke</button>
             </th>
             <td class="" v-for="(key, j) in keyList" :key="j">
-              <template v-if="key !== 'params'">
-                {{ map.get(key) }}
-              </template>
-
-              <div class="flex flex-col" v-else>
+              <div class="flex flex-col" v-if="key == 'params'">
                 <div v-for="(row, k) in map.get(key)" :key="k">
                   {{ row }}
                 </div>
               </div>
+              <template v-else-if="['returnObj', 'throwExp'].includes(key)">
+                <pre><code>{{map.get(key)}}</code></pre>
+              </template>
+              <template v-else>
+                {{ map.get(key) }}
+              </template>
+              <!-- <template v-else-if="key == 'returnObject'"></template> -->
+
             </td>
           </tr>
         </tbody>

web-ui/arthasWebConsole/vite.config.ts

@@ -9,11 +9,12 @@ export default defineConfig(({ mode }) => {
     `${env.VITE_ARTHAS_PROXY_IP}:${env.VITE_ARTHAS_PROXY_PORT}`;
 
   console.log("Arthas proxy :", proxyTarget);
-  let outDir, input, root, proxy;
+  let outDir, input, root, proxy, base;
 
   if (mode === "tunnel") {
     outDir = path.resolve(__dirname, `dist/tunnel`);
     root = "./all/tunnel";
+    base = "./"
     input = {
       tunnel: path.resolve(__dirname, "all/tunnel/index.html"),
       apps: path.resolve(__dirname, "all/tunnel/apps.html"),
@@ -27,6 +28,7 @@ export default defineConfig(({ mode }) => {
     };
   } else if (mode === "ui") {
     outDir = path.resolve(__dirname, `dist/ui`);
+    base = "/"
     root = "./all/ui";
     input = {
       main: path.resolve(__dirname, "all/ui/index.html"),
@@ -69,7 +71,7 @@ export default defineConfig(({ mode }) => {
     define: {
       "__VUE_OPTIONS_API__": false,
     },
-    base: ".",
+    base,
     publicDir: path.resolve(__dirname, "all/share/public"),
     root,
     server: {