From 57f13f2ac535c710a60478cacc690381071217bf Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 11 Dec 2023 17:18:11 +0800
Subject: [PATCH] feat: update config

---
 src/locales/lang/en.ts                    |  1 +
 src/locales/lang/es.ts                    |  1 +
 src/locales/lang/zh.ts                    |  1 +
 src/types/dashboard.d.ts                  |  2 +-
 src/views/dashboard/configuration/Tab.vue | 32 +++++++++++++++++------
 src/views/dashboard/controls/Tab.vue      |  9 +++++--
 6 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 43987752..797b463f 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -384,5 +384,6 @@ const msg = {
   unhealthyExpression: "Unhealthy Expression",
   traceDesc:
     "The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
+  tabExpressions: "Tab Expressions",
 };
 export default msg;
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 801c2ca3..18a2d46f 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -384,5 +384,6 @@ const msg = {
   unhealthyExpression: "Unhealthy Expression",
   traceDesc:
     "The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
+  tabExpressions: "Tab Expressions",
 };
 export default msg;
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 3225a3ac..36962afc 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -382,5 +382,6 @@ const msg = {
   unhealthyExpression: "非健康表达式",
   traceDesc:
     "Trace Segment代表在单一操作系统进程（例如JVM）中执行的追踪部分。它包含了一组跨度（spans），这些跨度通常与单一请求或执行上下文关联。",
+  tabExpressions: "Tab表达式",
 };
 export default msg;
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index 8612c10e..fde95f53 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -36,7 +36,7 @@ export interface LayoutConfig {
   expressions?: string[];
   metricTypes?: string[];
   typesOfMQE?: string[];
-  children?: { name: string; children: LayoutConfig[] }[];
+  children?: { name: string; children: LayoutConfig[]; expression?: string }[];
   activedTabIndex?: number;
   metricConfig?: MetricConfigOpt[];
   id?: string;
diff --git a/src/views/dashboard/configuration/Tab.vue b/src/views/dashboard/configuration/Tab.vue
index 7be6e1b7..d9d81894 100644
--- a/src/views/dashboard/configuration/Tab.vue
+++ b/src/views/dashboard/configuration/Tab.vue
@@ -12,8 +12,11 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="item">
-    <span class="label">{{ t("expressions") }}</span>
-    <el-input class="input" v-model="expressions" size="small" @change="changeConfig" />
+    <span class="label">{{ t("tabExpressions") }}</span>
+    <div class="mt-10" v-for="(child, index) in dashboardStore.selectedGrid.children || []" :key="index">
+      <span class="name">{{ child.name }}</span>
+      <el-input class="input" size="small" v-model="expressions[child.name]" @change="changeExpression(child.name)" />
+    </div>
   </div>
   <div class="footer">
     <el-button size="small" @click="cancelConfig">
@@ -26,23 +29,31 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
   import { useI18n } from "vue-i18n";
-  import { ref } from "vue";
+  import { reactive } from "vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { ElMessage } from "element-plus";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const originConfig = dashboardStore.selectedGrid;
-  const expressions = ref<string>(originConfig.expressions);
+  const expressions = reactive<{ [key: string]: string }>({});
 
-  function changeConfig() {
-    if (!expressions.value.includes("is_present")) {
+  for (const child of originConfig.children || []) {
+    expressions[child.name] = child.expression || "";
+  }
+  function changeExpression(name: string) {
+    if (!expressions[name].includes("is_present")) {
       ElMessage.error("Only support the is_present function");
       return;
     }
-    const { selectedGrid } = dashboardStore;
+    const children = dashboardStore.selectedGrid.children || [];
 
-    dashboardStore.selectWidget({ ...selectedGrid, expressions: expressions.value });
+    for (const item of children) {
+      if (item.name === name) {
+        item.expression = expressions[name];
+      }
+    }
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, children });
   }
   function applyConfig() {
     dashboardStore.setConfigPanel(false);
@@ -80,4 +91,9 @@ limitations under the License. -->
     width: 100%;
     background-color: $theme-background;
   }
+
+  .name {
+    width: 180px;
+    display: inline-block;
+  }
 </style>
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 687589e0..566df337 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -149,6 +149,7 @@ limitations under the License. -->
         dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
         dashboardStore.setActiveTabIndex(activeTabIndex.value, props.data.i);
       }
+      console.log(props.data);
 
       // if (props.needQuery || !dashboardStore.currentDashboard.id) {
       //   queryExpressions();
@@ -240,12 +241,16 @@ limitations under the License. -->
       }
 
       async function queryExpressions() {
-        const params = (await useExpressionsQueryProcessor({ metrics: [props.data.expressions] })) || {};
+        const metrics = [];
+        for (const child of props.data.children || []) {
+          child.expression && metrics.push(child.expression);
+        }
+        const params = (await useExpressionsQueryProcessor({ metrics })) || {};
         console.log(params);
       }
 
       watch(
-        () => props.data.expressions,
+        () => (props.data.children || []).map((d: { name: string }) => d.name),
         () => {
           queryExpressions();
         },