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 { ref } from "vue";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useSelectorStore } from "@/store/modules/selectors";
import { useProfileStore } from "@/store/modules/profile"; import { useProfileStore } from "@/store/modules/profile";
import { TaskLog, TaskListItem } from "@/types/profile"; import { TaskLog, TaskListItem } from "@/types/profile";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const { t } = useI18n(); const { t } = useI18n();
const profileStore = useProfileStore(); const profileStore = useProfileStore();
const selectorStore = useSelectorStore();
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") => const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern); dayjs(date).format(pattern);
const viewDetail = ref<boolean>(false); const viewDetail = ref<boolean>(false);
@ -150,7 +152,7 @@ async function viewTask(e: Event, item: TaskListItem) {
viewDetail.value = true; viewDetail.value = true;
selectedTask.value = item; selectedTask.value = item;
service.value = ( service.value = (
profileStore.services.filter((s: any) => s.id === item.serviceId)[0] || {} selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}
).label; ).label;
const res = await profileStore.getTaskLogs({ taskID: item.id }); 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> <span class="g-sm-8 wba">{{ currentSpan.peer || "No Peer" }}</span>
</div> </div>
<div class="mb-10 clear item"> <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> <span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
</div> </div>
<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">

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

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