feat: Implement the Event widget (#112)

src/views/dashboard/controls/Event.vue

@@ -0,0 +1,102 @@
+<!-- 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-wrapper flex-v">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      :width="100"
+      v-if="dashboardStore.editMode"
+    >
+      <template #reference>
+        <span class="delete cp">
+          <Icon iconName="ellipsis_v" size="middle" class="operation" />
+        </span>
+      </template>
+      <div class="tools" @click="removeWidget">
+        <span>{{ t("delete") }}</span>
+      </div>
+    </el-popover>
+    <div class="header">
+      <Header :needQuery="needQuery" />
+    </div>
+    <div class="event">
+      <Content />
+    </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({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
+});
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+
+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;
+  z-index: 9999;
+}
+
+.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%;
+  height: calc(100% - 80px);
+}
+</style>

src/views/dashboard/controls/Tab.vue

@@ -37,13 +37,6 @@ limitations under the License. -->
           v-if="dashboardStore.editMode && canEditTabName"
         />
       </span>
-      <span class="tab-icons" v-if="dashboardStore.editMode">
-        <el-tooltip content="Add tab items" placement="bottom">
-          <i @click="addTabItem">
-            <Icon size="middle" iconName="add" class="tab-icon" />
-          </i>
-        </el-tooltip>
-      </span>
       <span class="tab-icons">
         <el-tooltip content="Copy Link" placement="bottom">
           <i @click="copyLink">
@@ -51,6 +44,13 @@ limitations under the License. -->
           </i>
         </el-tooltip>
       </span>
+      <span class="tab-icons" v-if="dashboardStore.editMode">
+        <el-tooltip content="Add tab items" placement="bottom">
+          <i @click="addTabItem">
+            <Icon size="middle" iconName="add_fill" class="tab-icon" />
+          </i>
+        </el-tooltip>
+      </span>
     </div>
     <div class="operations" v-if="dashboardStore.editMode">
       <el-dropdown placement="bottom" trigger="click" :width="200">
@@ -117,6 +117,7 @@ import Profile from "./Profile.vue";
 import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
+import Event from "./Event.vue";
 import { dragIgnoreFrom } from "../data";
 import DemandLog from "./DemandLog.vue";
 import copy from "@/utils/copy";
@@ -130,7 +131,17 @@ const props = {
 };
 export default defineComponent({
   name: "Tab",
-  components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf, DemandLog },
+  components: {
+    Topology,
+    Widget,
+    Trace,
+    Profile,
+    Log,
+    Text,
+    Ebpf,
+    DemandLog,
+    Event,
+  },
   props,
   setup(props) {
     const { t } = useI18n();
@@ -199,6 +210,7 @@ export default defineComponent({
       editTabIndex.value = index;
     }
     function handleClick(el: any) {
+      needQuery.value = true;
       if (["tab-name", "edit-tab"].includes(el.target.className)) {
         return;
       }

src/views/dashboard/controls/index.ts

@@ -23,6 +23,7 @@ import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
 import DemandLog from "./DemandLog.vue";
+import Event from "./Event.vue";
 
 export default {
   Tab,
@@ -34,4 +35,5 @@ export default {
   Text,
   Ebpf,
   DemandLog,
+  Event,
 };