Visualize event timeline

src/store/modules/event.ts

@@ -29,7 +29,7 @@ interface eventState {
   services: Service[];
   instances: Instance[];
   endpoints: Endpoint[];
-  condition: QueryEventCondition | any;
+  condition: Nullable<QueryEventCondition>;
 }
 
 export const eventStore = defineStore({
@@ -40,12 +40,10 @@ export const eventStore = defineStore({
     services: [{ value: "", label: "All" }],
     instances: [{ value: "", label: "All" }],
     endpoints: [{ value: "", label: "All" }],
-    condition: {
+    condition: null,
-      paging: { pageNum: 1, pageSize: 15 },
-    },
   }),
   actions: {
-    setEventCondition(data: any) {
+    setEventCondition(data: QueryEventCondition) {
       this.condition = data;
     },
     async getServices(layer: string) {

src/views/dashboard/controls/Event.vue

@@ -32,15 +32,16 @@ limitations under the License. -->
     <div class="header">
       <Header :needQuery="needQuery" />
     </div>
-    <!-- <div class="event">
+    <div class="event">
-      <List />
+      <Content />
-    </div> -->
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/event/Header.vue";
+import Content from "../related/event/Content.vue";
 
 /*global defineProps */
 const props = defineProps({
@@ -95,5 +96,6 @@ function removeWidget() {
 
 .event {
   width: 100%;
+  height: calc(100% - 80px);
 }
 </style>

src/views/dashboard/related/event/Content.vue

@@ -0,0 +1,66 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div ref="timeline" class="events"></div>
+</template>
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+import dayjs from "dayjs";
+import { useEventStore } from "@/store/modules/event";
+import { DataSet, Timeline } from "vis-timeline/standalone";
+import "vis-timeline/styles/vis-timeline-graph2d.css";
+const eventStore = useEventStore();
+/*global Nullable */
+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));
+
+function visTimeline() {
+  if (!timeline.value) {
+    return;
+  }
+  const h = timeline.value.getBoundingClientRect().height;
+  const events = eventStore.events.map((d, index) => {
+    return {
+      id: index + 1,
+      content: d.name,
+      start: dateFormat(d.startTime),
+      end: dateFormat(d.endTime),
+    };
+  });
+  const items: any = new DataSet(events);
+  const options = {
+    height: h,
+    width: "100%",
+    locale: "en",
+  };
+  visGraph.value = new Timeline(timeline.value, items, options);
+}
+watch(
+  () => eventStore.events,
+  () => {
+    visTimeline();
+  }
+);
+</script>
+<style lang="scss" scoped>
+.events {
+  width: calc(100% - 5px);
+  margin: 0 5px 5px 0;
+  height: 100%;
+  min-height: 150px;
+}
+</style>