mirror of https://github.com/alibaba/arthas.git
update web ui (#2318)
* fix(web ui): profiler * chore(web ui):perf proxy config * perf(web ui):update style * chore(web ui):update deps * perf(web ui):fix monitor category * fix(web ui):fix style of table and monitor rt chart * refactor(web ui):refactor config * feat(web ui):support debug http api with consolepull/2325/head
xudaotutou
2 years ago
committed by
GitHub
parent
f6fe8b9134
commit
aa2526075b
@ -0,0 +1,2 @@
|
|||||||
|
# NODE_ENV=production
|
||||||
|
VITE_AGENT=true
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
# NODE_ENV=production
|
||||||
|
VITE_AGENT=false
|
||||||
@ -1,57 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { computed, reactive, ref } from 'vue';
|
|
||||||
import { PuzzleIcon, TerminalIcon, ViewGridIcon } from "@heroicons/vue/outline"
|
|
||||||
import { DesktopComputerIcon } from "@heroicons/vue/solid"
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
const tabs = [
|
|
||||||
{
|
|
||||||
name: 'dashboard',
|
|
||||||
url: "/dashboard",
|
|
||||||
icon: DesktopComputerIcon
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'immediacy',
|
|
||||||
url: '/synchronize',
|
|
||||||
icon: ViewGridIcon
|
|
||||||
}, {
|
|
||||||
name: "real time",
|
|
||||||
url: '/asynchronize',
|
|
||||||
icon: ViewGridIcon
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'option',
|
|
||||||
url: '/config',
|
|
||||||
icon: PuzzleIcon
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// name: 'console',
|
|
||||||
// url: '/console',
|
|
||||||
// icon: TerminalIcon
|
|
||||||
// },
|
|
||||||
|
|
||||||
]
|
|
||||||
const router = useRouter()
|
|
||||||
const routePath = computed(() => useRoute().path)
|
|
||||||
const toNext = (url: string) => {
|
|
||||||
router.push(url)
|
|
||||||
}
|
|
||||||
const a: StatusResult = { type: "status", message: "", statusCode: 0 }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ul class="menu bg-base-200 w-[10vw] menu-compact">
|
|
||||||
<li v-for="(tab, idx) in tabs" :key="idx"
|
|
||||||
@click="toNext(tab.url)" class="pl-2" >
|
|
||||||
<a class="break-all" :class="{ 'bg-primary text-primary-content': routePath.includes(tab.url), }">
|
|
||||||
<component :is="tab.icon" class="w-4 h-4" />
|
|
||||||
{{
|
|
||||||
tab.name
|
|
||||||
}}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,102 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import permachine from '@/machines/perRequestMachine';
|
||||||
|
import { fetchStore } from '@/stores/fetch';
|
||||||
|
import { publicStore } from '@/stores/public';
|
||||||
|
import { onBeforeMount, reactive, ref, Ref } from 'vue';
|
||||||
|
import { interpret } from 'xstate';
|
||||||
|
const fetchS = fetchStore();
|
||||||
|
const publicS = publicStore()
|
||||||
|
type ResultType = MergeObj<Omit<GlobalOptions, "value">, {
|
||||||
|
value: Ref<string>, changeValue: null | (() => void)
|
||||||
|
}>
|
||||||
|
|
||||||
|
const tableResultList: ResultType[] = reactive([])
|
||||||
|
const keyList: (keyof GlobalOptions)[] = [
|
||||||
|
"level",
|
||||||
|
"name",
|
||||||
|
"type",
|
||||||
|
"value",
|
||||||
|
"summary",
|
||||||
|
"description",
|
||||||
|
]
|
||||||
|
const setVmoption = (key: string, value: string) => fetchS.baseSubmit(interpret(permachine), {
|
||||||
|
action: "exec",
|
||||||
|
command: `options ${key} ${value}`
|
||||||
|
})
|
||||||
|
|
||||||
|
const getVmoption = () => fetchS.baseSubmit(interpret(permachine), {
|
||||||
|
action: "exec",
|
||||||
|
command: "options",
|
||||||
|
}).then(res => {
|
||||||
|
let result = (res as CommonRes).body.results[0]
|
||||||
|
if (result.type == "options") {
|
||||||
|
tableResultList.length = 0;
|
||||||
|
result.options.forEach((option) => {
|
||||||
|
let rows: ResultType[] = []
|
||||||
|
// 用来绑定读写
|
||||||
|
|
||||||
|
let _raw = ref(option.value)
|
||||||
|
let changeValue = null
|
||||||
|
changeValue = publicS.inputDialogFactory(_raw,
|
||||||
|
(raw) => {
|
||||||
|
setVmoption(option.name, raw.trim())
|
||||||
|
.then(res =>{
|
||||||
|
let result = (res as CommonRes).body.results[0]
|
||||||
|
if(result.type === "options") _raw.value = (result.changeResult.afterValue as string).toString()
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
// 失败就回退
|
||||||
|
_raw.value = option.value
|
||||||
|
})
|
||||||
|
return raw.trim()
|
||||||
|
},
|
||||||
|
(input) => input.value)
|
||||||
|
rows.push({
|
||||||
|
...option,
|
||||||
|
value: _raw,
|
||||||
|
changeValue,
|
||||||
|
})
|
||||||
|
tableResultList.push(...rows)
|
||||||
|
})
|
||||||
|
tableResultList.sort((a, b) => {
|
||||||
|
if(a.level != b.level) return a.level - b.level
|
||||||
|
else {
|
||||||
|
return a.name > b.name ? 1 :-1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onBeforeMount(() => {
|
||||||
|
getVmoption()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<table class="table w-full table-compact">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
<th></th>
|
||||||
|
<th v-for="(k, i) in keyList" :key="i">{{ k }}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(map, i) in tableResultList" :key="i" class="hover">
|
||||||
|
<th>
|
||||||
|
<button class="btn btn-outline btn-xs btn-primary" @click.prevent="map.changeValue"
|
||||||
|
v-if="map.changeValue !== null">edit</button>
|
||||||
|
</th>
|
||||||
|
<template v-for="(k, j) in keyList" :key="j">
|
||||||
|
<th v-if="k === 'name' || k === 'level'">{{ map[k] }}</th>
|
||||||
|
<td v-else class="break-words"> {{ map[k] }}</td>
|
||||||
|
</template>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th v-for="(k, i) in keyList" :key="i">{{ k }}</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import permachine from '@/machines/perRequestMachine';
|
||||||
|
import { fetchStore } from '@/stores/fetch';
|
||||||
|
import { onBeforeMount, reactive } from 'vue';
|
||||||
|
import { interpret } from 'xstate';
|
||||||
|
const fetchS = fetchStore();
|
||||||
|
type ResultType = MergeObj<Perfcounter,{rowspan:number}>
|
||||||
|
const perfcounterList: ResultType[] = reactive([])
|
||||||
|
let keyList: (keyof Perfcounter)[] = [
|
||||||
|
"name",
|
||||||
|
"units",
|
||||||
|
"variability",
|
||||||
|
"value",
|
||||||
|
]
|
||||||
|
const getPerCounter = () => fetchS.baseSubmit(interpret(permachine), { action: "exec", command: "perfcounter -d" }).then(res => {
|
||||||
|
const result = (res as CommonRes).body.results[0]
|
||||||
|
if (result.type === "perfcounter") {
|
||||||
|
const perfcounters = result.perfCounters
|
||||||
|
perfcounterList.length = 0;
|
||||||
|
perfcounters.forEach(perfcouter => {
|
||||||
|
let result = {...perfcouter,rowspan:1}
|
||||||
|
result.value = result.value.toString()
|
||||||
|
perfcounterList.push(result)
|
||||||
|
})
|
||||||
|
perfcounterList.sort((a, b) => a.name > b.name ? 1 : -1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
getPerCounter()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<table class="table w-full table-compact">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th v-for="(v,i) in keyList" :key="i">{{v}}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="">
|
||||||
|
<tr v-for="(map, i) in perfcounterList" :key="i" class="hover">
|
||||||
|
<template v-for="(key,j) in keyList" :key="j">
|
||||||
|
<!-- 展示合并的单元格且定住name -->
|
||||||
|
<th v-if="key == 'name' && map.rowspan > 0" :rowspan="map.rowspan">
|
||||||
|
{{map[key]}}
|
||||||
|
</th>
|
||||||
|
<!-- 只有value才会裂变 -->
|
||||||
|
<td v-else-if="key === 'value'" >
|
||||||
|
<div class="break-all">{{map[key]}}</div>
|
||||||
|
</td>
|
||||||
|
<!-- 展示合并的单元格 -->
|
||||||
|
<td v-else-if="map.rowspan > 0" :rowspan="map.rowspan">
|
||||||
|
{{map[key]}}
|
||||||
|
</td>
|
||||||
|
</template>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th v-for="(v,i) in keyList" :key="i" class="break-words">{{v}}</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import permachine from '@/machines/perRequestMachine';
|
||||||
|
import { fetchStore } from '@/stores/fetch';
|
||||||
|
import { onBeforeMount, reactive } from 'vue';
|
||||||
|
import { interpret } from 'xstate';
|
||||||
|
const fetchS = fetchStore();
|
||||||
|
type ResultType = { "key": string, "value": string, rowspan: number };
|
||||||
|
const tableResultList: ResultType[] = reactive([])
|
||||||
|
const getSysenv = () => fetchS.baseSubmit(interpret(permachine), {
|
||||||
|
action: "exec",
|
||||||
|
command: "sysenv",
|
||||||
|
}).then(res => {
|
||||||
|
tableResultList.length = 0
|
||||||
|
let result = (res as CommonRes).body.results[0]
|
||||||
|
if (result.type == "sysenv") {
|
||||||
|
Object.entries(result.env).forEach(([key, value]) => {
|
||||||
|
let rows: ResultType[] = []
|
||||||
|
rows.push({
|
||||||
|
key, value, rowspan: 1
|
||||||
|
})
|
||||||
|
tableResultList.push(...rows)
|
||||||
|
})
|
||||||
|
tableResultList.sort((a, b) => a.key > b.key ? 1 : -1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onBeforeMount(() => {
|
||||||
|
getSysenv()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<table class="table w-full table-compact">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>key</th>
|
||||||
|
<th>value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(map, i) in tableResultList" :key="i" class="hover">
|
||||||
|
<th v-if="map.rowspan > 0" :rowspan="map.rowspan">{{map.key}}</th>
|
||||||
|
<td>{{map.value}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>key</th>
|
||||||
|
<th>value</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import permachine from '@/machines/perRequestMachine';
|
||||||
|
import { fetchStore } from '@/stores/fetch';
|
||||||
|
import { publicStore } from '@/stores/public';
|
||||||
|
import { onBeforeMount, reactive, ref, Ref } from 'vue';
|
||||||
|
import { interpret } from 'xstate';
|
||||||
|
const fetchS = fetchStore();
|
||||||
|
const publicS = publicStore()
|
||||||
|
type ResultType = { "key": string, "value": Ref<string>, rowspan: number, changeValue:()=>void};
|
||||||
|
const tableResultList: ResultType[] = reactive([])
|
||||||
|
|
||||||
|
const setSysprop = (key:string,value:string) => fetchS.baseSubmit(interpret(permachine),{
|
||||||
|
action: "exec",
|
||||||
|
command:`sysprop ${key} ${value}`
|
||||||
|
})
|
||||||
|
|
||||||
|
const getSysprop = () => fetchS.baseSubmit(interpret(permachine), {
|
||||||
|
action: "exec",
|
||||||
|
command: "sysprop",
|
||||||
|
}).then(res => {
|
||||||
|
let result = (res as CommonRes).body.results[0]
|
||||||
|
if (result.type == "sysprop") {
|
||||||
|
tableResultList.length = 0;
|
||||||
|
Object.entries(result.props).forEach(([key, value]) => {
|
||||||
|
let rows: ResultType[] = []
|
||||||
|
// 用来绑定读写
|
||||||
|
let _raw = ref(value)
|
||||||
|
const changeValue = publicS.inputDialogFactory(_raw,
|
||||||
|
(raw) => {
|
||||||
|
setSysprop(key, raw.trim()).then(res=>{
|
||||||
|
},err=>{
|
||||||
|
// 失败就回退
|
||||||
|
_raw.value = value
|
||||||
|
})
|
||||||
|
return raw.trim()
|
||||||
|
},
|
||||||
|
(input) => input.value)
|
||||||
|
rows.push({
|
||||||
|
key, value:_raw, rowspan: 1, changeValue
|
||||||
|
})
|
||||||
|
tableResultList.push(...rows)
|
||||||
|
})
|
||||||
|
tableResultList.sort((a, b) => a.key > b.key ? 1 : -1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onBeforeMount(() => {
|
||||||
|
getSysprop()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<table class="table w-full table-compact">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
<th></th>
|
||||||
|
<th>key</th>
|
||||||
|
<th>value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(map, i) in tableResultList" :key="i" class="hover">
|
||||||
|
<th v-if="map.rowspan > 0" :rowspan="map.rowspan">
|
||||||
|
<button class="btn btn-outline btn-xs btn-primary" @click.prevent="map.changeValue">edit</button>
|
||||||
|
</th>
|
||||||
|
<th v-if="map.rowspan > 0" :rowspan="map.rowspan">{{map.key}}</th>
|
||||||
|
<td>{{map.value}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>key</th>
|
||||||
|
<th>value</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import permachine from '@/machines/perRequestMachine';
|
||||||
|
import { fetchStore } from '@/stores/fetch';
|
||||||
|
import { publicStore } from '@/stores/public';
|
||||||
|
import { onBeforeMount, reactive, ref, Ref } from 'vue';
|
||||||
|
import { interpret } from 'xstate';
|
||||||
|
const fetchS = fetchStore();
|
||||||
|
const publicS = publicStore()
|
||||||
|
type ResultType = { name: string, origin: string, value: Ref<string>, writeable: string, changeValue: null|(() => void)
|
||||||
|
};
|
||||||
|
const tableResultList: ResultType[] = reactive([])
|
||||||
|
const keyList: (keyof VmOption)[] = [
|
||||||
|
"name",
|
||||||
|
"origin",
|
||||||
|
"writeable",
|
||||||
|
"value",
|
||||||
|
]
|
||||||
|
const setVmoption = (key: string, value: string) => fetchS.baseSubmit(interpret(permachine), {
|
||||||
|
action: "exec",
|
||||||
|
command: `vmoption ${key} ${value}`
|
||||||
|
})
|
||||||
|
|
||||||
|
const getVmoption = () => fetchS.baseSubmit(interpret(permachine), {
|
||||||
|
action: "exec",
|
||||||
|
command: "vmoption",
|
||||||
|
}).then(res => {
|
||||||
|
let result = (res as CommonRes).body.results[0]
|
||||||
|
if (result.type == "vmoption") {
|
||||||
|
tableResultList.length = 0;
|
||||||
|
result.vmOptions.forEach((vmoption) => {
|
||||||
|
let rows: ResultType[] = []
|
||||||
|
// 用来绑定读写
|
||||||
|
|
||||||
|
let _raw = ref(vmoption.value)
|
||||||
|
let changeValue = null
|
||||||
|
if(vmoption.writeable===true) {
|
||||||
|
changeValue = publicS.inputDialogFactory(_raw,
|
||||||
|
(raw) => {
|
||||||
|
setVmoption(vmoption.name, raw.trim()).then(res => {
|
||||||
|
}, err => {
|
||||||
|
// 失败就回退
|
||||||
|
_raw.value = vmoption.value
|
||||||
|
})
|
||||||
|
return raw.trim()
|
||||||
|
},
|
||||||
|
(input) => input.value)
|
||||||
|
}
|
||||||
|
rows.push({
|
||||||
|
name: vmoption.name,
|
||||||
|
value: _raw,
|
||||||
|
changeValue,
|
||||||
|
writeable: vmoption.writeable.toString(),
|
||||||
|
origin: vmoption.origin
|
||||||
|
})
|
||||||
|
tableResultList.push(...rows)
|
||||||
|
})
|
||||||
|
tableResultList.sort((a, b) => a.name > b.name ? 1 : -1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onBeforeMount(() => {
|
||||||
|
getVmoption()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<table class="table w-full table-compact">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
<th></th>
|
||||||
|
<th v-for="(k, i) in keyList" :key="i">{{k}}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(map, i) in tableResultList" :key="i" class="hover">
|
||||||
|
<th >
|
||||||
|
<button class="btn btn-outline btn-xs btn-primary" @click.prevent="map.changeValue" v-if="map.changeValue !== null">edit</button>
|
||||||
|
</th>
|
||||||
|
<template v-for="(k,j) in keyList" :key="j">
|
||||||
|
<th v-if="k==='name'">{{map[k]}}</th>
|
||||||
|
<td v-else class="break-words"> {{map[k]}}</td>
|
||||||
|
</template>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th v-for="(k, i) in keyList" :key="i">{{k}}</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue