github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-07 02:22:55 +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" /> <Icon iconName="spinner" size="sm" />
</div> </div>
<div ref="traceGraph" class="d3-graph"></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" /> <SpanDetail :currentSpan="currentSpan" />
</el-dialog> </el-dialog>
</template> </template>

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

@ -87,7 +87,7 @@ limitations under the License. -->
{{ t("relatedTraceLogs") }} {{ t("relatedTraceLogs") }}
</el-button> </el-button>
</div> </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>
<div class="mb-10"> <div class="mb-10">
<span class="grey title">Name:</span> <span class="grey title">Name:</span>
@ -115,7 +115,7 @@ limitations under the License. -->
</div> </div>
</div> </div>
</el-dialog> </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 <el-pagination
v-model="pageNum" v-model="pageNum"
:page-size="pageSize" :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 type { PropType } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import * as d3 from "d3"; import * as d3 from "d3";
import { useAppStoreWithOut } from "@/store/modules/app";
import type { Span } from "@/types/trace"; import type { Span } from "@/types/trace";
import Graph from "./D3Graph/Index.vue"; import Graph from "./D3Graph/Index.vue";
import { Themes } from "@/constants/data";
/* global defineProps, Recordable*/ /* global defineProps, Recordable*/
const props = defineProps({ const props = defineProps({
@ -40,6 +42,7 @@ limitations under the License. -->
traceId: { type: String, default: "" }, traceId: { type: String, default: "" },
}); });
const { t } = useI18n(); const { t } = useI18n();
const appStore = useAppStoreWithOut();
const list = computed(() => Array.from(new Set(props.data.map((i: Span) => i.serviceCode)))); const list = computed(() => Array.from(new Set(props.data.map((i: Span) => i.serviceCode))));
function computedScale(i: number) { function computedScale(i: number) {
@ -58,7 +61,7 @@ limitations under the License. -->
const context: any = canvas.getContext("2d"); const context: any = canvas.getContext("2d");
canvas.width = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientWidth; 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; 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); context.fillRect(0, 0, canvas.width, canvas.height);
const image = new Image(); const image = new Image();
image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`; 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("cy", -5)
.attr("fill", "none") .attr("fill", "none")
.attr("stroke", appStore.theme === Themes.Dark ? "#666" : "#e66") .attr("stroke", "#e66")
.style("opacity", (d: Recordable) => { .style("opacity", (d: Recordable) => {
const events = d.data.attachedEvents; const events = d.data.attachedEvents;
if (events && events.length) { if (events && events.length) {
@ -259,7 +259,7 @@ export default class ListGraph {
.append("text") .append("text")
.attr("x", 267) .attr("x", 267)
.attr("y", -1) .attr("y", -1)
.attr("fill", appStore.theme === Themes.Dark ? "#666" : "#e66") .attr("fill", "#e66")
.style("font-size", "10px") .style("font-size", "10px")
.text((d: Recordable) => { .text((d: Recordable) => {
const events = d.data.attachedEvents; const events = d.data.attachedEvents;