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

update

Browse Source
This commit is contained in:
Fine 2022-11-23 16:36:58 +08:00
parent 35fd4841b0
commit a0d9734f91
2 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/store/modules/trace.ts
View File

@ -175,7 +175,23 @@ export const traceStore = defineStore({
if (res.data.errors) { if (res.data.errors) {
return res.data; return res.data;
} }
this.setTraceSpans(res.data.data.trace.spans || []); const data = res.data.data.trace.spans;
data[4].attachedEvents = [
{
startTime: {
seconds: 1669102205296,
nanos: 1669102205296,
},
event: "event",
endTime: {
seconds: 1669102212791,
nanos: 1669102212791,
},
tags: [{ key: "test", value: "test" }],
summary: [{ key: "test", value: 123 }],
},
];
this.setTraceSpans(data || []);
return res.data; return res.data;
}, },
async getSpanLogs(params: any) { async getSpanLogs(params: any) {

39
src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
View File

@ -42,7 +42,9 @@ limitations under the License. -->
<span class="g-sm-4 grey">{{ t("isError") }}:</span> <span class="g-sm-4 grey">{{ t("isError") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.isError }}</span> <span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
</div> </div>
<h5 class="mb-10">{{ t("tags") }}.</h5> <h5 class="mb-10" v-if="currentSpan.tags && currentSpan.tags.length">
{{ t("tags") }}.
</h5>
<div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key"> <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
<span class="g-sm-4 grey">{{ i.key }}:</span> <span class="g-sm-4 grey">{{ i.key }}:</span>
<span class="g-sm-8 wba"> <span class="g-sm-8 wba">
@ -77,8 +79,17 @@ limitations under the License. -->
<pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre> <pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
</div> </div>
</div> </div>
<h5 class="mb-10">{{ t("events") }}.</h5> <h5
<div class="attach-events" ref="timeline"></div> class="mb-10"
v-if="currentSpan.attachedEvent && currentSpan.attachedEvent.length"
>
{{ t("events") }}.
</h5>
<div
class="attach-events"
ref="timeline"
v-if="currentSpan.attachedEvent && currentSpan.attachedEvent.length"
></div>
<el-button class="popup-btn" type="primary" @click="getTaceLogs"> <el-button class="popup-btn" type="primary" @click="getTaceLogs">
{{ t("relatedTraceLogs") }} {{ t("relatedTraceLogs") }}
</el-button> </el-button>
@ -211,22 +222,7 @@ function visTimeline() {
visGraph.value.destroy(); visGraph.value.destroy();
} }
const h = timeline.value.getBoundingClientRect().height; const h = timeline.value.getBoundingClientRect().height;
// const attachedEvents = props.currentSpan.attachedEvents || []; const attachedEvents = props.currentSpan.attachedEvents || [];
const attachedEvents: SpanAttachedEvent[] = [
{
startTime: {
seconds: 1669102205296,
nanos: 1669102205296,
},
event: "event",
endTime: {
seconds: 1669102212791,
nanos: 1669102212791,
},
tags: [{ key: "test", value: "test" }],
summary: [{ key: "test", value: 123 }],
},
];
const events: any[] = attachedEvents.map( const events: any[] = attachedEvents.map(
(d: SpanAttachedEvent, index: number) => { (d: SpanAttachedEvent, index: number) => {
return { return {
@ -240,11 +236,12 @@ function visTimeline() {
} }
); );
const items = new DataSet(events); const items = new DataSet(events);
const options = { const options: any = {
height: h, height: h,
width: "100%", width: "100%",
locale: "en", locale: "en",
autoResize: true, groupHeightMode: "fitItems",
autoResize: false,
}; };
visGraph.value = new Timeline(timeline.value, items, options); visGraph.value = new Timeline(timeline.value, items, options);
visGraph.value.on("select", (data: { items: number[] }) => { visGraph.value.on("select", (data: { items: number[] }) => {