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

feat: update trace list

Browse Source
This commit is contained in:
Fine 2023-11-13 11:25:36 +08:00
parent b56a503c66
commit 6b38ff6b2f
9 changed files with 64 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/tools/EXIT.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 269 B

After

Width:  |  Height:  |  Size: 259 B

5
src/constants/data.ts
View File

@ -26,3 +26,8 @@ export const Languages = [
{ label: "Chinese", value: "zh" },
{ label: "Spanish", value: "es" },
];
export enum Themes {
Dark = "dark",
Light = "light",
}

5
src/hooks/useEcharts.ts
View File

@ -31,6 +31,7 @@ import { useEventListener } from "./useEventListener";
import { useBreakpoint } from "./useBreakpoint";
import echarts from "@/utils/echarts";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
export type ECOption = echarts.ComposeOption<
| BarSeriesOption
@ -47,7 +48,7 @@ export type ECOption = echarts.ComposeOption<
export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
const appStore = useAppStoreWithOut();
const getDarkMode = computed(() => {
return appStore.theme === "default" ? "light" : theme;
return appStore.theme === "default" ? Themes.Light : theme;
});
let chartInstance: Nullable<echarts.ECharts> = null;
let resizeFn: Fn = resize;
@ -57,7 +58,7 @@ export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" |
resizeFn = useDebounceFn(resize, 200);
const getOptions = computed(() => {
if (getDarkMode.value !== "dark") {
if (getDarkMode.value !== Themes.Dark) {
return cacheOptions.value as ECOption;
}
return {

13
src/layout/components/NavBar.vue
View File

@ -78,6 +78,7 @@ limitations under the License. -->
import type { DashboardItem } from "@/types/dashboard";
import router from "@/router";
import { ArrowRight, Moon, Sunny } from "@element-plus/icons-vue";
import { Themes } from "@/constants/data";
/*global Indexable */
const { t, te } = useI18n();
@ -98,13 +99,13 @@ limitations under the License. -->
const root = document.documentElement;
if (theme.value) {
root.classList.add("dark");
root.classList.remove("light");
appStore.setTheme("dark");
root.classList.add(Themes.Dark);
root.classList.remove(Themes.Light);
appStore.setTheme(Themes.Dark);
} else {
root.classList.add("light");
root.classList.remove("dark");
appStore.setTheme("light");
root.classList.add(Themes.Light);
root.classList.remove(Themes.Dark);
appStore.setTheme(Themes.Light);
}
}

3
src/store/modules/app.ts
View File

@ -23,6 +23,7 @@ import type { AxiosResponse } from "axios";
import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
import { TimeType } from "@/constants/data";
import type { MenuOptions, SubItem } from "@/types/app";
import { Themes } from "@/constants/data";
/*global Nullable*/
interface AppState {
durationRow: Recordable;
@ -57,7 +58,7 @@ export const appStore = defineStore({
isMobile: false,
reloadTimer: null,
allMenus: [],
theme: "dark",
theme: Themes.Dark,
}),
getters: {
duration(): Duration {

7
src/views/dashboard/graphs/Bar.vue
View File

@ -25,6 +25,7 @@ limitations under the License. -->
import useLegendProcess from "@/hooks/useLegendProcessor";
import Legend from "./components/Legend.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineProps, defineEmits */
const emits = defineEmits(["click"]);
@ -93,11 +94,11 @@ limitations under the License. -->
top: 0,
left: 0,
itemWidth: 12,
backgroundColor: appStore.theme === "dark" ? "#333" : "#fff",
borderColor: appStore.theme === "dark" ? "#333" : "#fff",
backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
textStyle: {
fontSize: 12,
color: appStore.theme === "dark" ? "#eee" : "#333",
color: appStore.theme === Themes.Dark ? "#eee" : "#333",
},
},
grid: {

15
src/views/dashboard/graphs/Line.vue
View File

@ -32,6 +32,7 @@ limitations under the License. -->
import useLegendProcess from "@/hooks/useLegendProcessor";
import { isDef } from "@/utils/is";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineProps, defineEmits */
const emits = defineEmits(["click"]);
@ -94,11 +95,11 @@ limitations under the License. -->
const color: string[] = chartColors(keys);
const tooltip = {
trigger: "axis",
backgroundColor: appStore.theme === "dark" ? "#333" : "#fff",
borderColor: appStore.theme === "dark" ? "#333" : "#fff",
backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
textStyle: {
fontSize: 12,
color: appStore.theme === "dark" ? "#eee" : "#333",
color: appStore.theme === Themes.Dark ? "#eee" : "#333",
},
enterable: true,
confine: true,
@ -111,11 +112,11 @@ limitations under the License. -->
confine: true,
extraCssText: `height: 20px; padding:0 2px;`,
trigger: "axis",
backgroundColor: appStore.theme === "dark" ? "#666" : "#eee",
borderColor: appStore.theme === "dark" ? "#666" : "#eee",
backgroundColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
borderColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
textStyle: {
fontSize: 12,
color: appStore.theme === "dark" ? "#eee" : "#333",
color: appStore.theme === Themes.Dark ? "#eee" : "#333",
},
};
@ -130,7 +131,7 @@ limitations under the License. -->
left: 0,
itemWidth: 12,
textStyle: {
color: appStore.theme === "dark" ? "#fff" : "#333",
color: appStore.theme === Themes.Dark ? "#fff" : "#333",
},
},
grid: {

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

@ -28,6 +28,7 @@ limitations under the License. -->
import TreeGraph from "../../utils/d3-trace-tree";
import type { Span, Ref } from "@/types/trace";
import SpanDetail from "./SpanDetail.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
/* global defineProps, Nullable, defineExpose,Recordable*/
const props = defineProps({
@ -35,6 +36,7 @@ limitations under the License. -->
traceId: { type: String, default: "" },
type: { type: String, default: "List" },
});
const appStore = useAppStoreWithOut();
const loading = ref<boolean>(false);
const showDetail = ref<boolean>(false);
const fixSpansSize = ref<number>(0);
@ -289,6 +291,17 @@ limitations under the License. -->
});
},
);
watch(
() => appStore.theme,
() => {
tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
tree.value.draw(() => {
setTimeout(() => {
loading.value = false;
}, 200);
});
},
);
</script>
<style lang="scss" scoped>
.d3-graph {
@ -301,12 +314,12 @@ limitations under the License. -->
}
.trace-node-container {
fill: rgba(0, 0, 0, 0);
fill: rgb(0 0 0 / 0%);
stroke-width: 5px;
cursor: pointer;
&:hover {
fill: rgba(0, 0, 0, 0.05);
fill: rgb(0 0 0 / 5%);
}
}

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

@ -20,6 +20,8 @@ import d3tip from "d3-tip";
import type { Trace } from "@/types/trace";
import dayjs from "dayjs";
import icons from "@/assets/img/icons";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
export default class ListGraph {
private barHeight = 48;
@ -127,6 +129,7 @@ export default class ListGraph {
}
update(source: Recordable, callback: Function) {
const t = this;
const appStore = useAppStoreWithOut();
const nodes = this.root.descendants();
let index = -1;
this.root.eachBefore((n: Recordable) => {
@ -166,7 +169,7 @@ export default class ListGraph {
.attr("width", 16)
.attr("height", 16)
.attr("x", 6)
.attr("y", -10)
.attr("y", -8)
.attr("xlink:href", (d: any) =>
d.data.type === "Entry" ? icons.ENTRY : d.data.type === "Exit" ? icons.EXIT : "",
)
@ -186,7 +189,7 @@ export default class ListGraph {
.attr("width", 16)
.attr("height", 16)
.attr("x", 6)
.attr("y", -10)
.attr("y", -8)
.attr("xlink:href", (d: any) => {
const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD");
return key > -1 ? icons.STREAM : "";
@ -214,14 +217,14 @@ export default class ListGraph {
.append("text")
.attr("x", 13)
.attr("y", 5)
.attr("fill", "#E54C17")
.attr("fill", appStore.theme === Themes.Dark ? "#666" : "#E54C17")
.html((d: Recordable) => (d.data.isError ? "◉" : ""));
nodeEnter
.append("text")
.attr("class", "node-text")
.attr("x", 35)
.attr("y", -6)
.attr("fill", "#333")
.attr("fill", appStore.theme === Themes.Dark ? "#eee" : "#333")
.html((d: Recordable) => {
if (d.data.label === "TRACE_ROOT") {
return "";
@ -242,7 +245,7 @@ export default class ListGraph {
})
.attr("cy", -5)
.attr("fill", "none")
.attr("stroke", "#e66")
.attr("stroke", appStore.theme === Themes.Dark ? "#666" : "#e66")
.style("opacity", (d: Recordable) => {
const events = d.data.attachedEvents;
if (events && events.length) {
@ -255,7 +258,7 @@ export default class ListGraph {
.append("text")
.attr("x", 267)
.attr("y", -1)
.attr("fill", "#e66")
.attr("fill", appStore.theme === Themes.Dark ? "#666" : "#e66")
.style("font-size", "10px")
.text((d: Recordable) => {
const events = d.data.attachedEvents;
@ -270,7 +273,7 @@ export default class ListGraph {
.attr("class", "node-text")
.attr("x", 35)
.attr("y", 12)
.attr("fill", "#ccc")
.attr("fill", appStore.theme === Themes.Dark ? "#777" : "#ccc")
.style("font-size", "11px")
.text(
(d: Recordable) =>
@ -305,11 +308,15 @@ export default class ListGraph {
.style("opacity", 1);
nodeEnter
.append("circle")
.attr("r", 3)
.attr("r", appStore.theme === Themes.Dark ? 4 : 3)
.style("cursor", "pointer")
.attr("stroke-width", 2.5)
.attr("stroke-width", appStore.theme === Themes.Dark ? 3 : 2.5)
.attr("fill", (d: Recordable) =>
d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "rbga(0,0,0,0)",
d._children
? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
: appStore.theme === Themes.Dark
? "#eee"
: "rbga(0,0,0,0)",
)
.style("stroke", (d: Recordable) =>
d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
@ -320,7 +327,7 @@ export default class ListGraph {
node
.transition()
.duration(400)
.attr("transform", (d: Recordable) => `translate(${d.y + 5},${d.x})`)
.attr("transform", (d: Recordable) => `translate(${d.y + 3},${d.x})`)
.style("opacity", 1)
.select("circle")
.attr("fill", (d: Recordable) =>
@ -343,8 +350,8 @@ export default class ListGraph {
.enter()
.insert("path", "g")
.attr("class", "trace-link")
.attr("fill", "rgba(0,0,0,0)")
.attr("stroke", "rgba(0, 0, 0, 0.1)")
.attr("fill", appStore.theme === Themes.Dark ? "rgba(244,244,244,0)" : "rgba(0,0,0,0)")
.attr("stroke", appStore.theme === Themes.Dark ? "rgba(244,244,244,0.4)" : "rgba(0, 0, 0, 0.1)")
.attr("stroke-width", 2)
.attr("transform", `translate(5, 0)`)
.attr("d", () => {