mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-18 08:25:25 +00:00
fix: update trace list
This commit is contained in:
Qiuxia Fan
parent
ceceabec66
commit
437ed482be
@ -89,7 +89,8 @@
|
||||
"@typescript-eslint/explicit-function-return-type": "off",
|
||||
"no-use-before-define": "off",
|
||||
"@typescript-eslint/no-use-before-define": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off"
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/no-this-alias": "off"
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
|
||||
16
src/assets/icons/issue-open-m.svg
Executable file
16
src/assets/icons/issue-open-m.svg
Executable file
@ -0,0 +1,16 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/issue-open-m</title><path d="M8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm0 2A7 7 0 1 1 8 1a7 7 0 0 1 0 14z" id="a"/></svg>
|
||||
|
After Width: | Height: | Size: 1017 B |
@ -11,92 +11,96 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div
|
||||
class="trace-detail-wrapper clear"
|
||||
v-if="traceStore.currentTrace.endpointNames"
|
||||
>
|
||||
<h5 class="mb-5 mt-0">
|
||||
<Icon
|
||||
icon="clear"
|
||||
v-if="traceStore.currentTrace.isError"
|
||||
class="red mr-5 sm"
|
||||
/>
|
||||
<span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
|
||||
<!-- <div class="trace-log-btn bg-blue r mr-10" @click="searchTraceLogs">
|
||||
<div class="trace-detail">
|
||||
<div
|
||||
class="trace-detail-wrapper clear"
|
||||
v-if="traceStore.currentTrace.endpointNames"
|
||||
>
|
||||
<h5 class="mb-5 mt-0">
|
||||
<Icon
|
||||
icon="clear"
|
||||
v-if="traceStore.currentTrace.isError"
|
||||
class="red mr-5 sm"
|
||||
/>
|
||||
<span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
|
||||
<!-- <div class="trace-log-btn bg-blue r mr-10" @click="searchTraceLogs">
|
||||
{{ t("viewLogs") }}
|
||||
</div> -->
|
||||
</h5>
|
||||
<div class="mb-5 blue sm">
|
||||
<Selector
|
||||
size="small"
|
||||
:value="
|
||||
traceStore.currentTrace.traceIds &&
|
||||
traceStore.currentTrace.traceIds[0] &&
|
||||
traceStore.currentTrace.traceIds[0].value
|
||||
"
|
||||
:options="traceStore.currentTrace.traceIds"
|
||||
@change="changeTraceId"
|
||||
class="trace-detail-ids"
|
||||
/>
|
||||
<Icon
|
||||
size="sm"
|
||||
class="icon grey link-hover cp ml-5"
|
||||
iconName="review-list"
|
||||
@click="handleClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-h item">
|
||||
<div>
|
||||
<div class="tag mr-5">{{ t("start") }}</div>
|
||||
<span class="mr-15 sm">
|
||||
{{ dateFormat(parseInt(traceStore.currentTrace.start)) }}
|
||||
</span>
|
||||
<div class="tag mr-5">{{ t("duration") }}</div>
|
||||
<span class="mr-15 sm">{{ traceStore.currentTrace.duration }} ms</span>
|
||||
<div class="tag mr-5">{{ t("spans") }}</div>
|
||||
<span class="sm">{{ traceStore.traceSpans.length }}</span>
|
||||
</h5>
|
||||
<div class="mb-5 blue sm">
|
||||
<Selector
|
||||
size="small"
|
||||
:value="
|
||||
traceStore.currentTrace.traceIds &&
|
||||
traceStore.currentTrace.traceIds[0] &&
|
||||
traceStore.currentTrace.traceIds[0].value
|
||||
"
|
||||
:options="traceStore.currentTrace.traceIds"
|
||||
@change="changeTraceId"
|
||||
class="trace-detail-ids"
|
||||
/>
|
||||
<Icon
|
||||
size="sm"
|
||||
class="icon grey link-hover cp ml-5"
|
||||
iconName="review-list"
|
||||
@click="handleClick"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
class="grey"
|
||||
:class="{ ghost: displayMode !== 'list' }"
|
||||
@click="displayMode = 'list'"
|
||||
>
|
||||
<Icon class="mr-5" size="sm" iconName="list-bulleted" />
|
||||
{{ t("list") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
class="grey"
|
||||
:class="{ ghost: displayMode !== 'tree' }"
|
||||
@click="displayMode = 'tree'"
|
||||
>
|
||||
<Icon class="mr-5" size="sm" iconName="issue-child" />
|
||||
{{ t("tree") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
class="grey"
|
||||
:class="{ ghost: displayMode !== 'table' }"
|
||||
@click="displayMode = 'table'"
|
||||
>
|
||||
<Icon class="mr-5" size="sm" iconName="table" />
|
||||
{{ t("table") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
class="grey"
|
||||
:class="{ ghost: displayMode !== 'statistics' }"
|
||||
@click="displayMode = 'statistics'"
|
||||
>
|
||||
<Icon class="mr-5" size="sm" iconName="statistics-bulleted" />
|
||||
{{ t("statistics") }}
|
||||
</el-button>
|
||||
<div class="flex-h item">
|
||||
<div>
|
||||
<div class="tag mr-5">{{ t("start") }}</div>
|
||||
<span class="mr-15 sm">
|
||||
{{ dateFormat(parseInt(traceStore.currentTrace.start)) }}
|
||||
</span>
|
||||
<div class="tag mr-5">{{ t("duration") }}</div>
|
||||
<span class="mr-15 sm"
|
||||
>{{ traceStore.currentTrace.duration }} ms</span
|
||||
>
|
||||
<div class="tag mr-5">{{ t("spans") }}</div>
|
||||
<span class="sm">{{ traceStore.traceSpans.length }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
class="grey"
|
||||
:class="{ ghost: displayMode !== 'list' }"
|
||||
@click="displayMode = 'list'"
|
||||
>
|
||||
<Icon class="mr-5" size="sm" iconName="list-bulleted" />
|
||||
{{ t("list") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
class="grey"
|
||||
:class="{ ghost: displayMode !== 'tree' }"
|
||||
@click="displayMode = 'tree'"
|
||||
>
|
||||
<Icon class="mr-5" size="sm" iconName="issue-child" />
|
||||
{{ t("tree") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
class="grey"
|
||||
:class="{ ghost: displayMode !== 'table' }"
|
||||
@click="displayMode = 'table'"
|
||||
>
|
||||
<Icon class="mr-5" size="sm" iconName="table" />
|
||||
{{ t("table") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
class="grey"
|
||||
:class="{ ghost: displayMode !== 'statistics' }"
|
||||
@click="displayMode = 'statistics'"
|
||||
>
|
||||
<Icon class="mr-5" size="sm" iconName="statistics-bulleted" />
|
||||
{{ t("statistics") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<List
|
||||
v-if="displayMode == 'list' && traceStore.currentTrace.endpointNames"
|
||||
:data="traceStore.traceSpans"
|
||||
:traceId="traceStore.currentTrace.traceIds[0].value"
|
||||
/>
|
||||
</div>
|
||||
<List
|
||||
v-if="displayMode == 'list' && traceStore.currentTrace.endpointNames"
|
||||
:data="traceStore.traceSpans"
|
||||
:traceId="traceStore.currentTrace.traceIds[0].value"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import dayjs from "dayjs";
|
||||
@ -141,6 +145,11 @@ function changeTraceId(opt: Option[]) {
|
||||
// }
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trace-detail {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.trace-detail-wrapper {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
|
||||
@ -11,24 +11,24 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="time-charts scroll_hide">
|
||||
<div class="time-charts">
|
||||
<div class="trace-t-loading" v-show="loading">
|
||||
<Icon iconName="spinner" size="sm" />
|
||||
</div>
|
||||
<transition-group name="fade" tag="a" class="mb-5">
|
||||
<div class="service-code">
|
||||
<span
|
||||
class="time-charts-item mr-10"
|
||||
v-for="(i, index) in data"
|
||||
class="time-charts-item mr-5"
|
||||
v-for="(i, index) in list"
|
||||
:key="index"
|
||||
:style="`color:${computedScale(index)}`"
|
||||
>
|
||||
<svg class="icon vm mr-5 sm">
|
||||
<use xlink:href="#issue-open-m"></use>
|
||||
</svg>
|
||||
<Icon iconName="issue-open-m" class="mr-5" size="sm" />
|
||||
<span>{{ i }}</span>
|
||||
</span>
|
||||
</transition-group>
|
||||
<a class="rk-btn r vm tc" @click="downloadTrace">{{ t("exportImage") }}</a>
|
||||
<el-button class="btn" type="primary" @click="downloadTrace">
|
||||
{{ t("exportImage") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="trace-list">
|
||||
<div ref="traceList"></div>
|
||||
</div>
|
||||
@ -41,9 +41,8 @@ import _ from "lodash";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import * as d3 from "d3";
|
||||
import ListGraph from "./utils/d3-trace";
|
||||
import copy from "@/utils/copy";
|
||||
import { Span, Trace } from "@/types/trace";
|
||||
import { Option } from "@/types/app";
|
||||
import { Span } from "@/types/trace";
|
||||
|
||||
/* global defineProps, Nullable*/
|
||||
const props = defineProps({
|
||||
data: { type: Array as PropType<Span[]>, default: () => [] },
|
||||
@ -55,7 +54,7 @@ const showDetail = ref<boolean>(false);
|
||||
const fixSpansSize = ref<number>(0);
|
||||
const segmentId = ref<any>([]);
|
||||
const currentSpan = ref<Array<Span>>([]);
|
||||
const list = ref<any>([]);
|
||||
const list = ref<string[]>([]);
|
||||
const tree = ref<any>(null);
|
||||
const traceList = ref<Nullable<HTMLDivElement>>(null);
|
||||
|
||||
@ -141,7 +140,7 @@ function changeTree() {
|
||||
if (props.data.length === 0) {
|
||||
return [];
|
||||
}
|
||||
list.value = Array.from(new Set(props.data.map((i: any) => i.serviceCode)));
|
||||
list.value = Array.from(new Set(props.data.map((i: Span) => i.serviceCode)));
|
||||
segmentId.value = [];
|
||||
const segmentGroup: any = {};
|
||||
const segmentIdGroup: any = [];
|
||||
@ -335,9 +334,10 @@ watch(
|
||||
<style lang="scss" scoped>
|
||||
.time-charts {
|
||||
overflow: auto;
|
||||
padding: 10px 30px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
min-height: 150px;
|
||||
height: calc(100% - 95px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.trace-node .group {
|
||||
@ -387,4 +387,8 @@ watch(
|
||||
overflow: auto;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.btn {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
import * as d3 from "d3";
|
||||
import d3tip from "d3-tip";
|
||||
import { Span, Trace } from "@/types/trace";
|
||||
import { func } from "vue-types";
|
||||
|
||||
const type = {
|
||||
MQ: "#bf99f8",
|
||||
@ -49,7 +50,7 @@ export default class ListGraph {
|
||||
constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
|
||||
this.handleSelectSpan = handleSelectSpan;
|
||||
this.el = el;
|
||||
this.width = el.clientWidth;
|
||||
this.width = el.clientWidth - 20;
|
||||
this.height = el.clientHeight;
|
||||
this.svg = d3
|
||||
.select(this.el)
|
||||
@ -61,23 +62,23 @@ export default class ListGraph {
|
||||
this.tip = (d3tip as any)()
|
||||
.attr("class", "d3-tip")
|
||||
.offset([-8, 0])
|
||||
.html(
|
||||
(d: any) => `
|
||||
<div class="mb-5">${d.data.label}</div>
|
||||
${
|
||||
d.data.dur
|
||||
? '<div class="sm">SelfDuration: ' + d.data.dur + "ms</div>"
|
||||
: ""
|
||||
}
|
||||
${
|
||||
d.data.endTime - d.data.startTime
|
||||
? '<div class="sm">TotalDuration: ' +
|
||||
(d.data.endTime - d.data.startTime) +
|
||||
"ms</div>"
|
||||
: ""
|
||||
}
|
||||
`
|
||||
);
|
||||
.html((d: any) => {
|
||||
return `
|
||||
<div class="mb-5">${d.data.label}</div>
|
||||
${
|
||||
d.data.dur
|
||||
? '<div class="sm">SelfDuration: ' + d.data.dur + "ms</div>"
|
||||
: ""
|
||||
}
|
||||
${
|
||||
d.data.endTime - d.data.startTime
|
||||
? '<div class="sm">TotalDuration: ' +
|
||||
(d.data.endTime - d.data.startTime) +
|
||||
"ms</div>"
|
||||
: ""
|
||||
}
|
||||
`;
|
||||
});
|
||||
this.svg.call(this.tip);
|
||||
}
|
||||
diagonal(d: any) {
|
||||
@ -135,6 +136,7 @@ export default class ListGraph {
|
||||
scope.update(d);
|
||||
}
|
||||
update(source: any, callback: any) {
|
||||
const t = this;
|
||||
const nodes = this.root.descendants();
|
||||
let index = -1;
|
||||
this.root.eachBefore((n: any) => {
|
||||
@ -150,11 +152,11 @@ export default class ListGraph {
|
||||
.attr("transform", `translate(${source.y0},${source.x0})`)
|
||||
.attr("class", "trace-node")
|
||||
.style("opacity", 0)
|
||||
.on("mouseover", (d: Trace) => {
|
||||
this.tip.show(d, this);
|
||||
.on("mouseover", function (event: any, d: Trace) {
|
||||
t.tip.show(d, this);
|
||||
})
|
||||
.on("mouseout", (d: Trace) => {
|
||||
this.tip.hide(d, this);
|
||||
.on("mouseout", function (event: any, d: Trace) {
|
||||
t.tip.hide(d, this);
|
||||
})
|
||||
.on("click", (d: Trace) => {
|
||||
if (this.handleSelectSpan) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user