diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts index 9a4e524a..36ed2082 100644 --- a/src/types/ebpf.d.ts +++ b/src/types/ebpf.d.ts @@ -28,12 +28,31 @@ export interface EBPFTaskList { taskId: string; serviceName: string; serviceId: string; + serviceInstanceId: string; + serviceInstanceName: string; + processId: string; + processName: string; processLabels: string[]; taskStartTime: number; fixedTriggerDuration: number; targetType: string; createTime: number; triggerType: string; + continuousProfilingCauses: ProfilingCause[]; +} + +interface ProfilingCause { + type: string; + singleValue: { + threshold: number; + current: number; + }; + uri: { + uriRegex: string; + uriPath: string; + threshold: number; + current: number; + }; } export interface EBPFProfilingSchedule { diff --git a/src/views/dashboard/related/task-timeline/components/Timeline.vue b/src/views/dashboard/related/task-timeline/components/Timeline.vue index 212f8b26..ef8a38ec 100644 --- a/src/views/dashboard/related/task-timeline/components/Timeline.vue +++ b/src/views/dashboard/related/task-timeline/components/Timeline.vue @@ -77,7 +77,7 @@ limitations under the License. --> visGraph.value.destroy(); } const h = timeline.value.getBoundingClientRect().height; - const events = taskTimelineStore.events.map((d: EBPFTaskList, index: number) => { + const taskList = taskTimelineStore.taskList.map((d: EBPFTaskList, index: number) => { return { id: index + 1, content: d.triggerType, @@ -87,7 +87,7 @@ limitations under the License. --> className: d.targetType, }; }); - const items: any = new DataSet(events); + const items: any = new DataSet(taskList); const options: any = { height: h, width: "100%", @@ -96,25 +96,38 @@ limitations under the License. --> autoResize: false, tooltip: { overflowMethod: "cap", - template(item: Event | any) { + template(item: EBPFTaskList | any) { const data = item.data || {}; - let tmp = `
ID: ${data.uuid || ""}
-
Name: ${data.name || ""}
-
Event Type: ${data.type || ""}
-
Start Time: ${data.startTime ? visDate(data.startTime) : ""}
-
End Time: ${data.endTime ? visDate(data.endTime) : ""}
-
Message: ${data.message || ""}
-
Service: ${data.source.service || ""}
`; - return tmp; + let tmp = ` +
Task ID: ${data.taskId || ""}
+
Service Name: ${data.serviceName || ""}
+
Service Instance Name: ${data.serviceInstanceName || ""}
+
Service Process Name: ${data.processName || ""}
+
Trigger Type: ${data.triggerType || ""}
+
Target Type: ${data.targetType || ""}
+
Start Time: ${data.startTime ? visDate(data.startTime) : ""}
+
End Time: ${data.endTime ? visDate(data.endTime) : ""}
+
Process Labels: ${data.processLabels.join("; ") || ""}
`; + let str = ""; + for (const item of data.continuousProfilingCauses) { + str += `
${item.type}: ${getURI(item.uri)}${item.uri.threshold}>=${item.uri.current}
`; + } + return tmp + str; }, }, }; visGraph.value = new Timeline(timeline.value, items, options); visGraph.value.on("select", (properties: { items: number[] }) => { dashboardStore.selectWidget(props.data); + const index = items[0]; + taskTimelineStore.setSelectedTask(taskList[index]); }); } + function getURI(uri: { uriRegex: string; uriPath: string }) { + return uri ? `(${uri.uriRegex || ""} | ${uri.uriPath || ""})` : ""; + } + function resize() { const observer = new ResizeObserver((entries) => { const entry = entries[0]; @@ -140,8 +153,7 @@ limitations under the License. --> .task-timeline { width: calc(100% - 5px); margin: 0 5px 5px 0; - height: 100%; - min-height: 150px; + height: 300px; } .message {