From 2f043cadbf130f3046eb20212a0d742993c89b5f Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 7 Dec 2023 11:28:02 +0800
Subject: [PATCH] feat: add tab config view

---
 src/views/dashboard/configuration/Tab.vue  | 105 +++++++++++++++++++++
 src/views/dashboard/configuration/index.ts |   2 +
 src/views/dashboard/controls/Tab.vue       |   9 ++
 3 files changed, 116 insertions(+)
 create mode 100644 src/views/dashboard/configuration/Tab.vue

diff --git a/src/views/dashboard/configuration/Tab.vue b/src/views/dashboard/configuration/Tab.vue
new file mode 100644
index 00000000..86a6bfe1
--- /dev/null
+++ b/src/views/dashboard/configuration/Tab.vue
@@ -0,0 +1,105 @@
+<!-- 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="item">
+    <span class="label">{{ t("content") }}</span>
+    <div v-for="(exp, index) in expressions" :key="index" class="mb-10">
+      <div class="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
+        {{ exp }}
+      </div>
+    </div>
+  </div>
+  <div class="footer">
+    <el-button size="small" @click="cancelConfig">
+      {{ t("cancel") }}
+    </el-button>
+    <el-button size="small" type="primary" @click="applyConfig">
+      {{ t("apply") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { useI18n } from "vue-i18n";
+  import { ref } from "vue";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  const { t } = useI18n();
+  const dashboardStore = useDashboardStore();
+  const originConfig = dashboardStore.selectedGrid;
+  const expressions = ref<string[]>(originConfig.expressions || []);
+
+  async function changeExpression(event: any, index: number) {
+    const params = (event.target.textContent || "").replace(/\s+/g, "");
+
+    expressions.value[index] = params;
+    dashboardStore.selectWidget({
+      ...dashboardStore.selectedGrid,
+      expressions: expressions.value,
+    });
+  }
+  function changeConfig(param: { [key: string]: unknown }) {
+    const { selectedGrid } = dashboardStore;
+    const graph = {
+      ...selectedGrid.graph,
+      ...param,
+    };
+    dashboardStore.selectWidget({ ...selectedGrid, graph });
+  }
+  function applyConfig() {
+    dashboardStore.setConfigPanel(false);
+    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+  }
+
+  function cancelConfig() {
+    dashboardStore.selectWidget(originConfig);
+    dashboardStore.setConfigPanel(false);
+  }
+</script>
+<style lang="scss" scoped>
+  .expression-param {
+    display: inline-block;
+    width: 400px;
+    border: 1px solid $border-color;
+    cursor: text;
+    padding: 0 5px;
+    border-radius: 3px;
+    outline: none;
+    margin-right: 5px;
+    min-height: 26px;
+
+    &:focus {
+      border-color: $active-color;
+    }
+  }
+
+  .label {
+    font-size: 13px;
+    font-weight: 500;
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .item {
+    margin-bottom: 10px;
+  }
+
+  .footer {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    border-top: 1px solid $border-color-primary;
+    padding: 10px;
+    text-align: right;
+    width: 100%;
+    background-color: $theme-background;
+  }
+</style>
diff --git a/src/views/dashboard/configuration/index.ts b/src/views/dashboard/configuration/index.ts
index aadb8f33..aa4b8c85 100644
--- a/src/views/dashboard/configuration/index.ts
+++ b/src/views/dashboard/configuration/index.ts
@@ -22,8 +22,10 @@ import Event from "./Event.vue";
 import TimeRange from "./TimeRange.vue";
 import ThirdPartyApp from "./ThirdPartyApp.vue";
 import ContinuousProfiling from "./ContinuousProfiling.vue";
+import Tab from "./Tab.vue";
 
 export default {
+  Tab,
   Text,
   Widget,
   Topology,
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 18977897..0225695b 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -60,6 +60,9 @@ limitations under the License. -->
         </span>
         <template #dropdown>
           <el-dropdown-menu>
+            <el-dropdown-item @click="editConfig">
+              <span>{{ t("edit") }}</span>
+            </el-dropdown-item>
             <el-dropdown-item @click="canEditTabName = true">
               <span class="edit-tab">{{ t("editTab") }}</span>
             </el-dropdown-item>
@@ -224,6 +227,11 @@ limitations under the License. -->
         copy(path);
       }
       document.body.addEventListener("click", handleClick, false);
+
+      function editConfig() {
+        dashboardStore.setConfigPanel(true);
+        dashboardStore.selectWidget(props.data);
+      }
       watch(
         () => dashboardStore.activedGridItem,
         (data) => {
@@ -266,6 +274,7 @@ limitations under the License. -->
         clickTabs,
         copyLink,
         getStringWidth,
+        editConfig,
         ...toRefs(props),
         activeTabWidget,
         dashboardStore,