From dac6ae7ef3c58794a49fa9675a6ed2823f9e02e4 Mon Sep 17 00:00:00 2001 From: xudaotutou <13435638964@163.com> Date: Wed, 15 Mar 2023 16:17:13 +0800 Subject: [PATCH] doc(web ui):update document about introduction, tunnel server pages support relative path (#2353) --- web-ui/arthasWebConsole/README.md | 8 +- web-ui/arthasWebConsole/README_ZH.md | 93 ++++++++++++++++++ .../all/ui/ui/src/views/async/Stack.vue | 66 ++++++------- .../all/ui/ui/src/views/async/Tt.vue | 28 +++--- web-ui/arthasWebConsole/public/dashboard.png | Bin 0 -> 64789 bytes web-ui/arthasWebConsole/public/option.png | Bin 0 -> 78742 bytes web-ui/arthasWebConsole/public/thread.png | Bin 0 -> 41970 bytes web-ui/arthasWebConsole/public/tt.png | Bin 0 -> 125635 bytes web-ui/arthasWebConsole/vite.config.ts | 6 +- 9 files changed, 148 insertions(+), 53 deletions(-) create mode 100644 web-ui/arthasWebConsole/README_ZH.md create mode 100644 web-ui/arthasWebConsole/public/dashboard.png create mode 100644 web-ui/arthasWebConsole/public/option.png create mode 100644 web-ui/arthasWebConsole/public/thread.png create mode 100644 web-ui/arthasWebConsole/public/tt.png diff --git a/web-ui/arthasWebConsole/README.md b/web-ui/arthasWebConsole/README.md index 3f9e258cc..e501472f2 100644 --- a/web-ui/arthasWebConsole/README.md +++ b/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 - diff --git a/web-ui/arthasWebConsole/README_ZH.md b/web-ui/arthasWebConsole/README_ZH.md new file mode 100644 index 000000000..bef3ffff5 --- /dev/null +++ b/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这个依赖后续也会删除掉 + +### 接下来的目标 + +- [ ] 无法量化的数据暂时是用表格展示， 还需要结合用户经验去设计可视化方案 +- [ ] 代码的组织还是比较糟糕 diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Stack.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Stack.vue index fc93d767c..b13139e18 100644 --- a/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Stack.vue +++ b/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 \ No newline at end of file diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue index fdfe9d3ff..fe325b0ec 100644 --- a/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue +++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue @@ -62,11 +62,11 @@ const chartOption = reactive({ }, 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 = () => {