github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 16:45:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix stack graph

Browse Source
This commit is contained in:
Qiuxia Fan 2022-04-22 18:34:48 +08:00
parent 3910b4bab6
commit 843adabd31
4 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/store/modules/ebpf.ts
View File

@ -118,10 +118,9 @@ export const ebpfStore = defineStore({
this.eBPFSchedules = eBPFSchedules; this.eBPFSchedules = eBPFSchedules;
if (!eBPFSchedules.length) { if (!eBPFSchedules.length) {
this.eBPFSchedules = []; this.eBPFSchedules = [];
this.analyzeTrees = [];
return res.data; return res.data;
} }
this.analyzeTrees = [];
return res.data; return res.data;
}, },
async getEBPFAnalyze(params: { async getEBPFAnalyze(params: {
@ -136,13 +135,12 @@ export const ebpfStore = defineStore({
this.analyzeTrees = []; this.analyzeTrees = [];
return res.data; return res.data;
} }
const { analysisEBPFResult, tip } = res.data.data; const { analysisEBPFResult } = res.data.data;
if (tip) { if (!analysisEBPFResult) {
this.analyzeTrees = []; this.analyzeTrees = [];
return res.data; return res.data;
} }
if (analysisEBPFResult.tip) {
if (!analysisEBPFResult) {
this.analyzeTrees = []; this.analyzeTrees = [];
return res.data; return res.data;
} }

7
src/views/dashboard/related/ebpf/Content.vue
View File

@ -17,9 +17,11 @@ limitations under the License. -->
<TaskList /> <TaskList />
<div class="vis-graph ml-5"> <div class="vis-graph ml-5">
<EBPFSchedules /> <EBPFSchedules />
<div class="stack">
<EBPFStack /> <EBPFStack />
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import TaskList from "./components/TaskList.vue"; import TaskList from "./components/TaskList.vue";
@ -36,4 +38,9 @@ import EBPFStack from "./components/EBPFStack.vue";
height: 100%; height: 100%;
width: calc(100% - 300px); width: calc(100% - 300px);
} }
.stack {
width: 100%;
overflow: auto;
}
</style> </style>

6
src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
View File

@ -78,7 +78,7 @@ const labels = ref<Option[]>([{ label: "All", value: "0" }]);
const processes = ref<Process[]>([]); const processes = ref<Process[]>([]);
const selectedLabels = ref<string[]>(["0"]); const selectedLabels = ref<string[]>(["0"]);
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") => const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern); new Date(dayjs(date).format(pattern));
function changeLabels(opt: any[]) { function changeLabels(opt: any[]) {
const arr = opt.map((d) => d.value); const arr = opt.map((d) => d.value);
@ -131,7 +131,7 @@ async function analyzeEBPF() {
return; return;
} }
if (res.data.analysisEBPFResult.tip) { if (res.data.analysisEBPFResult.tip) {
ElMessage.info(res.data.analysisEBPFResult.tip); ElMessage.error(res.data.analysisEBPFResult.tip);
} }
} }
@ -158,6 +158,8 @@ function visTimeline() {
const items: any = new DataSet(schedules); const items: any = new DataSet(schedules);
const options = { const options = {
height: 250, height: 250,
width: "100%",
locale: "en",
}; };
if (!timeline.value) { if (!timeline.value) {
return; return;

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

@ -81,10 +81,12 @@ function processTree(arr: StackElement[]) {
min = item.dumpCount; min = item.dumpCount;
} }
} }
const scale = d3.scaleLinear().domain([min, max]).range([1, 150]); const scale = d3.scaleLinear().domain([min, max]).range([1, 200]);
for (const item of copyArr) { for (const item of copyArr) {
if (item.parentId === "0") { if (item.parentId === "0") {
const val = Number(scale(item.dumpCount).toFixed(4));
res = item; res = item;
res.value = val;
} }
for (const key in obj) { for (const key in obj) {
if (item.originId === obj[key].parentId) { if (item.originId === obj[key].parentId) {
@ -105,9 +107,10 @@ function processTree(arr: StackElement[]) {
for (const child of node.children) { for (const child of node.children) {
val = child.value + val; val = child.value + val;
} }
node.value = val; node.value = node.value < val ? val : node.value;
} }
}); });
return res; return res;
} }