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

update timeline

Browse Source
This commit is contained in:
Qiuxia Fan 2022-06-21 15:26:32 +08:00
parent 5fd9a2d37a
commit a9f4fdd5ec
3 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/styles/reset.scss
View File

@ -154,3 +154,17 @@ pre {
.switch {
margin: 0 5px;
}
div.vis-tooltip {
max-width: 600px;
overflow: hidden;
background-color: #fff !important;
div {
word-wrap: break-word !important;
}
}
.vis-item {
cursor: pointer;
}

2
src/views/dashboard/data.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
export const dragIgnoreFrom =
"svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules";
"svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item";
export const PodsChartTypes = ["EndpointList", "InstanceList"];

37
src/views/dashboard/related/event/Content.vue
View File

@ -18,7 +18,7 @@ limitations under the License. -->
<script lang="ts" setup>
import { ref, watch } from "vue";
import dayjs from "dayjs";
import { useEventStore } from "@/store/modules/event";
import { useEventStore } from "../../../../store/modules/event";
import { DataSet, Timeline } from "vis-timeline/standalone";
import "vis-timeline/styles/vis-timeline-graph2d.css";
const eventStore = useEventStore();
@ -27,6 +27,8 @@ const timeline = ref<Nullable<HTMLDivElement>>(null);
const visGraph = ref<Nullable<any>>(null);
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
new Date(dayjs(date).format(pattern));
const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern);
function visTimeline() {
if (!timeline.value) {
@ -48,27 +50,20 @@ function visTimeline() {
width: "100%",
locale: "en",
tooltip: {
template: function (originalItemData) {
template(originalItemData) {
const data = originalItemData.data || {};
return ` <div class="mb-5"><span class="grey">Event ID: </span>${
data.uuid || ""
}</div>
<div class="mb-5"><span class="grey">Event Name: </span>${
data.name || ""
return `<div><span>Event ID: </span>${data.uuid || ""}</div>
<div><span>Event Name: </span>${data.name || ""}</div>
<div class="mb-5"><span>Event Type: </span>${data.type || ""}</div>
<div class="mb-5"><span>Start Time: </span>${
data.startTime ? visDate(data.startTime) : ""
}</div>
<div class="mb-5"><span class="grey">Event Type: </span>${
data.type || ""
}</div>
<div class="mb-5"><span class="grey">Start Time: </span>${
data.startTime || ""
}</div>
<div class="mb-5"><span class="grey">End Time: </span>${
data.endTime || ""
<div class="mb-5"><span>End Time: </span>${
data.endTime ? visDate(data.endTime) : ""
}</div>
<div class="mb-5"><span class="grey">Event Message: </span>${
data.message || ""
<div style="minHeight: 30px;word-wrap:break-word; max-width:400px">Event Message: ${
data.message
}</div>
<div class="mb-5"><span class="grey">Event Source: </span>
<div>Service:
${data.source.service || ""}</div>
<div>
@ -98,4 +93,10 @@ watch(
height: 100%;
min-height: 150px;
}
.message {
max-width: 400px;
text-overflow: ellipsis;
overflow: hidden;
}
</style>