github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 00:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

update content

Browse Source
This commit is contained in:
Fine 2024-11-26 10:34:50 +08:00
parent d5b5bf484f
commit 94cd9fa01f
4 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/dashboard/related/async-profiling/Content.vue
View File

@ -15,17 +15,24 @@ limitations under the License. -->
<template> <template>
<div class="flex-h content"> <div class="flex-h content">
<TaskList /> <TaskList />
<div class="vis-graph ml-5">Profiling</div> <div class="vis-graph ml-5">
<div class="filter">
<Filter />
</div>
<div class="stack">
<EBPFStack :type="ComponentType" />
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useAsyncProfilingStore } from "@/store/modules/async-profiling"; import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
import TaskList from "./components/TaskList.vue"; import TaskList from "./components/TaskList.vue";
import Filter from "./components/Filter.vue";
import EBPFStack from "@/views/dashboard/related/ebpf/components/EBPFStack.vue";
import { ComponentType } from "@/views/dashboard/related/ebpf/components/data";
const asyncProfilingStore = useAsyncProfilingStore(); const asyncProfilingStore = useAsyncProfilingStore();
@ -35,14 +42,6 @@ limitations under the License. -->
ElMessage.error(resp.errors); ElMessage.error(resp.errors);
} }
}); });
/* global defineProps */
defineProps({
config: {
type: Object as PropType<any>,
default: () => ({}),
},
});
const { t } = useI18n();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
@ -59,9 +58,16 @@ limitations under the License. -->
width: calc(100% - 330px); width: calc(100% - 330px);
} }
.text { .stack {
width: 100%; width: 100%;
text-align: center; overflow: auto;
margin-top: 30px; height: calc(100% - 100px);
padding-bottom: 10px;
}
.filter {
height: 90px;
border-bottom: 1px solid $disabled-color;
padding-right: 10px;
} }
</style> </style>

2
src/views/dashboard/related/continuous-profiling/data.ts
View File

@ -29,8 +29,6 @@ export const TargetTypes = [
{ label: "NETWORK", value: "NETWORK" }, { label: "NETWORK", value: "NETWORK" },
]; ];
export const ComponentType = "CONTINOUS_PROFILING";
export const HeaderLabels = [ export const HeaderLabels = [
{ value: "triggeredCount", label: "Triggered Count", width: 150 }, { value: "triggeredCount", label: "Triggered Count", width: 150 },
{ value: "lastTriggerTime", label: "Last Trigger Time", width: 170 }, { value: "lastTriggerTime", label: "Last Trigger Time", width: 170 },

7
src/views/dashboard/related/ebpf/components/EBPFStack.vue
View File

@ -23,10 +23,9 @@ limitations under the License. -->
import d3tip from "d3-tip"; import d3tip from "d3-tip";
import { flamegraph } from "d3-flame-graph"; import { flamegraph } from "d3-flame-graph";
import { useEbpfStore } from "@/store/modules/ebpf"; import { useEbpfStore } from "@/store/modules/ebpf";
import { useContinousProfilingStore } from "@/store/modules/continous-profiling"; import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
import { ComponentType } from "@/views/dashboard/related/continuous-profiling/data";
import type { StackElement } from "@/types/ebpf"; import type { StackElement } from "@/types/ebpf";
import { AggregateTypes } from "./data"; import { AggregateTypes, ComponentType } from "./data";
import "d3-flame-graph/dist/d3-flamegraph.css"; import "d3-flame-graph/dist/d3-flamegraph.css";
import { treeForeach } from "@/utils/flameGraph"; import { treeForeach } from "@/utils/flameGraph";
@ -37,7 +36,7 @@ limitations under the License. -->
default: "", default: "",
}, },
}); });
const ebpfStore = props.type === ComponentType ? useContinousProfilingStore() : useEbpfStore(); const ebpfStore = props.type === ComponentType ? useAsyncProfilingStore() : useEbpfStore();
const stackTree = ref<Nullable<StackElement>>(null); const stackTree = ref<Nullable<StackElement>>(null);
const selectStack = ref<Nullable<StackElement>>(null); const selectStack = ref<Nullable<StackElement>>(null);
const graph = ref<Nullable<HTMLDivElement>>(null); const graph = ref<Nullable<HTMLDivElement>>(null);

2
src/views/dashboard/related/ebpf/components/data.ts
View File

@ -57,3 +57,5 @@ export const TableHeader = [
{ property: "name", label: "Name" }, { property: "name", label: "Name" },
{ property: "instanceName", label: "Instance Name" }, { property: "instanceName", label: "Instance Name" },
]; ];
export const ComponentType = "ASYNC_PROFILING";