feat: update

src/hooks/useExpressionsProcessor.ts

@@ -227,6 +227,8 @@ export async function useExpressionsQueryPodsMetrics(
     const subNames: string[] = [];
     const metricConfigArr: MetricConfigOpt[] = [];
     const metricTypesArr: string[] = [];
+    const expressionsTips: string[] = [];
+    const subExpressionsTips: string[] = [];
     const data = pods.map((d: any, idx: number) => {
       for (let index = 0; index < config.expressions.length; index++) {
         const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[index]) || {};
@@ -235,8 +237,11 @@ export async function useExpressionsQueryPodsMetrics(
         const obj = resp.data[k] || {};
         const results = obj.results || [];
         const typesOfMQE = obj.type || "";
-        const subResults = (resp.data[sub] && resp.data[sub].results) || [];
+        const subObj = resp.data[sub] || {};
+        const subResults = subObj.results || [];
 
+        expressionsTips.push(obj.error);
+        subExpressionsTips.push(subObj.error);
         if (results.length > 1) {
           const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
           const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
@@ -292,7 +297,7 @@ export async function useExpressionsQueryPodsMetrics(
       return d;
     });
 
-    return { data, names, subNames, metricConfigArr, metricTypesArr };
+    return { data, names, subNames, metricConfigArr, metricTypesArr, expressionsTips, subExpressionsTips };
   }
   const dashboardStore = useDashboardStore();
   const params = await expressionsGraphqlPods();

src/views/dashboard/configuration/Widget.vue

@@ -45,6 +45,7 @@ limitations under the License. -->
             subTypesOfMQE: dashboardStore.selectedGrid.subTypesOfMQE || [],
           }"
           :needQuery="true"
+          @expressionTips="getErrors"
         />
         <div v-show="!graph.type" class="no-data">
           {{ t("noData") }}
@@ -54,7 +55,7 @@ limitations under the License. -->
     <div class="collapse" :style="{ height: configHeight + 'px' }">
       <el-collapse v-model="states.activeNames" :style="{ '--el-collapse-header-font-size': '15px' }">
         <el-collapse-item :title="t('selectVisualization')" name="1">
-          <MetricOptions @update="getSource" @loading="setLoading" />
+          <MetricOptions @update="getSource" @loading="setLoading" :errors="errors" :subErrors="subErrors" />
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="2">
           <component :is="`${graph.type}Config`" />
@@ -102,6 +103,8 @@ limitations under the License. -->
       const dashboardStore = useDashboardStore();
       const appStoreWithOut = useAppStoreWithOut();
       const loading = ref<boolean>(false);
+      const errors = ref<string[]>([]);
+      const subErrors = ref<string[]>([]);
       const states = reactive<{
         activeNames: string;
         source: unknown;
@@ -128,6 +131,11 @@ limitations under the License. -->
         states.source = source;
       }
 
+      function getErrors(params: { tips: string[]; subTips: string[] }) {
+        errors.value = params.tips;
+        subErrors.value = params.subTips;
+      }
+
       function setLoading(load: boolean) {
         loading.value = load;
       }
@@ -169,12 +177,15 @@ limitations under the License. -->
         applyConfig,
         cancelConfig,
         getSource,
+        getErrors,
         setLoading,
         widget,
         graph,
         title,
         tips,
         hasAssociate,
+        errors,
+        subErrors,
       };
     },
   });

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -93,8 +93,12 @@ limitations under the License. -->
       />
       <Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
     </span>
-    <div v-if="states.tips[index] && isExpression" class="ml-10 red sm">{{ states.tips[index] }}</div>
-    <div v-if="states.tips[index] && isExpression" class="ml-10 red sm">{{ states.tips[index] }}</div>
+    <div v-if="(errors || states.tips)[index] && isExpression" class="ml-10 red sm">
+      {{ (errors || states.tips)[index] }}
+    </div>
+    <div v-if="(subErrors || states.tips)[index] && isExpression" class="ml-10 red sm">
+      {{ (subErrors || states.tips)[index] }}
+    </div>
   </div>
   <div>{{ t("visualization") }}</div>
   <div class="chart-types">
@@ -110,6 +114,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
   import { reactive, ref, computed } from "vue";
+  import type { PropType } from "vue";
   import type { Option } from "@/types/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import {
@@ -135,6 +140,15 @@ limitations under the License. -->
   /*global defineEmits, Indexable */
   const { t } = useI18n();
   const emit = defineEmits(["update", "loading"]);
+  /*global defineProps */
+  defineProps({
+    errors: {
+      type: Array as PropType<string[]>,
+    },
+    subErrors: {
+      type: Array as PropType<string[]>,
+    },
+  });
   const dashboardStore = useDashboardStore();
   const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
   const metrics = computed(

src/views/dashboard/graphs/EndpointList.vue

@@ -96,6 +96,7 @@ limitations under the License. -->
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   });
 
+  const emit = defineEmits(["expressionTips"]);
   const { t } = useI18n();
   const selectorStore = useSelectorStore();
   const dashboardStore = useDashboardStore();
@@ -181,6 +182,7 @@ limitations under the License. -->
       metricTypes.value = params.metricTypesArr;
       metricConfig.value = params.metricConfigArr;
       colSubMetrics.value = params.colSubMetrics;
+      emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
 
       return;
     }
@@ -189,6 +191,7 @@ limitations under the License. -->
     colSubMetrics.value = [];
     metricTypes.value = [];
     metricConfig.value = [];
+    emit("expressionTips", [], []);
   }
   function clickEndpoint(scope: any) {
     const { dashboard } = getDashboard({

src/views/dashboard/graphs/InstanceList.vue

@@ -122,6 +122,7 @@ limitations under the License. -->
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
     needQuery: { type: Boolean, default: false },
   });
+  const emit = defineEmits(["expressionTips"]);
   const { t } = useI18n();
   const selectorStore = useSelectorStore();
   const dashboardStore = useDashboardStore();
@@ -193,6 +194,7 @@ limitations under the License. -->
       colMetrics.value = names;
       metricTypes.value = metricTypesArr;
       metricConfig.value = metricConfigArr;
+
       return;
     }
     instances.value = currentInstances;
@@ -216,6 +218,7 @@ limitations under the License. -->
       colSubMetrics.value = params.colSubMetrics;
       metricTypes.value = params.metricTypesArr;
       metricConfig.value = params.metricConfigArr;
+      emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
 
       return;
     }
@@ -224,6 +227,7 @@ limitations under the License. -->
     colMetrics.value = [];
     metricTypes.value = [];
     metricConfig.value = [];
+    emit("expressionTips", [], []);
   }
 
   function clickInstance(scope: any) {

src/views/dashboard/graphs/ServiceList.vue

@@ -114,6 +114,7 @@ limitations under the License. -->
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
     isEdit: { type: Boolean, default: false },
   });
+  const emit = defineEmits(["expressionTips"]);
   const selectorStore = useSelectorStore();
   const dashboardStore = useDashboardStore();
   const appStore = useAppStoreWithOut();
@@ -264,6 +265,7 @@ limitations under the License. -->
       colSubMetrics.value = params.subNames;
       metricTypes.value = params.metricTypesArr;
       metricConfig.value = params.metricConfigArr;
+      emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
       return;
     }
     services.value = currentServices;
@@ -271,6 +273,7 @@ limitations under the License. -->
     colSubMetrics.value = [];
     metricTypes.value = [];
     metricConfig.value = [];
+    emit("expressionTips", [], []);
   }
   function objectSpanMethod(param: any): any {
     if (!props.config.showGroup) {