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

update trace

Browse Source
This commit is contained in:
Fine 2025-03-24 15:36:46 +08:00
parent 033a760b00
commit 1d2b1192f6
4 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/related/trace/components/D3Graph/Index.vue
View File

@ -15,7 +15,7 @@ limitations under the License. -->
<Icon iconName="spinner" size="sm" />
</div>
<div ref="traceGraph" class="d3-graph"></div>
<el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
<el-dialog v-model="showDetail" :destroy-on-close="true" @closed="showDetail = false">
<SpanDetail :currentSpan="currentSpan" />
</el-dialog>
</template>

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

@ -87,7 +87,7 @@ limitations under the License. -->
{{ t("relatedTraceLogs") }}
</el-button>
</div>
<el-dialog v-model="showEventDetail" :destroy-on-close="true" fullscreen @closed="showEventDetail = false">
<el-dialog v-model="showEventDetail" :destroy-on-close="true" @closed="showEventDetail = false">
<div>
<div class="mb-10">
<span class="grey title">Name:</span>
@ -115,7 +115,7 @@ limitations under the License. -->
</div>
</div>
</el-dialog>
<el-dialog v-model="showRelatedLogs" :destroy-on-close="true" fullscreen @closed="showRelatedLogs = false">
<el-dialog v-model="showRelatedLogs" :destroy-on-close="true" @closed="showRelatedLogs = false">
<el-pagination
v-model="pageNum"
:page-size="pageSize"

5
src/views/dashboard/related/trace/components/List.vue
View File

@ -31,8 +31,10 @@ limitations under the License. -->
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
import * as d3 from "d3";
import { useAppStoreWithOut } from "@/store/modules/app";
import type { Span } from "@/types/trace";
import Graph from "./D3Graph/Index.vue";
import { Themes } from "@/constants/data";
/* global defineProps, Recordable*/
const props = defineProps({
@ -40,6 +42,7 @@ limitations under the License. -->
traceId: { type: String, default: "" },
});
const { t } = useI18n();
const appStore = useAppStoreWithOut();
const list = computed(() => Array.from(new Set(props.data.map((i: Span) => i.serviceCode))));
function computedScale(i: number) {
@ -58,7 +61,7 @@ limitations under the License. -->
const context: any = canvas.getContext("2d");
canvas.width = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientWidth;
canvas.height = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientHeight;
context.fillStyle = "#fff";
context.fillStyle = appStore.theme === Themes.Dark ? "#212224" : `#fff`;
context.fillRect(0, 0, canvas.width, canvas.height);
const image = new Image();
image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`;

4
src/views/dashboard/related/trace/utils/d3-trace-list.ts
View File

@ -246,7 +246,7 @@ export default class ListGraph {
})
.attr("cy", -5)
.attr("fill", "none")
.attr("stroke", appStore.theme === Themes.Dark ? "#666" : "#e66")
.attr("stroke", "#e66")
.style("opacity", (d: Recordable) => {
const events = d.data.attachedEvents;
if (events && events.length) {
@ -259,7 +259,7 @@ export default class ListGraph {
.append("text")
.attr("x", 267)
.attr("y", -1)
.attr("fill", appStore.theme === Themes.Dark ? "#666" : "#e66")
.attr("fill", "#e66")
.style("font-size", "10px")
.text((d: Recordable) => {
const events = d.data.attachedEvents;