remove event page

src/router/event.ts

@@ -1,43 +0,0 @@
-/**
- * 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 { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
-
-export const routesEvent: Array<RouteRecordRaw> = [
-  {
-    path: "",
-    name: "Events",
-    meta: {
-      title: "events",
-      icon: "av_timer",
-      hasGroup: false,
-      exact: true,
-    },
-    component: Layout,
-    children: [
-      {
-        path: "/events",
-        name: "Events",
-        meta: {
-          exact: false,
-        },
-        component: () =>
-          import(/* webpackChunkName: "events" */ "@/views/Event.vue"),
-      },
-    ],
-  },
-];

src/router/index.ts

@@ -20,7 +20,6 @@ import { routesMesh } from "./serviceMesh";
 import { routesDatabase } from "./database";
 import { routesInfra } from "./infrastructure";
 import { routesDashboard } from "./dashboard";
-import { routesEvent } from "./event";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
 import { routesSelf } from "./selfObservability";
@@ -39,7 +38,6 @@ const routes: Array<RouteRecordRaw> = [
   ...routesSelf,
   ...routesDashboard,
   ...routesAlarm,
-  ...routesEvent,
   ...routesSetting,
 ];
 

src/store/modules/event.ts

@@ -26,7 +26,6 @@ import { useSelectorStore } from "@/store/modules/selectors";
 interface eventState {
   loading: boolean;
   events: Event[];
-  services: Service[];
   instances: Instance[];
   endpoints: Endpoint[];
   condition: Nullable<QueryEventCondition>;
@@ -37,7 +36,6 @@ export const eventStore = defineStore({
   state: (): eventState => ({
     loading: false,
     events: [],
-    services: [{ value: "", label: "All" }],
     instances: [{ value: "", label: "All" }],
     endpoints: [{ value: "", label: "All" }],
     condition: null,
@@ -46,20 +44,6 @@ export const eventStore = defineStore({
     setEventCondition(data: QueryEventCondition) {
       this.condition = data;
     },
-    async getServices(layer: string) {
-      if (!layer) {
-        this.services = [{ value: "", label: "All" }];
-        return new Promise((resolve) => resolve([]));
-      }
-      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() {
       const serviceId = useSelectorStore().currentService
         ? useSelectorStore().currentService.id

src/styles/reset.scss

@@ -160,7 +160,7 @@ div.vis-tooltip {
   overflow: hidden;
   background-color: #fff !important;
 
-  div {
+  .message {
     word-wrap: break-word !important;
   }
 }

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

@@ -53,8 +53,8 @@ function visTimeline() {
     width: "100%",
     locale: "en",
     tooltip: {
-      template(originalItemData) {
+      template(item) {
-        const data = originalItemData.data || {};
+        const data = item.data || {};
         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>
@@ -64,18 +64,11 @@ function visTimeline() {
           <div class="mb-5"><span>End Time: </span>${
             data.endTime ? visDate(data.endTime) : ""
           }</div>
-        <div style="minHeight: 30px;word-wrap:break-word; max-width:400px">Event Message: ${
+        <div class="message">Event Message: ${data.message || ""}</div>
-          data.message
+         <div>Service: ${data.source.service || ""}</div>
-        }</div>
+          <div>Endpoint: ${data.source.endpoint || ""}
-         <div>Service:
-            ${data.source.service || ""}</div>
-          <div>
-            Endpoint:
-            ${data.source.endpoint || ""}
           </div>
-          <div>
+          <div>Service Instance: ${data.source.instance || ""}
-            Service Instance:
-             ${data.source.instance || ""}
           </div></div>`;
       },
     },

src/views/event/Content.vue

@@ -1,121 +0,0 @@
-<!-- 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>

src/views/event/Header.vue

@@ -1,250 +0,0 @@
-<!-- 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, pager, next"
-        :total="total"
-        @current-change="updatePage"
-        :pager-count="5"
-        small
-      />
-      <!-- <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, computed } 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: "",
-});
-const total = computed(() =>
-  eventStore.events.length === pageSize
-    ? pageSize * pageNum.value + 1
-    : pageSize * pageNum.value
-);
-
-getSelectors();
-
-async function getSelectors() {
-  await getLayers();
-  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 = "";
-  state.layers = [
-    { label: "All", value: "" },
-    ...resp.data.layers.map((d: string) => {
-      return { label: d, value: d };
-    }),
-  ];
-}
-
-async function queryEvents() {
-  eventStore.setEventCondition({
-    paging: {
-      pageNum: pageNum.value,
-      pageSize: pageSize,
-    },
-    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>

src/views/event/data.ts

@@ -1,30 +0,0 @@
-/**
- * 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 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" },
-];