From 4c60f69aef71e1e91b5cb4dc8b1e9c60c3be0004 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Fri, 18 Oct 2024 14:48:55 +0800
Subject: [PATCH] Fix Value Mappings (#423)

---
 .../widget/graph-styles/components/ValueMappings.vue  |  7 +++++--
 src/views/dashboard/graphs/Card.vue                   | 10 ++++++++--
 src/views/dashboard/graphs/Table.vue                  | 11 +++++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue b/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue
index cc6d1bac..a08cbddc 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div>
     <span class="label">{{ t("valueMappings") }}</span>
-    <span class="label red">({{ t("mappingTip") }})</span>
+    <span class="label red">{{ t("mappingTip") }}</span>
   </div>
   <div v-for="(key, index) in keys" :key="index" class="mb-10 flex-h">
     <div class="content-decoration" contenteditable="true" @blur="changeKeys($event, index)">
@@ -56,6 +56,9 @@ limitations under the License. -->
     }
     delete valueMappings.value[list[index]];
     keys.value = Object.keys(valueMappings.value);
+    if (!keys.value.length) {
+      keys.value = [""];
+    }
     updateConfig();
   }
 
@@ -87,7 +90,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .content-decoration {
-    width: 200px;
+    width: 350px;
     border: 1px solid $border-color;
     cursor: text;
     padding: 0 5px;
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index ff040ee6..029e5e9c 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -34,6 +34,7 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import type { CardConfig, MetricConfigOpt } from "@/types/dashboard";
+  import { ElMessage } from "element-plus";
 
   /*global defineProps */
   const props = defineProps({
@@ -67,8 +68,13 @@ limitations under the License. -->
     }
     const list = Object.keys(valueMappings.value);
     for (const i of list) {
-      if (new RegExp(i).test(String(singleVal.value))) {
-        return valueMappings.value[i] || singleVal.value;
+      try {
+        if (new RegExp(i).test(String(singleVal.value))) {
+          return valueMappings.value[i] || singleVal.value;
+        }
+      } catch (e) {
+        ElMessage.error("invalid regex string");
+        return singleVal.value;
       }
     }
     return singleVal.value;
diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue
index ffc62d3d..7ae83229 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -47,6 +47,8 @@ limitations under the License. -->
   import { computed } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
+  import { ElMessage } from "element-plus";
+
   /*global defineProps */
   const props = defineProps({
     data: {
@@ -83,8 +85,13 @@ limitations under the License. -->
     }
     const list = Object.keys(valueMappings.value);
     for (const i of list) {
-      if (new RegExp(i).test(String(source))) {
-        return valueMappings.value[i] || source;
+      try {
+        if (new RegExp(i).test(String(source))) {
+          return valueMappings.value[i] || source;
+        }
+      } catch (e) {
+        ElMessage.error("invalid regex string");
+        return source;
       }
     }
     return source;