feat: update exprssion processor

src/hooks/useExpressionsProcessor.ts

@@ -55,18 +55,8 @@ export function useExpressionsQueryProcessor(config: {
     return;
   }
   const fragment = config.metrics.map((name: string, index: number) => {
-    variables.push(`expression${index}: String!`, `$entity${index}: Entity!`);
-    const metricType = config.metricTypes[index] || "";
-    const c = (config.metricConfig && config.metricConfig[index]) || {};
+    variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`);
     conditions[`expression${index}`] = name;
-    if ([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST as string].includes(metricType)) {
-      conditions[`entity${index}`] = {
-        parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value,
-        normal: selectorStore.currentService ? selectorStore.currentService.normal : true,
-        topN: Number(c.topN) || 10,
-        order: c.sortOrder || "DES",
-      };
-    } else {
     const entity = {
       serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
       normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
@@ -94,26 +84,7 @@ export function useExpressionsQueryProcessor(config: {
         ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
         : undefined,
     };
-      if ([ExpressionResultType.RECORD_LIST as string].includes(metricType)) {
-        conditions[`entity${index}`] = {
-          parentEntity: entity,
-          topN: Number(c.topN) || 10,
-          order: c.sortOrder || "DES",
-        };
-      } else {
-        // if (metricType === ExpressionResultType.TIME_SERIES_VALUES) {
-        //   const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-        //   variables.push(`$labels${index}: [String!]!`);
-        //   conditions[`labels${index}`] = labels;
-        // }
-        conditions[`entity${index}`] = {
-          entity,
-        };
-      }
-    }
-    // if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
-    //   return `${name}${index}: ${metricType}(condition: $condition${index}, labels: $labels${index}, duration: $duration)${RespFields[metricType]}`;
-    // }
+    conditions[`entity${index}`] = entity;
 
     return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
   });
@@ -145,22 +116,20 @@ export function useExpressionsSourceProcessor(
   const keys = Object.keys(resp.data);
 
   config.metricTypes.forEach((type: string, index) => {
-    const m = config.metrics[index];
     const c = (config.metricConfig && config.metricConfig[index]) || {};
+    const results = (resp.data[keys[index]] && resp.data[keys[index]].results) || [];
+    const name = ((results[0] || {}).metric || {}).name;
 
     if (type === ExpressionResultType.TIME_SERIES_VALUES) {
-      source[c.label || m] = (resp.data[keys[index]] && calculateExp(resp.data.results[keys[index]].values, c)) || [];
+      source[c.label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
+      return;
     }
     if (type === ExpressionResultType.SINGLE_VALUE) {
-      const v = Object.values(resp.data)[0] || {};
-      source[m] = v.isEmptyValue ? NaN : aggregation(Number(v.value), c);
+      source[c.label || name] = results[0].values[0].value;
+      return;
     }
     if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) {
-      source[m] = (Object.values(resp.data)[0] || []).map((d: { value: unknown; name: string }) => {
-        d.value = aggregation(Number(d.value), c);
-
-        return d;
-      });
+      source[name] = results[0].values;
     }
   });
 

src/hooks/useMetricsProcessor.ts

@@ -22,7 +22,6 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import type { Instance, Endpoint, Service } from "@/types/selector";
 import type { MetricConfigOpt } from "@/types/dashboard";
-import { MetricCatalog } from "@/views/dashboard/data";
 
 export function useQueryProcessor(config: Indexable) {
   if (!(config.metrics && config.metrics[0])) {
@@ -179,6 +178,7 @@ export function useSourceProcessor(
 
         return d;
       });
+      console.log(source);
     }
     if (type === MetricQueryTypes.READHEATMAP) {
       const resVal = Object.values(resp.data)[0] || {};

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

@@ -42,7 +42,7 @@ limitations under the License. -->
       placeholder="Please input a expression"
       @change="changeExpression"
     /> -->
-    <div v-if="isExpression" id="expression-param" contenteditable="true" @input="changeExpression($event, index)">
+    <div v-if="isExpression" id="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
       {{ metric }}
     </div>
     <span v-else>
@@ -71,7 +71,12 @@ limitations under the License. -->
       </template>
       <Standard @update="queryMetrics" :currentMetricConfig="currentMetricConfig" :index="index" />
     </el-popover>
-    <span>
+    <span
+      v-show="
+        states.isList ||
+        [ProtocolTypes.ReadMetricsValues, ExpressionResultType.TIME_SERIES_VALUES as string].includes(states.metricTypes[0])
+      "
+    >
       <Icon
         class="cp mr-5"
         v-if="index === states.metrics.length - 1 && states.metrics.length < defaultLen"
@@ -81,6 +86,7 @@ limitations under the License. -->
       />
       <Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
     </span>
+    <span v-if="states.tips[index]" class="ml-10 red">{{ states.tips[index] }}</span>
   </div>
   <div>{{ t("visualization") }}</div>
   <div class="chart-types">
@@ -108,6 +114,8 @@ limitations under the License. -->
     ChartTypes,
     PodsChartTypes,
     MetricsType,
+    ProtocolTypes,
+    ExpressionResultType,
   } from "../../../data";
   import { ElMessage } from "element-plus";
   import Icon from "@/components/Icon.vue";
@@ -137,6 +145,7 @@ limitations under the License. -->
     metricList: (Option & { type: string })[];
     dashboardName: string;
     dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
+    tips: string[];
   }>({
     metrics: metrics.value.length ? metrics.value : [""],
     metricTypes: metricTypes.value.length ? metricTypes.value : [""],
@@ -145,6 +154,7 @@ limitations under the License. -->
     metricList: [],
     dashboardName: graph.value.dashboardName,
     dashboardList: [{ label: "", value: "" }],
+    tips: [],
   });
   const currentMetricConfig = ref<MetricConfigOpt>({
     unit: "",
@@ -322,11 +332,11 @@ limitations under the License. -->
     queryMetrics();
   }
   async function queryMetrics() {
-    if (isExpression.value) {
-      queryMetricsWithExpressions();
+    if (states.isList) {
       return;
     }
-    if (states.isList) {
+    if (isExpression.value) {
+      queryMetricsWithExpressions();
       return;
     }
     const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
@@ -351,9 +361,6 @@ limitations under the License. -->
   }
 
   async function queryMetricsWithExpressions() {
-    if (states.isList) {
-      return;
-    }
     const { metricConfig, typesOfMQE, expressions } = dashboardStore.selectedGrid;
     if (!(expressions && expressions[0] && typesOfMQE && typesOfMQE[0])) {
       return;
@@ -393,6 +400,7 @@ limitations under the License. -->
   }
   function addMetric() {
     states.metrics.push("");
+    states.tips.push("");
     if (!states.isList) {
       states.metricTypes.push(states.metricTypes[0]);
       if (!isExpression.value) {
@@ -406,6 +414,7 @@ limitations under the License. -->
     if (states.metrics.length === 1) {
       states.metrics = [""];
       states.metricTypes = [""];
+      states.tips = [""];
       dashboardStore.selectWidget({
         ...dashboardStore.selectedGrid,
         ...{ metricTypes: states.metricTypes, metrics: states.metrics },
@@ -415,6 +424,7 @@ limitations under the License. -->
     }
     states.metrics.splice(index, 1);
     states.metricTypes.splice(index, 1);
+    states.tips.splice(index, 1);
     const config = dashboardStore.selectedGrid.metricConfig || [];
     const metricConfig = config[index] ? config.splice(index, 1) : config;
     dashboardStore.selectWidget({
@@ -459,10 +469,25 @@ limitations under the License. -->
   }
   async function changeExpression(event: any, index: number) {
     const params = event.target.textContent;
-    states.metrics[index] = params;
+    if (params) {
       const resp = await dashboardStore.getTypeOfMQE(params);
-    console.log(resp);
-    // states.metricTypes[index] = resp.data.metricType
+      states.metrics[index] = params;
+      states.metricTypes[index] = resp.data.metricType.type;
+      states.tips[index] = resp.data.metricType.error || "";
+    } else {
+      states.metrics[index] = params;
+      states.metricTypes[index] = "";
+      states.tips[index] = "";
+    }
+
+    dashboardStore.selectWidget({
+      ...dashboardStore.selectedGrid,
+      expressions: states.metrics,
+      typesOfMQE: states.metricTypes,
+    });
+    if (params) {
+      await queryMetrics();
+    }
   }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/graphs/TopList.vue

@@ -20,7 +20,7 @@ limitations under the License. -->
         <div class="desc">
           <span class="calls mr-10">{{ i.value }}</span>
           <span class="cp mr-20">
-            {{ i.name }}
+            {{ i.name || i.id }}
           </span>
         </div>
         <el-popover placement="bottom" trigger="click">