diff --git a/src/graphql/fragments/event.ts b/src/graphql/fragments/event.ts
new file mode 100644
index 00000000..00d5bb09
--- /dev/null
+++ b/src/graphql/fragments/event.ts
@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+export const FetchEvents = {
+  variable: ["$condition: EventQueryCondition"],
+  query: `
+  fetchEvents: queryEvents(condition: $condition) {
+    events {
+      uuid
+      source {
+        service
+        serviceInstance
+        endpoint
+      }
+      name
+      type
+      message
+      parameters {
+        key
+        value
+      }
+      startTime
+      endTime
+    }
+    total
+  }`,
+};
diff --git a/src/graphql/index.ts b/src/graphql/index.ts
index 45cdd59b..ab6fd319 100644
--- a/src/graphql/index.ts
+++ b/src/graphql/index.ts
@@ -24,6 +24,7 @@ import * as trace from "./query/trace";
 import * as log from "./query/log";
 import * as profile from "./query/profile";
 import * as alarm from "./query/alarm";
+import * as event from "./query/event";
 
 const query: { [key: string]: string } = {
   ...app,
@@ -34,6 +35,7 @@ const query: { [key: string]: string } = {
   ...log,
   ...profile,
   ...alarm,
+  ...event,
 };
 class Graphql {
   private queryData = "";
diff --git a/src/graphql/query/event.ts b/src/graphql/query/event.ts
new file mode 100644
index 00000000..f27be946
--- /dev/null
+++ b/src/graphql/query/event.ts
@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+import { FetchEvents } from "../fragments/event";
+
+export const queryEvents = `query queryData(${FetchEvents.variable}) {${FetchEvents.query}}`;
diff --git a/src/router/event.ts b/src/router/event.ts
index 4f8c8274..0b587dc1 100644
--- a/src/router/event.ts
+++ b/src/router/event.ts
@@ -33,10 +33,9 @@ export const routesEvent: Array<RouteRecordRaw> = [
         path: "/events",
         name: "Events",
         meta: {
-          title: "eventList",
           exact: false,
         },
-        component: () => import("@/views/Log.vue"),
+        component: () => import("@/views/Event.vue"),
       },
     ],
   },
diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts
new file mode 100644
index 00000000..e993a4ee
--- /dev/null
+++ b/src/store/modules/event.ts
@@ -0,0 +1,123 @@
+/**
+ * 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.
+ */
+import { defineStore } from "pinia";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+import { Event, QueryEventCondition } from "@/types/events";
+import { Instance, Endpoint, Service } from "@/types/selector";
+import { useAppStoreWithOut } from "@/store/modules/app";
+
+interface eventState {
+  loading: boolean;
+  events: Event[];
+  total: number;
+  services: Service[];
+  instances: Instance[];
+  endpoints: Endpoint[];
+  condition: QueryEventCondition | any;
+}
+
+export const eventStore = defineStore({
+  id: "event",
+  state: (): eventState => ({
+    loading: false,
+    events: [],
+    total: 0,
+    services: [{ value: "", label: "" }],
+    instances: [{ value: "", label: "All" }],
+    endpoints: [{ value: "", label: "All" }],
+    condition: {
+      time: useAppStoreWithOut().durationTime,
+      paging: { pageNum: 1, pageSize: 15, needTotal: true },
+    },
+  }),
+  actions: {
+    setEventCondition(data: any) {
+      this.condition = { ...this.condition, ...data };
+    },
+    async getServices(layer: string) {
+      const res: AxiosResponse = await graphql.query("queryServices").params({
+        layer,
+      });
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.services = res.data.data.services;
+      return res.data;
+    },
+    async getInstances(serviceId: string) {
+      const res: AxiosResponse = await graphql.query("queryInstances").params({
+        serviceId,
+        duration: useAppStoreWithOut().durationTime,
+      });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [
+        { value: "", label: "All" },
+      ];
+      return res.data;
+    },
+    async getEndpoints(serviceId: string) {
+      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
+        serviceId,
+        duration: useAppStoreWithOut().durationTime,
+        keyword: "",
+      });
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods] || [
+        { value: "", label: "All" },
+      ];
+      return res.data;
+    },
+    async getEvents() {
+      this.loading = true;
+      const res: AxiosResponse = await graphql
+        .query("queryEvents")
+        .params({ condition: this.condition });
+      this.loading = false;
+      if (res.data.errors) {
+        return res.data;
+      }
+      if (res.data.data.fetchEvents) {
+        this.events = (res.data.data.fetchEvents.events || []).map(
+          (item: Event) => {
+            let scope = "Service";
+            if (item.source.serviceInstance) {
+              scope = "ServiceInstance";
+            }
+            if (item.source.endpoint) {
+              scope = "Endpoint";
+            }
+            item.scope = scope;
+            return item;
+          }
+        );
+        this.total = res.data.data.fetchEvents.total;
+      }
+      return res.data;
+    },
+  },
+});
+
+export function useEventStore(): any {
+  return eventStore(store);
+}
diff --git a/src/types/events.d.ts b/src/types/events.d.ts
index e36c037c..e4684134 100644
--- a/src/types/events.d.ts
+++ b/src/types/events.d.ts
@@ -27,3 +27,19 @@ export type Event = {
   checked?: boolean;
   scope?: string;
 };
+
+export interface QueryEventCondition {
+  uuid: string;
+  source: SourceInput;
+  name: string;
+  type: EventType;
+  time: Duration;
+  order: string;
+  paging: { pageNum: number; pageSize: number; needTotal: boolean };
+}
+
+type SourceInput = {
+  service: string;
+  serviceInstance: string;
+  endpoint: string;
+};
diff --git a/src/views/Event.vue b/src/views/Event.vue
new file mode 100644
index 00000000..b308ce8c
--- /dev/null
+++ b/src/views/Event.vue
@@ -0,0 +1,36 @@
+<!-- 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 class="event flex-v">
+    <Header />
+    <Content />
+  </div>
+</template>
+<script lang="ts" setup>
+import { useAppStoreWithOut } from "@/store/modules/app";
+import Header from "./event/Header.vue";
+import Content from "./event/Content.vue";
+
+const appStore = useAppStoreWithOut();
+
+appStore.setPageTitle("Events");
+</script>
+<style lang="scss" scoped>
+.event {
+  flex-grow: 1;
+  height: 100%;
+  font-size: 12px;
+}
+</style>
diff --git a/src/views/Log.vue b/src/views/Log.vue
index 9b188c71..af188897 100644
--- a/src/views/Log.vue
+++ b/src/views/Log.vue
@@ -4,9 +4,7 @@ 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.
@@ -17,7 +15,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { useAppStoreWithOut } from "@/store/modules/app";
-
 const appStore = useAppStoreWithOut();
 appStore.setPageTitle("Log");
 /*global defineProps */
diff --git a/src/views/alarm/Content.vue b/src/views/alarm/Content.vue
index 22c0112a..23de0f36 100644
--- a/src/views/alarm/Content.vue
+++ b/src/views/alarm/Content.vue
@@ -179,7 +179,7 @@ function viewEventDetail(event: Event) {
 }
 </script>
 <style lang="scss" scoped>
-@import "./index.scss";
+@import "../components/style.scss";
 
 .tips {
   width: 100%;
diff --git a/src/views/alarm/index.scss b/src/views/components/style.scss
similarity index 100%
rename from src/views/alarm/index.scss
rename to src/views/components/style.scss
diff --git a/src/views/dashboard/related/log/List.vue b/src/views/dashboard/related/log/List.vue
index 8cbcb501..acc3cfb5 100644
--- a/src/views/dashboard/related/log/List.vue
+++ b/src/views/dashboard/related/log/List.vue
@@ -14,10 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <div class="log-t-loading" v-show="logStore.loadLogs">
-      <Icon iconName="spinner" size="lg" />
-    </div>
-    <LogTable :tableData="logStore.logs || []" :type="type" :noLink="true">
+    <LogTable
+      v-loading="logStore.loadLogs"
+      :tableData="logStore.logs || []"
+      :type="type"
+      :noLink="true"
+    >
       <div class="log-tips" v-if="!logStore.logs.length">{{ t("noData") }}</div>
     </LogTable>
     <div class="mt-5 mb-5">
@@ -66,8 +68,4 @@ async function queryLogs() {
   text-align: center;
   margin: 50px 0;
 }
-
-.log-t-loading {
-  text-align: center;
-}
 </style>
diff --git a/src/views/event/Content.vue b/src/views/event/Content.vue
new file mode 100644
index 00000000..b01b9854
--- /dev/null
+++ b/src/views/event/Content.vue
@@ -0,0 +1,121 @@
+<!-- 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 class="timeline-table clear">
+    <div
+      v-for="(i, index) in eventStore.events"
+      :key="index"
+      class="mb-10 clear timeline-item"
+      @click="showEventDetails(i)"
+    >
+      <div class="g-sm-3 grey sm hide-xs time-line tr">
+        {{ dateFormat(parseInt(i.startTime)) }}
+      </div>
+      <div class="timeline-table-i g-sm-9">
+        <div class="message mb-5 b">
+          {{ i.message }}
+        </div>
+        <div
+          class="timeline-table-i-scope mr-10 l sm"
+          :class="{
+            blue: i.scope === 'Service',
+            green: i.scope === 'Endpoint',
+            yellow: i.scope === 'ServiceInstance',
+          }"
+        >
+          {{ i.scope }}
+        </div>
+        <div class="grey sm show-xs">
+          {{ dateFormat(parseInt(i.startTime)) }}
+        </div>
+      </div>
+    </div>
+    <div v-if="!eventStore.events.length" class="tips">{{ t("noData") }}</div>
+  </div>
+  <el-dialog
+    :title="t('eventDetail')"
+    v-model="showDetails"
+    fullscreen
+    :destroy-on-close="true"
+    @closed="showDetails = false"
+  >
+    <div>
+      <div
+        class="mb-10"
+        v-for="(eventKey, index) in EventsDetailKeys"
+        :key="index"
+      >
+        <span class="keys">{{ t(eventKey.text) }}</span>
+        <span v-if="eventKey.class === 'parameters'">
+          <span v-for="(d, index) of currentEvent[eventKey.class]" :key="index"
+            >{{ d.key }}={{ d.value }};
+          </span>
+        </span>
+        <span
+          v-else-if="
+            eventKey.class === 'startTime' || eventKey.class === 'endTime'
+          "
+          >{{ dateFormat(currentEvent[eventKey.class]) }}</span
+        >
+        <span v-else-if="eventKey.class === 'source'" class="source">
+          <span
+            >{{ t("service") }}:
+            {{ currentEvent[eventKey.class].service }}</span
+          >
+          <div v-show="currentEvent[eventKey.class].endpoint">
+            {{ t("endpoint") }}:
+            {{ currentEvent[eventKey.class].endpoint }}
+          </div>
+          <div v-show="currentEvent[eventKey.class].serviceInstance">
+            {{ t("instance") }}:
+            {{ currentEvent[eventKey.class].serviceInstance }}
+          </div>
+        </span>
+        <span v-else>{{ currentEvent[eventKey.class] }}</span>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import dayjs from "dayjs";
+import { useEventStore } from "@/store/modules/event";
+import { EventsDetailKeys } from "./data";
+import { Event } from "@/types/events";
+
+const { t } = useI18n();
+const eventStore = useEventStore();
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+const showDetails = ref<boolean>(false);
+const currentEvent = ref<any>({});
+
+function showEventDetails(item: Event) {
+  showDetails.value = true;
+  currentEvent.value = item;
+}
+</script>
+<style lang="scss" scoped>
+@import "../components/style.scss";
+
+.tips {
+  width: 100%;
+  margin: 20px 0;
+  text-align: center;
+  font-size: 14px;
+}
+</style>
diff --git a/src/views/event/Header.vue b/src/views/event/Header.vue
new file mode 100644
index 00000000..e70cf819
--- /dev/null
+++ b/src/views/event/Header.vue
@@ -0,0 +1,247 @@
+<!-- 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>
+  <nav class="event-tool flex-v">
+    <div class="flex-h">
+      <div class="mr-5">
+        <span class="grey">{{ t("layer") }}: </span>
+        <Selector
+          v-model="state.currentLayer"
+          :options="state.layers"
+          placeholder="Select a layer"
+          @change="selectLayer"
+          class="event-tool-input"
+          size="small"
+        />
+      </div>
+      <div class="mr-5">
+        <span class="grey">{{ t("service") }}: </span>
+        <Selector
+          v-model="state.service"
+          :options="eventStore.services"
+          placeholder="Select a service"
+          @change="selectService"
+          class="event-tool-input"
+          size="small"
+        />
+      </div>
+      <div class="mr-5">
+        <span class="grey mr-5">{{ t("instance") }}: </span>
+        <Selector
+          v-model="state.instance"
+          :options="eventStore.instances"
+          placeholder="Select a instance"
+          @change="selectInstance"
+          class="event-tool-input"
+          size="small"
+        />
+      </div>
+      <div class="mr-5">
+        <span class="grey mr-5">{{ t("endpoint") }}: </span>
+        <Selector
+          v-model="state.endpoint"
+          :options="eventStore.endpoints"
+          placeholder="Select a endpoint"
+          @change="selectEndpoint"
+          class="event-tool-input"
+          size="small"
+        />
+      </div>
+      <div class="mr-5">
+        <span class="grey">{{ t("eventsType") }}: </span>
+        <Selector
+          v-model="state.eventType"
+          :options="EventTypes"
+          placeholder="Select a type"
+          @change="selectType"
+          class="event-tool-input"
+          size="small"
+        />
+      </div>
+    </div>
+    <div class="mt-5">
+      <el-pagination
+        v-model:currentPage="pageNum"
+        v-model:page-size="pageSize"
+        layout="prev, jumper, total, next"
+        :total="eventStore.total"
+        @current-change="updatePage"
+        :pager-count="5"
+        small
+        :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
+      />
+      <!-- <div>
+        <el-button class="search" type="primary" @click="queryEvents">
+          <Icon iconName="search" class="mr-5" />
+          <span class="vm">{{ t("search") }}</span>
+        </el-button>
+      </div> -->
+    </div>
+  </nav>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import { EventTypes } from "./data";
+import { useEventStore } from "@/store/modules/event";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
+
+const { t } = useI18n();
+const eventStore = useEventStore();
+const selectorStore = useSelectorStore();
+const pageSize = 20;
+const pageNum = ref<number>(1);
+const state = reactive<{
+  currentLayer: string;
+  layers: string[];
+  eventType: string;
+  service: string;
+  instance: string;
+  endpoint: string;
+}>({
+  currentLayer: "",
+  layers: [],
+  eventType: "",
+  service: "",
+  instance: "",
+  endpoint: "",
+});
+
+getSelectors();
+
+async function getSelectors() {
+  await getLayers();
+  if (!state.currentLayer) {
+    return;
+  }
+  getServices();
+}
+
+async function getServices() {
+  const resp = await eventStore.getServices(state.currentLayer);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.service = eventStore.services[0].value;
+  if (!eventStore.services[0].id) {
+    queryEvents();
+    return;
+  }
+  getEndpoints(eventStore.services[0].id);
+  getInstances(eventStore.services[0].id);
+  queryEvents();
+}
+
+async function getEndpoints(id: string) {
+  const resp = await eventStore.getEndpoints(id);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.endpoint = eventStore.endpoints[0].value;
+}
+async function getInstances(id: string) {
+  const resp = await eventStore.getInstances(id);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.instance = eventStore.instances[0].value;
+}
+
+async function getLayers() {
+  const resp = await selectorStore.fetchLayers();
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.currentLayer = resp.data.layers[0] || "";
+  state.layers = resp.data.layers.map((d: string) => {
+    return { label: d, value: d };
+  });
+}
+
+async function queryEvents() {
+  eventStore.setEventCondition({
+    paging: {
+      pageNum: pageNum.value,
+      pageSize: pageSize,
+      needTotal: true,
+    },
+    source: {
+      service: state.service || "",
+      endpoint: state.endpoint || "",
+      serviceInstance: state.instance || "",
+    },
+    type: state.eventType || undefined,
+  });
+  const resp = await eventStore.getEvents();
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+  }
+}
+
+async function selectLayer(opt: any) {
+  state.currentLayer = opt[0].value;
+  await getServices();
+}
+
+function selectService(opt: any) {
+  state.service = opt[0].value;
+  queryEvents();
+  if (!opt[0].id) {
+    return;
+  }
+  getEndpoints(opt[0].id);
+  getInstances(opt[0].id);
+}
+
+function selectInstance(opt: any) {
+  state.instance = opt[0].value;
+  queryEvents();
+}
+
+function selectEndpoint(opt: any) {
+  state.endpoint = opt[0].value;
+  queryEvents();
+}
+
+function selectType(opt: any) {
+  state.eventType = opt[0].value;
+  queryEvents();
+}
+
+function updatePage(p: number) {
+  pageNum.value = p;
+  queryEvents();
+}
+</script>
+<style lang="scss" scoped>
+.event-tool {
+  background-color: #f0f2f5;
+  width: 100%;
+  padding: 10px;
+}
+
+.event-tool-input {
+  width: 200px;
+}
+
+.search {
+  margin-left: 20px;
+}
+</style>
diff --git a/src/router/log.ts b/src/views/event/data.ts
similarity index 52%
rename from src/router/log.ts
rename to src/views/event/data.ts
index d1f5541c..e5c7d5da 100644
--- a/src/router/log.ts
+++ b/src/views/event/data.ts
@@ -14,34 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
-
-export const routesLog: Array<RouteRecordRaw> = [
-  {
-    path: "",
-    name: "Logs",
-    meta: {
-      title: "logs",
-      icon: "assignment",
-      hasGroup: false,
-      exact: false,
-    },
-    component: Layout,
-    children: [
-      {
-        path: "/log",
-        name: "Logs",
-        meta: {
-          title: "log",
-          exact: false,
-        },
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () =>
-          import(/* webpackChunkName: "about" */ "@/views/Log.vue"),
-      },
-    ],
-  },
+export const EventsDetailKeys = [
+  { text: "eventID", class: "uuid" },
+  { text: "eventName", class: "name" },
+  { text: "eventsType", class: "type" },
+  { text: "startTime", class: "startTime" },
+  { text: "endTime", class: "endTime" },
+  { text: "eventsMessage", class: "message" },
+  { text: "eventSource", class: "source" },
+];
+export const EventTypes = [
+  { label: "All", value: "" },
+  { label: "Normal", value: "Normal" },
+  { label: "Error", value: "Error" },
 ];