doc(web ui):update document about introduction, tunnel server pages support relative path ()

pull/2455/head
xudaotutou committed by GitHub
parent c9c7a63755
commit dac6ae7ef3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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

@ -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这个依赖后续也会删除掉
### 接下来的目标
- [ ] 无法量化的数据暂时是用表格展示, 还需要结合用户经验去设计可视化方案
- [ ] 代码的组织还是比较糟糕

@ -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>

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

@ -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: {

Loading…
Cancel
Save