From 591cec17db37af7af40637cf4e11ab692a11c369 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 20 Jun 2022 16:19:52 +0800
Subject: [PATCH] add event header

---
 src/store/modules/event.ts                   |  16 +-
 src/views/dashboard/controls/Event.vue       |  49 +++-
 src/views/dashboard/related/event/Header.vue | 233 +++++++++++++++++++
 src/views/dashboard/related/event/data.ts    |  30 +++
 src/views/event/Header.vue                   |   1 -
 5 files changed, 324 insertions(+), 5 deletions(-)
 create mode 100644 src/views/dashboard/related/event/Header.vue
 create mode 100644 src/views/dashboard/related/event/data.ts

diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts
index 01b6788a..3193f00b 100644
--- a/src/store/modules/event.ts
+++ b/src/store/modules/event.ts
@@ -21,6 +21,7 @@ import { AxiosResponse } from "axios";
 import { Event, QueryEventCondition } from "@/types/events";
 import { Instance, Endpoint, Service } from "@/types/selector";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
 
 interface eventState {
   loading: boolean;
@@ -45,7 +46,7 @@ export const eventStore = defineStore({
   }),
   actions: {
     setEventCondition(data: any) {
-      this.condition = { ...this.condition, ...data };
+      this.condition = data;
     },
     async getServices(layer: string) {
       if (!layer) {
@@ -61,7 +62,10 @@ export const eventStore = defineStore({
       this.services = res.data.data.services;
       return res.data;
     },
-    async getInstances(serviceId: string) {
+    async getInstances() {
+      const serviceId = useSelectorStore().currentService
+        ? useSelectorStore().currentService.id
+        : "";
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
@@ -75,7 +79,13 @@ export const eventStore = defineStore({
       ];
       return res.data;
     },
-    async getEndpoints(serviceId: string) {
+    async getEndpoints() {
+      const serviceId = useSelectorStore().currentService
+        ? useSelectorStore().currentService.id
+        : "";
+      if (!serviceId) {
+        return;
+      }
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
index e18c7694..3c089ae6 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/src/views/dashboard/controls/Event.vue
@@ -13,7 +13,7 @@ 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="log-wrapper flex-v">
+  <div class="event-wrapper flex-v">
     <el-popover
       placement="bottom"
       trigger="click"
@@ -29,11 +29,19 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
+    <div class="header">
+      <Header :needQuery="needQuery" />
+    </div>
+    <!-- <div class="event">
+      <List />
+    </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";
+
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -50,3 +58,42 @@ function removeWidget() {
   dashboardStore.removeControls(props.data);
 }
 </script>
+<style lang="scss" scoped>
+.event-wrapper {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
+  overflow: auto;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 3px;
+}
+
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+  min-width: 1024px;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+
+.event {
+  width: 100%;
+}
+</style>
diff --git a/src/views/dashboard/related/event/Header.vue b/src/views/dashboard/related/event/Header.vue
new file mode 100644
index 00000000..b29f99ed
--- /dev/null
+++ b/src/views/dashboard/related/event/Header.vue
@@ -0,0 +1,233 @@
+<!-- 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="flex-h row">
+    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+      <span class="grey mr-5"> {{ t("instance") }}: </span>
+      <Selector
+        size="small"
+        :value="state.instance.value"
+        :options="eventStore.instances"
+        placeholder="Select a instance"
+        @change="changeField('instance', $event)"
+      />
+    </div>
+    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
+      <span class="grey mr-5"> {{ t("endpoint") }}: </span>
+      <Selector
+        size="small"
+        :value="state.endpoint.value"
+        :options="eventStore.endpoints"
+        placeholder="Select a endpoint"
+        @change="changeField('endpoint', $event)"
+        :isRemote="true"
+        @query="searchEndpoints"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey">{{ t("eventsType") }}: </span>
+      <Selector
+        v-model="state.eventType"
+        :options="EventTypes"
+        placeholder="Select a type"
+        @change="changeField('eventType', $event)"
+        class="event-tool-input"
+        size="small"
+      />
+    </div>
+    <el-pagination
+      v-model:currentPage="pageNum"
+      v-model:page-size="pageSize"
+      layout="prev, pager, next"
+      :total="total"
+      @current-change="updatePage"
+      :pager-count="5"
+      small
+    />
+    <el-button
+      class="search-btn"
+      size="small"
+      type="primary"
+      @click="queryEvents"
+    >
+      {{ t("search") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed, reactive, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useEventStore } from "@/store/modules/event";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
+import { EntityType } from "../../data";
+import { EventTypes } from "./data";
+
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
+const { t } = useI18n();
+const appStore = useAppStoreWithOut();
+const selectorStore = useSelectorStore();
+const dashboardStore = useDashboardStore();
+const eventStore = useEventStore();
+const pageSize = 20;
+const pageNum = ref<number>(1);
+const state = reactive<any>({
+  instance: { value: "", label: "All", id: "" },
+  endpoint: { value: "", label: "All", id: "" },
+  eventType: { value: "", label: "All" },
+});
+const total = computed(() =>
+  eventStore.events.length === pageSize
+    ? pageSize * pageNum.value + 1
+    : pageSize * pageNum.value
+);
+if (props.needQuery) {
+  init();
+}
+async function init() {
+  fetchSelectors();
+  await queryEvents();
+  state.instance = { value: "", label: "All" };
+  state.endpoint = { value: "", label: "All" };
+}
+
+function fetchSelectors() {
+  if (dashboardStore.entity === EntityType[2].value) {
+    getInstances();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[3].value) {
+    getEndpoints();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[0].value) {
+    getInstances();
+    getEndpoints();
+  }
+}
+
+async function getEndpoints(id?: string) {
+  const resp = await eventStore.getEndpoints(id);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.endpoint = eventStore.endpoints[0];
+}
+async function getInstances(id?: string) {
+  const resp = await eventStore.getInstances(id);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.instance = eventStore.instances[0];
+}
+async function queryEvents() {
+  let endpoint = "",
+    instance = "";
+  if (dashboardStore.entity === EntityType[2].value) {
+    endpoint = selectorStore.currentPod.id;
+  }
+  if (dashboardStore.entity === EntityType[3].value) {
+    instance = selectorStore.currentPod.id;
+  }
+  eventStore.setEventCondition({
+    // layer: dashboardStore.layerId,
+    paging: {
+      pageNum: pageNum.value,
+      pageSize: pageSize,
+    },
+    source: {
+      service: selectorStore.currentService.value || "",
+      endpoint: endpoint || "",
+      serviceInstance: instance || "",
+    },
+    type: state.eventType.value || undefined,
+  });
+  const res = await eventStore.getEvents();
+  if (res && res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+function changeField(type: string, opt: any[]) {
+  state[type] = opt[0];
+}
+async function searchEndpoints(keyword: string) {
+  const resp = await eventStore.getEndpoints(keyword);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+  }
+}
+
+function updatePage(p: number) {
+  pageNum.value = p;
+  queryEvents();
+}
+
+watch(
+  () => [selectorStore.currentPod],
+  () => {
+    if (dashboardStore.entity === EntityType[0].value) {
+      return;
+    }
+    init();
+  }
+);
+watch(
+  () => appStore.durationTime,
+  () => {
+    if (dashboardStore.entity === EntityType[1].value) {
+      init();
+    }
+  }
+);
+</script>
+<style lang="scss" scoped>
+.inputs {
+  width: 120px;
+}
+
+.row {
+  position: relative;
+}
+
+.inputs-max {
+  width: 270px;
+}
+
+.search-btn {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  cursor: pointer;
+  width: 120px;
+}
+
+.selected {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 3px;
+  overflow: hidden;
+  color: #3d444f;
+  border: 1px dashed #aaa;
+  font-size: 12px;
+  margin: 0 2px;
+}
+</style>
diff --git a/src/views/dashboard/related/event/data.ts b/src/views/dashboard/related/event/data.ts
new file mode 100644
index 00000000..e5c7d5da
--- /dev/null
+++ b/src/views/dashboard/related/event/data.ts
@@ -0,0 +1,30 @@
+/**
+ * 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" },
+];
diff --git a/src/views/event/Header.vue b/src/views/event/Header.vue
index 3b2da10f..2ca289f6 100644
--- a/src/views/event/Header.vue
+++ b/src/views/event/Header.vue
@@ -80,7 +80,6 @@ limitations under the License. -->
         @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">