github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-19 17:17:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

view span

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-04 13:35:33 +08:00
parent 4c1884d552
commit aa2664a4fc
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/dashboard/related/profile/components/TaskList.vue
View File

@ -124,12 +124,14 @@ limitations under the License. -->
import { ref } from "vue";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
import { useSelectorStore } from "@/store/modules/selectors";
import { useProfileStore } from "@/store/modules/profile";
import { TaskLog, TaskListItem } from "@/types/profile";
import { ElMessage } from "element-plus";
const { t } = useI18n();
const profileStore = useProfileStore();
const selectorStore = useSelectorStore();
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern);
const viewDetail = ref<boolean>(false);
@ -150,7 +152,7 @@ async function viewTask(e: Event, item: TaskListItem) {
viewDetail.value = true;
selectedTask.value = item;
service.value = (
profileStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}
selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}
).label;
const res = await profileStore.getTaskLogs({ taskID: item.id });

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

@ -40,7 +40,7 @@ limitations under the License. -->
<span class="g-sm-8 wba">{{ currentSpan.peer || "No Peer" }}</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("error") }}:</span>
<span class="g-sm-4 grey">{{ t("isError") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
</div>
<div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">

18
src/views/dashboard/related/trace/components/Table/TableItem.vue
View File

@ -106,7 +106,7 @@ limitations under the License. -->
</el-tooltip>
</div>
<div class="application" v-show="headerType === 'profile'">
<span @click="viewSpanDetail">{{ t("view") }}</span>
<span @click="viewSpan($event)">{{ t("view") }}</span>
</div>
</div>
<div
@ -139,6 +139,7 @@ import { useI18n } from "vue-i18n";
import { ref, computed, defineComponent } from "vue";
import type { PropType } from "vue";
import SpanDetail from "../D3Graph/SpanDetail.vue";
import { ClickHandler } from "d3-flame-graph";
const props = {
data: { type: Object as PropType<any>, default: () => ({}) },
@ -185,7 +186,7 @@ export default defineComponent({
function toggle() {
displayChildren.value = !displayChildren.value;
}
function showSelectSpan(dom: any) {
function showSelectSpan(dom: HTMLSpanElement) {
if (!dom) {
return;
}
@ -196,6 +197,7 @@ export default defineComponent({
dom.style.background = "rgba(0, 0, 0, 0.1)";
}
function selectSpan(event: any) {
console.log(event);
const dom = event.path.find((d: any) =>
d.className.includes("trace-item")
);
@ -207,11 +209,18 @@ export default defineComponent({
}
viewSpanDetail(dom);
}
function viewSpan(event: any) {
const dom = event.path.find((d: any) =>
d.className.includes("trace-item")
);
emit("select", props.data);
viewSpanDetail(dom);
}
function selectedItem(data: any) {
function selectedItem(data: HTMLSpanElement) {
emit("select", data);
}
function viewSpanDetail(dom: any) {
function viewSpanDetail(dom: HTMLSpanElement) {
showSelectSpan(dom);
showDetail.value = true;
}
@ -226,6 +235,7 @@ export default defineComponent({
showDetail,
selectSpan,
selectedItem,
viewSpan,
t,
};
},