From d9d928cc4fec0b3a09b9f53c7bf0326e57a077ed Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 17 May 2022 19:50:11 +0800
Subject: [PATCH] add demand log widget

---
 src/assets/icons/demand.svg                | 15 ++++
 src/store/modules/dashboard.ts             | 11 ++-
 src/views/dashboard/controls/DemandLog.vue | 95 ++++++++++++++++++++++
 src/views/dashboard/controls/Tab.vue       |  3 +-
 src/views/dashboard/controls/index.ts      | 13 ++-
 src/views/dashboard/data.ts                |  1 +
 src/views/dashboard/panel/Tool.vue         |  6 ++
 7 files changed, 140 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/icons/demand.svg
 create mode 100644 src/views/dashboard/controls/DemandLog.vue

diff --git a/src/assets/icons/demand.svg b/src/assets/icons/demand.svg
new file mode 100644
index 00000000..e9fc97fa
--- /dev/null
+++ b/src/assets/icons/demand.svg
@@ -0,0 +1,15 @@
+<!-- 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. -->
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="48px" height="48.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#515151" d="M994.504704 650.283008c-2.920448-2.402304-6.203392-3.612672-9.752576-3.612672-8.183808 0-15.327232 6.424576-15.39072 6.469632l-222.119936 204.71808-90.068992-71.8848c-5.277696-4.743168-10.61888-7.145472-15.86176-7.145472-4.067328 0-8.056832 1.396736-11.872256 4.179968-12.955648 9.549824-2.85696 25.647104-2.512896 26.228736l99.508224 134.234112c5.85728 6.832128 11.88864 10.30144 17.983488 10.30144 10.162176 0 17.416192-9.771008 17.590272-9.988096l230.445056-269.959168c9.043968-12.642304 5.554176-20.727808 2.052096-23.54176zM834.873344 300.804096c0-14.307328-11.636736-25.946112-25.946112-25.946112H345.165824c-14.307328 0-25.946112 11.636736-25.946112 25.946112s11.636736 25.946112 25.946112 25.946112h463.761408c14.309376 0 25.946112-11.638784 25.946112-25.946112zM345.165824 666.806272c-14.307328 0-25.946112 11.636736-25.946112 25.946112s11.636736 25.946112 25.946112 25.946112h274.434048c14.292992 0 25.929728-11.636736 25.929728-25.946112s-11.636736-25.946112-25.929728-25.946112H345.165824z"  /><path fill="#515151" d="M630.665216 957.85984l-1.097728-0.565248 0.03072-2.322432H113.221632c-14.3872 0-19.003392-4.601856-19.003392-18.987008V92.325888c0-14.3872 4.616192-18.987008 19.003392-18.987008h788.219904c14.370816 0 18.987008 4.601856 18.987008 18.987008v439.812096h0.077824l0.077824 1.931264c0.581632 13.899776 11.966464 24.784896 25.946112 24.784896 13.821952 0 25.22112-10.883072 25.946112-24.799232l0.141312-1.130496v-485.376c0-14.323712-11.636736-25.960448-25.929728-25.960448H68.11648c-14.292992 0-25.929728 11.636736-25.929728 25.960448v933.367808c0 14.307328 11.636736 25.946112 25.929728 25.946112h560.77312l0.014336-2.025472 1.14688-0.548864c9.078784-4.366336 14.71488-13.318144 14.71488-23.369728 0.002048-9.740288-5.402624-18.581504-14.10048-23.058432z"  /><path fill="#515151" d="M782.833664 496.621568c0-14.307328-11.636736-25.946112-25.960448-25.946112H345.157632c-14.292992 0-25.931776 11.638784-25.931776 25.946112 0 14.307328 11.636736 25.946112 25.931776 25.946112h411.715584c14.323712 0 25.960448-11.638784 25.960448-25.946112zM203.145216 471.508992a38.371328 38.371328 0 0 0-11.167744 26.966016c0 10.051584 4.067328 19.884032 11.167744 26.966016a38.42048 38.42048 0 0 0 26.980352 11.18208c10.0352 0 19.8656-4.081664 26.966016-11.18208 7.100416-7.100416 11.167744-16.930816 11.167744-26.966016s-4.067328-19.8656-11.167744-26.966016c-7.100416-7.100416-16.930816-11.18208-26.966016-11.18208a38.44096 38.44096 0 0 0-26.980352 11.18208zM224.708608 262.664192c-10.051584 0-19.884032 4.067328-26.966016 11.167744-7.100416 7.100416-11.18208 16.930816-11.18208 26.966016s4.081664 19.884032 11.18208 26.980352c7.084032 7.100416 16.914432 11.167744 26.966016 11.167744 10.0352 0 19.8656-4.067328 26.980352-11.167744 7.100416-7.100416 11.167744-16.945152 11.167744-26.980352s-4.067328-19.8656-11.167744-26.966016a38.449152 38.449152 0 0 0-26.980352-11.167744zM230.121472 731.971584c10.051584 0 19.8656-4.067328 26.966016-11.167744 7.114752-7.114752 11.18208-16.945152 11.18208-26.966016 0-10.051584-4.067328-19.8656-11.18208-26.980352a38.371328 38.371328 0 0 0-26.966016-11.167744c-10.051584 0-19.884032 4.067328-26.966016 11.167744a38.361088 38.361088 0 0 0-11.18208 26.980352c0 10.0352 4.067328 19.8656 11.18208 26.966016 7.081984 7.100416 16.912384 11.167744 26.966016 11.167744z"  /></svg>
\ No newline at end of file
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 2ed20f17..596ac8b6 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -114,7 +114,8 @@ export const dashboardStore = defineStore({
         type === "Trace" ||
         type === "Profile" ||
         type === "Log" ||
-        type === "Ebpf"
+        type === "Ebpf" ||
+        type === "DemandLog"
       ) {
         newItem.h = 36;
       }
@@ -170,7 +171,13 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (type === "Trace" || type === "Profile" || type === "Log") {
+      if (
+        type === "Trace" ||
+        type === "Profile" ||
+        type === "Log" ||
+        type === "DemandLog" ||
+        type === "Ebpf"
+      ) {
         newItem.h = 32;
       }
       if (type === "Text") {
diff --git a/src/views/dashboard/controls/DemandLog.vue b/src/views/dashboard/controls/DemandLog.vue
new file mode 100644
index 00000000..d1323ae9
--- /dev/null
+++ b/src/views/dashboard/controls/DemandLog.vue
@@ -0,0 +1,95 @@
+<!-- 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="log-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 />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import Header from "../related/log/Header.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  activeIndex: { type: String, default: "" },
+});
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+
+function removeWidget() {
+  dashboardStore.removeControls(props.data);
+}
+</script>
+<style lang="scss" scoped>
+.log-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;
+  }
+}
+
+.log {
+  width: 100%;
+}
+</style>
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 524e9f7e..c6909ec4 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -110,6 +110,7 @@ import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
 import { dragIgnoreFrom } from "../data";
+import DemandLog from "./DemandLog.vue";
 
 const props = {
   data: {
@@ -120,7 +121,7 @@ const props = {
 };
 export default defineComponent({
   name: "Tab",
-  components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf },
+  components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf, DemandLog },
   props,
   setup(props) {
     const { t } = useI18n();
diff --git a/src/views/dashboard/controls/index.ts b/src/views/dashboard/controls/index.ts
index 01fc5dc5..858bc5c5 100644
--- a/src/views/dashboard/controls/index.ts
+++ b/src/views/dashboard/controls/index.ts
@@ -22,5 +22,16 @@ import Profile from "./Profile.vue";
 import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
+import DemandLog from "./DemandLog.vue";
 
-export default { Tab, Widget, Trace, Topology, Profile, Log, Text, Ebpf };
+export default {
+  Tab,
+  Widget,
+  Trace,
+  Topology,
+  Profile,
+  Log,
+  Text,
+  Ebpf,
+  DemandLog,
+};
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index c6e4bc32..50a22538 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -193,6 +193,7 @@ export const InstanceTools = [
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "assignment", content: "Add Log", id: "addLog" },
+  { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
 ];
 export const EndpointTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index bc96d8c3..8d8ed374 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -455,6 +455,9 @@ function setTabControls(id: string) {
     case "addText":
       dashboardStore.addTabControls("Text");
       break;
+    case "addDemandLog":
+      dashboardStore.addTabControls("DemandLog");
+      break;
     default:
       ElMessage.info("Don't support this control");
       break;
@@ -487,6 +490,9 @@ function setControls(id: string) {
     case "addText":
       dashboardStore.addControl("Text");
       break;
+    case "addDemandLog":
+      dashboardStore.addControl("DemandLog");
+      break;
     default:
       dashboardStore.addControl("Widget");
   }