From aaeb2d2fd48b7c258ab11b1d81f9791b387d4612 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BE=97=E8=BD=AC=E5=8F=8D=E4=BE=A7=E7=9A=84=E5=92=B8?= =?UTF-8?q?=E9=B1=BC?= <13435638964@163.com> Date: Mon, 31 Oct 2022 19:35:30 +0800 Subject: [PATCH] perf(web ui):remove tree component in watch --- .../ui/src/stores/resTransform.ts | 2 +- .../ui/src/views/async/Watch.vue | 77 +++---------------- 2 files changed, 13 insertions(+), 66 deletions(-) diff --git a/web-ui/arthasWebConsole/ui/src/stores/resTransform.ts b/web-ui/arthasWebConsole/ui/src/stores/resTransform.ts index 4a4a4989e..1a4d37653 100644 --- a/web-ui/arthasWebConsole/ui/src/stores/resTransform.ts +++ b/web-ui/arthasWebConsole/ui/src/stores/resTransform.ts @@ -4,6 +4,6 @@ export const transfromStore = defineStore("transformStore", { actions: { transformStackTrace(trace: StackTrace) { return `${trace.className}.${trace.methodName} (${trace.fileName}: ${trace.lineNumber})`; - }, + } }, }); diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Watch.vue b/web-ui/arthasWebConsole/ui/src/views/async/Watch.vue index d6d6998dc..24aee67f0 100644 --- a/web-ui/arthasWebConsole/ui/src/views/async/Watch.vue +++ b/web-ui/arthasWebConsole/ui/src/views/async/Watch.vue @@ -4,8 +4,7 @@ import { useInterpret, useMachine } from '@xstate/vue'; import MethodInput from '@/components/input/MethodInput.vue'; import machine from '@/machines/consoleMachine'; import { fetchStore } from '@/stores/fetch'; -import { onBeforeMount, onBeforeUnmount, reactive, Ref, ref, watchEffect } from 'vue'; -import Tree from '@/components/show/Tree.vue'; +import { onBeforeMount, onBeforeUnmount, reactive, Ref, ref } from 'vue'; import Enhancer from '@/components/show/Enhancer.vue'; import { publicStore } from '@/stores/public'; const pollingM = useMachine(machine) @@ -50,51 +49,7 @@ const transform = (result: CommandResult) => { map.set(key, result[key]) } } - let raw = tranOgnl(result.value) - const stk: TreeNode[] = [] - // Tree的构建 - raw.forEach(v => { - let str = v.trim() - let match = 0 - for (let s of str) { - if (s === "[") { - match++ - } else if (s === "]") { - match-- - } - } - const root = { - children: [], - meta: str.substring(0, str.length - 1) - } as TreeNode - - if (match > 0) { - stk.push(root) - } else if (match === 0) { - let cur = stk.pop() - if (cur) { - cur.children!.push(root) - stk.push(cur) - } else { - stk.push(root) - } - - } else { - /// 默认每行只会一个] - //!可能会有bug - let cur = stk.pop()! - if (stk.length > 0) { - let parent = stk.pop()! - parent.children!.push(cur) - stk.push(parent) - } else { - // 构建结束 - stk.push(cur) - } - - } - }) - map.set("value", stk[0]) + map.set("value", result.value) return map } getPullResultsEffect( @@ -155,8 +110,8 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin class="h-0 group-hover:h-auto group-focus-within:h-auto absolute overflow-clip transition z-10 top-full pt-2"> <label class="label cursor-pointer btn-sm border border-neutral ml-2 bg-base-100" - v-for="(mode,i) in modereflist" :key="i"> - <span class="label-text uppercase font-bold mr-1">{{mode.name}}</span> + v-for="(mode, i) in modereflist" :key="i"> + <span class="label-text uppercase font-bold mr-1">{{ mode.name }}</span> <input v-model="mode.enabled.value" type="checkbox" class="toggle" /> </label> @@ -165,7 +120,7 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin </div> <div class="btn-group ml-2"> <button class="btn btn-sm btn-outline" @click.prevent="decrease">-</button> - <button class="btn btn-sm btn-outline border-x-0" @click.prevent="setDepth">depth:{{depth}}</button> + <button class="btn btn-sm btn-outline border-x-0" @click.prevent="setDepth">depth:{{ depth }}</button> <button class="btn btn-sm btn-outline" @click.prevent="increase">+</button> </div> </template> @@ -176,27 +131,19 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin <thead> <tr> <th></th> - <th class="0" v-for="(v,i) in keyList" :key="i">{{v}} + <th class="0" v-for="(v, i) in keyList" :key="i">{{ v }} </th> </tr> </thead> <tbody> <tr v-for="(map, i) in tableResults" :key="i" class="hover"> - <th>{{i+1}}</th> - <td class="" v-for="(key,j) in keyList" :key="j"> - <div v-if=" key !== 'value'"> - {{map.get(key)}} + <th>{{ i + 1 }}</th> + <td class="" v-for="(key, j) in keyList" :key="j"> + <div v-if="key !== 'value'"> + {{ map.get(key) }} </div> <div class="flex flex-col" v-else> - <Tree :root="(map.get('value') as TreeNode)" class="mt-2" button-class=" "> - <template #meta="{ data, active }"> - <div class="bg-info px-2 rounded-r rounded-br mr-2 text-info-content" :class='{ - "hover:opacity-50":active - }'> - {{data}} - </div> - </template> - </Tree> + <pre><code>{{ map.get("value") }}</code></pre> </div> </td> </tr> @@ -204,7 +151,7 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin <tfoot> <tr> <th></th> - <th class="0" v-for="(v,i) in keyList" :key="i">{{v}} + <th class="0" v-for="(v, i) in keyList" :key="i">{{ v }} </th> </tr> </tfoot>