feat: supporting expressions to query metrics data (#270)

src/graphql/fragments/dashboard.ts

@@ -68,3 +68,12 @@ export const deleteTemplate = {
         message
     }`,
 };
+export const TypeOfMQE = {
+  variable: "$expression: String!",
+  query: `
+  metricType: returnTypeOfMQE(expression: $expression) {
+    type
+    error
+  }
+  `,
+};

src/graphql/query/dashboard.ts

@@ -21,6 +21,7 @@ import {
   addTemplate,
   changeTemplate,
   deleteTemplate,
+  TypeOfMQE,
 } from "../fragments/dashboard";
 
 export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;
@@ -34,3 +35,5 @@ export const updateTemplate = `mutation template(${changeTemplate.variable}) {${
 export const removeTemplate = `mutation template(${deleteTemplate.variable}) {${deleteTemplate.query}}`;
 
 export const getTemplates = `query templates {${getAllTemplates.query}}`;
+
+export const getTypeOfMQE = `query returnTypeOfMQE(${TypeOfMQE.variable}) {${TypeOfMQE.query}}`;

src/hooks/data.ts

@@ -112,4 +112,22 @@ export const RespFields: Indexable = {
     value
     refId
   }`,
+  execExpression: `{
+    type
+    results {
+      metric {
+        name
+        labels {
+          key
+          value
+        }
+      }
+      values {
+        id
+        value
+        traceID
+      }
+    }
+    error
+  }`,
 };

src/hooks/useExpressionsProcessor.ts

@@ -0,0 +1,291 @@
+/**
+ * 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.
+ */
+import { RespFields, Calculations } from "./data";
+import { ExpressionResultType } from "@/views/dashboard/data";
+import { ElMessage } from "element-plus";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import type { MetricConfigOpt } from "@/types/dashboard";
+import type { Instance, Endpoint, Service } from "@/types/selector";
+import { calculateExp } from "./useMetricsProcessor";
+
+export function useExpressionsQueryProcessor(config: Indexable) {
+  if (!(config.metrics && config.metrics[0])) {
+    return;
+  }
+  if (!(config.metricTypes && config.metricTypes[0])) {
+    return;
+  }
+  const appStore = useAppStoreWithOut();
+  const dashboardStore = useDashboardStore();
+  const selectorStore = useSelectorStore();
+
+  if (!selectorStore.currentService && dashboardStore.entity !== "All") {
+    return;
+  }
+  const conditions: Recordable = {
+    duration: appStore.durationTime,
+  };
+  const variables: string[] = [`$duration: Duration!`];
+  const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes(
+    dashboardStore.entity,
+  );
+  if (isRelation && !selectorStore.currentDestService) {
+    return;
+  }
+  const fragment = config.metrics.map((name: string, index: number) => {
+    variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`);
+    conditions[`expression${index}`] = name;
+    const entity = {
+      serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
+      normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
+      serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes(
+        dashboardStore.entity,
+      )
+        ? selectorStore.currentPod && selectorStore.currentPod.value
+        : undefined,
+      endpointName: dashboardStore.entity.includes("Endpoint")
+        ? selectorStore.currentPod && selectorStore.currentPod.value
+        : undefined,
+      processName: dashboardStore.entity.includes("Process")
+        ? selectorStore.currentProcess && selectorStore.currentProcess.value
+        : undefined,
+      destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
+      destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
+      destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
+        ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
+        : undefined,
+      destEndpointName:
+        dashboardStore.entity === "EndpointRelation"
+          ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
+          : undefined,
+      destProcessName: dashboardStore.entity.includes("ProcessRelation")
+        ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
+        : undefined,
+    };
+    conditions[`entity${index}`] = entity;
+
+    return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
+  });
+  const queryStr = `query queryData(${variables}) {${fragment}}`;
+
+  return {
+    queryStr,
+    conditions,
+  };
+}
+
+export function useExpressionsSourceProcessor(
+  resp: { errors: string; data: Indexable },
+  config: {
+    metrics: string[];
+    metricTypes: string[];
+    metricConfig: MetricConfigOpt[];
+  },
+) {
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return {};
+  }
+  if (!resp.data) {
+    ElMessage.error("The query is wrong");
+    return {};
+  }
+  const source: { [key: string]: unknown } = {};
+  const keys = Object.keys(resp.data);
+  for (let i = 0; i < config.metricTypes.length; i++) {
+    const type = config.metricTypes[i];
+    const c = (config.metricConfig && config.metricConfig[i]) || {};
+    const results = (resp.data[keys[i]] && resp.data[keys[i]].results) || [];
+    const name = ((results[0] || {}).metric || {}).name;
+
+    if (type === ExpressionResultType.TIME_SERIES_VALUES) {
+      if (results.length === 1) {
+        source[c.label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
+      } else {
+        const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+        for (const item of results) {
+          const values = item.values.map((d: { value: unknown }) => d.value) || [];
+          const index = item.metric.labels[0].value;
+          const indexNum = labels.findIndex((_, i: number) => i === Number(index));
+          if (labels[indexNum] && indexNum > -1) {
+            source[labels[indexNum]] = values;
+          } else {
+            source[index] = values;
+          }
+        }
+      }
+    }
+    if (type === ExpressionResultType.SINGLE_VALUE) {
+      source[c.label || name] = results[0].values[0].value;
+    }
+    if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) {
+      source[name] = results[0].values;
+    }
+  }
+
+  return source;
+}
+
+export async function useExpressionsQueryPodsMetrics(
+  pods: Array<(Instance | Endpoint | Service) & Indexable>,
+  config: {
+    expressions: string[];
+    typesOfMQE: string[];
+    subExpressions: string[];
+    metricConfig: MetricConfigOpt[];
+  },
+  scope: string,
+) {
+  function expressionsGraphqlPods() {
+    const metrics: string[] = [];
+    const subMetrics: string[] = [];
+    const metricTypes: string[] = [];
+    config.expressions = config.expressions || [];
+    config.subExpressions = config.subExpressions || [];
+    config.typesOfMQE = config.typesOfMQE || [];
+
+    for (let i = 0; i < config.expressions.length; i++) {
+      if (config.expressions[i]) {
+        metrics.push(config.expressions[i]);
+        subMetrics.push(config.subExpressions[i]);
+        metricTypes.push(config.typesOfMQE[i]);
+      }
+    }
+    if (!metrics.length) {
+      return;
+    }
+    const appStore = useAppStoreWithOut();
+    const selectorStore = useSelectorStore();
+    const conditions: { [key: string]: unknown } = {
+      duration: appStore.durationTime,
+    };
+    const variables: string[] = [`$duration: Duration!`];
+    const currentService = selectorStore.currentService || {};
+    const fragmentList = pods.map((d: (Instance | Endpoint | Service) & Indexable, index: number) => {
+      const entity = {
+        serviceName: scope === "Service" ? d.label : currentService.label,
+        serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
+        endpointName: scope === "Endpoint" ? d.label : undefined,
+        normal: scope === "Service" ? d.normal : currentService.normal,
+      };
+      variables.push(`$entity${index}: Entity!`);
+      conditions[`entity${index}`] = entity;
+      const f = metrics.map((name: string, idx: number) => {
+        variables.push(`$expression${index}${idx}: String!`);
+        conditions[`expression${index}${idx}`] = name;
+        let str = "";
+        if (config.subExpressions[idx]) {
+          variables.push(`$subExpression${index}${idx}: String!`);
+          conditions[`subExpression${index}${idx}`] = config.subExpressions[idx];
+          str = `subexpression${index}${idx}: execExpression(expression: $subExpression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
+        }
+
+        return (
+          str +
+          `expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`
+        );
+      });
+      return f;
+    });
+    const fragment = fragmentList.flat(1).join(" ");
+    const queryStr = `query queryData(${variables}) {${fragment}}`;
+
+    return { queryStr, conditions };
+  }
+
+  function expressionsPodsSource(resp: { errors: string; data: Indexable }): Indexable {
+    if (resp.errors) {
+      ElMessage.error(resp.errors);
+      return {};
+    }
+    const names: string[] = [];
+    const metricConfigArr: MetricConfigOpt[] = [];
+    const metricTypesArr: string[] = [];
+    const data = pods.map((d: any, idx: number) => {
+      for (let index = 0; index < config.expressions.length; index++) {
+        const c: any = (config.metricConfig && config.metricConfig[index]) || {};
+        const k = "expression" + idx + index;
+        const sub = "subexpression" + idx + index;
+        const results = (resp.data[k] && resp.data[k].results) || [];
+        const subResults = (resp.data[sub] && resp.data[sub].results) || [];
+
+        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, ""));
+          for (let i = 0; i < results.length; i++) {
+            let name = results[i].metric.labels[0].value || "";
+            const subValues = subResults[i] && subResults[i].values.map((d: { value: unknown }) => d.value);
+            const num = labelsIdx.findIndex((d: string) => d === results[i].metric.labels[0].value);
+
+            if (labels[num]) {
+              name = labels[num];
+            }
+            if (!d[name]) {
+              d[name] = {};
+            }
+            if (subValues) {
+              d[name]["values"] = subValues;
+            }
+            d[name]["avg"] = results[i].values[0].value;
+
+            const j = names.find((d: string) => d === name);
+
+            if (!j) {
+              names.push(name);
+              metricConfigArr.push({ ...c, index: i });
+              metricTypesArr.push(config.typesOfMQE[index]);
+            }
+          }
+        } else {
+          if (!results[0]) {
+            return d;
+          }
+          const name = results[0].metric.name || "";
+          if (!d[name]) {
+            d[name] = {};
+          }
+          d[name]["avg"] = [results[0].values[0].value];
+          if (subResults[0]) {
+            d[name]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
+          }
+          const j = names.find((d: string) => d === name);
+          if (!j) {
+            names.push(name);
+            metricConfigArr.push(c);
+            metricTypesArr.push(config.typesOfMQE[index]);
+          }
+        }
+      }
+      return d;
+    });
+
+    return { data, names, metricConfigArr, metricTypesArr };
+  }
+  const dashboardStore = useDashboardStore();
+  const params = await expressionsGraphqlPods();
+  const json = await dashboardStore.fetchMetricValue(params);
+
+  if (json.errors) {
+    ElMessage.error(json.errors);
+    return {};
+  }
+  const { data, names, metricTypesArr, metricConfigArr } = expressionsPodsSource(json);
+
+  return { data, names, metricTypesArr, metricConfigArr };
+}

src/hooks/useListConfig.ts

@@ -15,7 +15,15 @@
  * limitations under the License.
  */
 import { MetricQueryTypes, Calculations } from "./data";
+import { MetricModes } from "@/views/dashboard/data";
+
 export function useListConfig(config: Indexable, index: string) {
+  if (config.metricModes === MetricModes.Expression) {
+    return {
+      isLinear: false,
+      isAvg: true,
+    };
+  }
   const i = Number(index);
   const types = [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg];
   const calculation = config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;
@@ -25,6 +33,7 @@ export function useListConfig(config: Indexable, index: string) {
   const isAvg =
     [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
     types.includes(calculation);
+
   return {
     isLinear,
     isAvg,

src/hooks/useMetricsProcessor.ts

@@ -22,7 +22,7 @@ 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";
+import type { E } from "vitest/dist/types-c441ef31";
 
 export function useQueryProcessor(config: Indexable) {
   if (!(config.metrics && config.metrics[0])) {
@@ -57,13 +57,11 @@ export function useQueryProcessor(config: Indexable) {
         name,
         parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value,
         normal: selectorStore.currentService ? selectorStore.currentService.normal : true,
-        scope: config.catalog,
         topN: Number(c.topN) || 10,
         order: c.sortOrder || "DES",
       };
     } else {
       const entity = {
-        scope: config.catalog,
         serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
         normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
         serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes(
@@ -99,7 +97,6 @@ export function useQueryProcessor(config: Indexable) {
           order: c.sortOrder || "DES",
         };
       } else {
-        entity.scope = dashboardStore.entity;
         if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
           const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
           variables.push(`$labels${index}: [String!]!`);
@@ -233,7 +230,6 @@ export function useQueryPodsMetrics(
   const currentService = selectorStore.currentService || {};
   const fragmentList = pods.map((d: (Instance | Endpoint | Service) & Indexable, index: number) => {
     const param = {
-      scope,
       serviceName: scope === "Service" ? d.label : currentService.label,
       serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
       endpointName: scope === "Endpoint" ? d.label : undefined,
@@ -282,7 +278,7 @@ export function usePodsSource(
   const names: string[] = [];
   const metricConfigArr: MetricConfigOpt[] = [];
   const metricTypesArr: string[] = [];
-  const data = pods.map((d: Instance & Indexable, idx: number) => {
+  const data = pods.map((d: any, idx: number) => {
     config.metrics.map((name: string, index: number) => {
       const c: any = (config.metricConfig && config.metricConfig[index]) || {};
       const key = name + idx + index;
@@ -367,12 +363,12 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
 
   return { queryStr, conditions };
 }
-function calculateExp(
+export function calculateExp(
   list: { value: number; isEmptyValue: boolean }[],
   config: { calculation?: string },
 ): (number | string)[] {
   const arr = list.filter((d: { value: number; isEmptyValue: boolean }) => !d.isEmptyValue);
-  const sum = arr.length ? arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b) : 0;
+  const sum = arr.length ? arr.map((d: { value: number }) => Number(d.value)).reduce((a, b) => a + b) : 0;
   let data: (number | string)[] = [];
   switch (config.calculation) {
     case Calculations.Average:
@@ -440,26 +436,3 @@ export function aggregation(val: number, config: { calculation?: string }): numb
 
   return data;
 }
-
-export async function useGetMetricEntity(metric: string, metricType: string) {
-  if (!metric || !metricType) {
-    return;
-  }
-  let catalog = "";
-  const dashboardStore = useDashboardStore();
-  if (
-    ([MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics, MetricQueryTypes.ReadRecords] as any).includes(
-      metricType,
-    )
-  ) {
-    const res = await dashboardStore.fetchMetricList(metric);
-    if (res.errors) {
-      ElMessage.error(res.errors);
-      return;
-    }
-    const c: string = res.data.metrics[0].catalog;
-    catalog = (MetricCatalog as Indexable)[c];
-  }
-
-  return catalog;
-}

src/store/modules/dashboard.ts

@@ -25,7 +25,7 @@ import { NewControl, TextConfig, TimeRangeConfig, ControlsTypes } from "../data"
 import type { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
-import { EntityType } from "@/views/dashboard/data";
+import { EntityType, MetricModes } from "@/views/dashboard/data";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
@@ -92,6 +92,9 @@ export const dashboardStore = defineStore({
         metricTypes: [""],
         metrics: [""],
       };
+      if (type === "Widget") {
+        newItem.metricMode = MetricModes.Expression;
+      }
       if (type === "Tab") {
         newItem.h = 36;
         newItem.activedTabIndex = 0;
@@ -167,6 +170,9 @@ export const dashboardStore = defineStore({
         metricTypes: [""],
         metrics: [""],
       };
+      if (type === "Widget") {
+        newItem.metricMode = MetricModes.Expression;
+      }
       if (type === "Topology") {
         newItem.h = 32;
         newItem.graph = {
@@ -309,6 +315,11 @@ export const dashboardStore = defineStore({
 
       return res.data;
     },
+    async getTypeOfMQE(expression: string) {
+      const res: AxiosResponse = await graphql.query("getTypeOfMQE").params({ expression });
+
+      return res.data;
+    },
     async fetchMetricList(regex: string) {
       const res: AxiosResponse = await graphql.query("queryMetrics").params({ regex });
 

src/types/dashboard.d.ts

@@ -28,11 +28,14 @@ export interface LayoutConfig {
   w: number;
   h: number;
   i: string;
+  type: string;
+  metricMode?: string;
   widget?: WidgetConfig;
   graph?: GraphConfig;
   metrics?: string[];
-  type: string;
+  expressions?: string[];
   metricTypes?: string[];
+  typesOfMQE?: string[];
   children?: { name: string; children: LayoutConfig[] }[];
   activedTabIndex?: number;
   metricConfig?: MetricConfigOpt[];
@@ -41,6 +44,8 @@ export interface LayoutConfig {
   eventAssociate?: boolean;
   filters?: Filters;
   relatedTrace?: RelatedTrace;
+  subExpressions?: string[];
+  subTypesOfMQE?: string[];
 }
 export type RelatedTrace = {
   duration: DurationTime;

src/types/selector.d.ts

@@ -21,6 +21,7 @@ export type Service = {
   layers?: string[];
   normal?: boolean;
   group?: string;
+  merge?: string;
 };
 
 export type Instance = {
@@ -30,12 +31,14 @@ export type Instance = {
   instanceUUID?: string;
   attributes?: { name: string; value: string }[];
   id?: string;
+  merge?: boolean;
 };
 
 export type Endpoint = {
   id?: string;
   label: string;
   value: string;
+  merge?: string;
 };
 
 export type Service = {

src/views/dashboard/Widget.vue

@@ -35,6 +35,11 @@ limitations under the License. -->
           metrics: config.metrics,
           metricTypes: config.metricTypes,
           metricConfig: config.metricConfig,
+          metricMode: config.metricMode,
+          expressions: config.expressions || [],
+          typesOfMQE: config.typesOfMQE || [],
+          subExpressions: config.subExpressions || [],
+          subTypesOfMQE: config.subTypesOfMQE || [],
         }"
         :needQuery="true"
       />
@@ -51,10 +56,12 @@ limitations under the License. -->
   import { useRoute } from "vue-router";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
+  import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
+  import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor";
   import graphs from "./graphs";
   import { EntityType } from "./data";
   import timeFormat from "@/utils/timeFormat";
+  import { MetricModes } from "./data";
 
   export default defineComponent({
     name: "WidgetPage",
@@ -122,10 +129,12 @@ limitations under the License. -->
         }
       }
       async function queryMetrics() {
-        const metricTypes = config.value.metricTypes || [];
+        const isExpression = config.value.metricMode === MetricModes.Expression;
-        const metrics = config.value.metrics || [];
+        const params = isExpression
-        const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
+          ? await useExpressionsQueryProcessor({
-        const params = await useQueryProcessor({ ...config.value, catalog });
+              ...config.value,
+            })
+          : await useQueryProcessor({ ...config.value });
         if (!params) {
           source.value = {};
           return;
@@ -140,8 +149,9 @@ limitations under the License. -->
           metrics: config.value.metrics || [],
           metricTypes: config.value.metricTypes || [],
           metricConfig: config.value.metricConfig || [],
+          subExpressions: config.value.subExpressions || [],
         };
-        source.value = useSourceProcessor(json, d);
+        source.value = isExpression ? await useExpressionsSourceProcessor(json, d) : await useSourceProcessor(json, d);
       }
       watch(
         () => appStoreWithOut.durationTime,

src/views/dashboard/components/WidgetLink.vue

@@ -59,6 +59,7 @@ limitations under the License. -->
   import copy from "@/utils/copy";
   import { RefreshOptions } from "@/views/dashboard/data";
   import { TimeType } from "@/constants/data";
+  import { MetricModes } from "../data";
 
   const { t } = useI18n();
   const appStore = useAppStoreWithOut();
@@ -91,7 +92,8 @@ limitations under the License. -->
       step: appStore.durationRow.step,
       utc: appStore.utc,
     });
-    const { widget, graph, metrics, metricTypes, metricConfig } = dashboardStore.selectedGrid;
+    const { widget, graph, metrics, metricTypes, metricConfig, metricMode, expressions, typesOfMQE, subExpressions } =
+      dashboardStore.selectedGrid;
     const c = (metricConfig || []).map((d: any) => {
       const t: any = {};
       if (d.label) {
@@ -105,11 +107,20 @@ limitations under the License. -->
     const opt: any = {
       type: dashboardStore.selectedGrid.type,
       graph: graph,
-      metrics: metrics,
+      metricMode,
-      metricTypes: metricTypes,
       metricConfig: c,
       height: dashboardStore.selectedGrid.h * 20 + 60,
     };
+    if (metricMode === MetricModes.Expression) {
+      opt.expressions = expressions;
+      opt.typesOfMQE = typesOfMQE;
+      if (subExpressions && subExpressions.length) {
+        opt.subExpressions = subExpressions;
+      }
+    } else {
+      opt.metrics = metrics;
+      opt.metricTypes = metricTypes;
+    }
     if (widget) {
       opt.widget = {
         title: encodeURIComponent(widget.title || ""),

src/views/dashboard/configuration/Widget.vue

@@ -38,6 +38,11 @@ limitations under the License. -->
             metricTypes: dashboardStore.selectedGrid.metricTypes,
             metricConfig: dashboardStore.selectedGrid.metricConfig,
             relatedTrace: dashboardStore.selectedGrid.relatedTrace,
+            metricMode: dashboardStore.selectedGrid.metricMode,
+            expressions: dashboardStore.selectedGrid.expressions || [],
+            typesOfMQE: dashboardStore.selectedGrid.typesOfMQE || [],
+            subExpressions: dashboardStore.selectedGrid.subExpressions || [],
+            subTypesOfMQE: dashboardStore.selectedGrid.subTypesOfMQE || [],
           }"
           :needQuery="true"
         />
@@ -83,6 +88,7 @@ limitations under the License. -->
   import type { Option } from "@/types/app";
   import graphs from "../graphs";
   import CustomOptions from "./widget/index";
+  import { MetricModes } from "../data";
 
   export default defineComponent({
     name: "WidgetEdit",
@@ -128,6 +134,23 @@ limitations under the License. -->
 
       function applyConfig() {
         dashboardStore.setConfigPanel(false);
+        const { metricMode } = dashboardStore.selectedGrid;
+        let p = {};
+        if (metricMode === MetricModes.Expression) {
+          p = {
+            metrics: [],
+            metricTypes: [],
+          };
+        } else {
+          p = {
+            expressions: [],
+            typesOfMQE: [],
+          };
+        }
+        dashboardStore.selectWidget({
+          ...dashboardStore.selectedGrid,
+          ...p,
+        });
         dashboardStore.setConfigs(dashboardStore.selectedGrid);
       }
 
@@ -188,7 +211,7 @@ limitations under the License. -->
 
   .render-chart {
     padding: 5px;
-    height: 400px;
+    height: 420px;
     width: 100%;
   }
 

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

@@ -26,23 +26,50 @@ limitations under the License. -->
     />
   </div>
   <div>{{ t("metrics") }}</div>
-  <div v-for="(metric, index) in states.metrics" :key="index" class="metric-item">
+  <el-switch
-    <Selector
+    v-model="isExpression"
-      :value="metric"
+    class="mb-5"
-      :options="states.metricList"
+    active-text="Expressions"
-      size="small"
+    inactive-text="General"
-      placeholder="Select a metric"
+    size="small"
-      @change="changeMetrics(index, $event)"
+    @change="changeMetricMode"
-      class="selectors"
+  />
-    />
+  <div v-if="isExpression && states.isList">
-    <Selector
+    <span class="title">Summary</span>
-      :value="states.metricTypes[index]"
+    <span>Detail</span>
-      :options="states.metricTypeList[index]"
+  </div>
-      size="small"
+  <div v-for="(metric, index) in states.metrics" :key="index" class="mb-10">
-      :disabled="graph.type && !states.isList && index !== 0"
+    <span v-if="isExpression">
-      @change="changeMetricType(index, $event)"
+      <div class="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
-      class="selectors"
+        {{ metric }}
-    />
+      </div>
+      <div
+        v-if="states.isList"
+        class="expression-param"
+        contenteditable="true"
+        @blur="changeSubExpression($event, index)"
+      >
+        {{ states.subMetrics[index] }}
+      </div>
+    </span>
+    <span v-else>
+      <Selector
+        :value="metric"
+        :options="states.metricList"
+        size="small"
+        placeholder="Select a metric"
+        @change="changeMetrics(index, $event)"
+        class="selectors"
+      />
+      <Selector
+        :value="states.metricTypes[index]"
+        :options="states.metricTypeList[index]"
+        size="small"
+        :disabled="graph.type && !states.isList && index !== 0"
+        @change="changeMetricType(index, $event)"
+        class="selectors"
+      />
+    </span>
     <el-popover placement="top" :width="400" trigger="click">
       <template #reference>
         <span @click="setMetricConfig(index)">
@@ -51,7 +78,12 @@ limitations under the License. -->
       </template>
       <Standard @update="queryMetrics" :currentMetricConfig="currentMetricConfig" :index="index" />
     </el-popover>
-    <span v-show="states.isList || states.metricTypes[0] === ProtocolTypes.ReadMetricsValues">
+    <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"
@@ -61,6 +93,8 @@ 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>
   <div>{{ t("visualization") }}</div>
   <div class="chart-types">
@@ -89,10 +123,13 @@ limitations under the License. -->
     PodsChartTypes,
     MetricsType,
     ProtocolTypes,
+    ExpressionResultType,
+    MetricModes,
   } from "../../../data";
   import { ElMessage } from "element-plus";
   import Icon from "@/components/Icon.vue";
-  import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
+  import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
+  import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor";
   import { useI18n } from "vue-i18n";
   import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
   import Standard from "./Standard.vue";
@@ -101,17 +138,28 @@ limitations under the License. -->
   const { t } = useI18n();
   const emit = defineEmits(["update", "loading"]);
   const dashboardStore = useDashboardStore();
-  const metrics = computed(() => dashboardStore.selectedGrid.metrics || []);
+  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
+  const metrics = computed(
+    () => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [],
+  );
+  const subMetrics = computed(() => (isExpression.value ? dashboardStore.selectedGrid.subExpressions : []) || []);
+  const subMetricTypes = computed(() => (isExpression.value ? dashboardStore.selectedGrid.subTypesOfMQE : []) || []);
   const graph = computed(() => dashboardStore.selectedGrid.graph || {});
-  const metricTypes = computed(() => dashboardStore.selectedGrid.metricTypes || []);
+  const metricTypes = computed(
+    () => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [],
+  );
   const states = reactive<{
     metrics: string[];
+    subMetrics: string[];
+    subMetricTypes: string[];
     metricTypes: string[];
     metricTypeList: Option[][];
     isList: boolean;
     metricList: (Option & { type: string })[];
     dashboardName: string;
     dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
+    tips: string[];
+    subTips: string[];
   }>({
     metrics: metrics.value.length ? metrics.value : [""],
     metricTypes: metricTypes.value.length ? metricTypes.value : [""],
@@ -120,6 +168,10 @@ limitations under the License. -->
     metricList: [],
     dashboardName: graph.value.dashboardName,
     dashboardList: [{ label: "", value: "" }],
+    tips: [],
+    subTips: [],
+    subMetrics: subMetrics.value.length ? subMetrics.value : [""],
+    subMetricTypes: subMetricTypes.value.length ? subMetricTypes.value : [""],
   });
   const currentMetricConfig = ref<MetricConfigOpt>({
     unit: "",
@@ -131,6 +183,8 @@ limitations under the License. -->
 
   states.isList = ListChartTypes.includes(graph.value.type);
   const defaultLen = ref<number>(states.isList ? 5 : 20);
+  const backupMetricConfig = ref<MetricConfigOpt[]>([]);
+
   setDashboards();
   setMetricType();
 
@@ -158,7 +212,7 @@ limitations under the License. -->
       }
       arr = json.data.metrics;
     }
-    states.metricList = (arr || []).filter((d: { catalog: string; type: string }) => {
+    states.metricList = (arr || []).filter((d: { type: string }) => {
       if (states.isList) {
         if (d.type === MetricsType.REGULAR_VALUE || d.type === MetricsType.LABELED_VALUE) {
           return d;
@@ -171,6 +225,14 @@ limitations under the License. -->
         return d;
       }
     });
+    if (isExpression.value) {
+      if (states.metrics && states.metrics[0]) {
+        queryMetrics();
+      } else {
+        emit("update", {});
+      }
+      return;
+    }
     const metrics: any = states.metricList.filter((d: { value: string; type: string }) =>
       states.metrics.includes(d.value),
     );
@@ -234,12 +296,22 @@ limitations under the License. -->
         ...dashboardStore.selectedGrid,
         metrics: [""],
         metricTypes: [""],
+        expressions: [""],
+        typesOfMQE: [""],
       });
       states.metrics = [""];
       states.metricTypes = [""];
       defaultLen.value = 5;
     }
-    setMetricType(chart);
+
+    if (isExpression.value) {
+      dashboardStore.selectWidget({
+        ...dashboardStore.selectedGrid,
+        graph: chart,
+      });
+    } else {
+      setMetricType(chart);
+    }
     setDashboards(chart.type);
     states.dashboardName = "";
     defaultLen.value = 10;
@@ -300,12 +372,15 @@ limitations under the License. -->
     if (states.isList) {
       return;
     }
-    const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
+    if (isExpression.value) {
-    if (!(metrics && metrics[0] && metricTypes && metricTypes[0])) {
+      queryMetricsWithExpressions();
       return;
     }
-    const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
+    const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
-    const params = useQueryProcessor({ ...states, metricConfig, catalog });
+    if (!(metrics && metrics[0] && metricTypes && metricTypes[0])) {
+      return emit("update", {});
+    }
+    const params = useQueryProcessor({ ...states, metricConfig });
     if (!params) {
       emit("update", {});
       return;
@@ -322,6 +397,29 @@ limitations under the License. -->
     emit("update", source);
   }
 
+  async function queryMetricsWithExpressions() {
+    const { metricConfig, typesOfMQE, expressions } = dashboardStore.selectedGrid;
+    if (!(expressions && expressions[0] && typesOfMQE && typesOfMQE[0])) {
+      return emit("update", {});
+    }
+
+    const params = useExpressionsQueryProcessor({ ...states, metricConfig });
+    if (!params) {
+      emit("update", {});
+      return;
+    }
+
+    emit("loading", true);
+    const json = await dashboardStore.fetchMetricValue(params);
+    emit("loading", false);
+    if (json.errors) {
+      ElMessage.error(json.errors);
+      return;
+    }
+    const source = useExpressionsSourceProcessor(json, { ...states, metricConfig });
+    emit("update", source);
+  }
+
   function changeDashboard(opt: any) {
     if (!opt[0]) {
       states.dashboardName = "";
@@ -339,31 +437,76 @@ limitations under the License. -->
   }
   function addMetric() {
     states.metrics.push("");
+    states.tips.push("");
+    if (isExpression.value && states.isList) {
+      states.subMetrics.push("");
+      states.subTips.push("");
+    }
+
     if (!states.isList) {
       states.metricTypes.push(states.metricTypes[0]);
-      states.metricTypeList.push(states.metricTypeList[0]);
+      if (!isExpression.value) {
+        states.metricTypeList.push(states.metricTypeList[0]);
+      }
       return;
     }
     states.metricTypes.push("");
+    if (isExpression.value && states.isList) {
+      states.subMetricTypes.push("");
+    }
   }
   function deleteMetric(index: number) {
     if (states.metrics.length === 1) {
       states.metrics = [""];
       states.metricTypes = [""];
+      states.tips = [""];
+      let v = {};
+      if (isExpression.value) {
+        v = { typesOfMQE: states.metricTypes, expressions: states.metrics };
+        if (states.isList) {
+          states.subMetrics = [""];
+          states.subMetricTypes = [""];
+          states.subTips = [""];
+          v = {
+            ...v,
+            subTypesOfMQE: states.subMetricTypes,
+            subExpressions: states.subMetrics,
+          };
+        }
+      } else {
+        v = { metricTypes: states.metricTypes, metrics: states.metrics };
+      }
       dashboardStore.selectWidget({
         ...dashboardStore.selectedGrid,
-        ...{ metricTypes: states.metricTypes, metrics: states.metrics },
+        ...v,
         metricConfig: [],
       });
       return;
     }
     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;
+    let p = {};
+    if (isExpression.value) {
+      p = { typesOfMQE: states.metricTypes, expressions: states.metrics };
+      if (states.isList) {
+        states.subMetrics = [""];
+        states.subMetricTypes = [""];
+        states.subTips = [""];
+        p = {
+          ...p,
+          subTypesOfMQE: states.subMetricTypes,
+          subExpressions: states.subMetrics,
+        };
+      }
+    } else {
+      p = { metricTypes: states.metricTypes, metrics: states.metrics };
+    }
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
-      ...{ metricTypes: states.metricTypes, metrics: states.metrics },
+      ...p,
       metricConfig,
     });
   }
@@ -393,6 +536,66 @@ limitations under the License. -->
       ...dashboardStore.selectedGrid.metricConfig[index],
     };
   }
+  function changeMetricMode() {
+    states.metrics = metrics.value.length ? metrics.value : [""];
+    states.subMetrics = subMetrics.value.length ? subMetrics.value : [""];
+    states.metricTypes = metricTypes.value.length ? metricTypes.value : [""];
+    states.subMetricTypes = subMetricTypes.value.length ? subMetricTypes.value : [""];
+    const config = dashboardStore.selectedGrid.metricConfig;
+    dashboardStore.selectWidget({
+      ...dashboardStore.selectedGrid,
+      metricMode: isExpression.value ? MetricModes.Expression : MetricModes.General,
+      metricConfig: backupMetricConfig.value,
+    });
+    backupMetricConfig.value = config;
+    queryMetrics();
+  }
+  async function changeExpression(event: any, index: number) {
+    const params = (event.target.textContent || "").replace(/\s+/g, "");
+
+    if (params) {
+      const resp = await dashboardStore.getTypeOfMQE(params);
+      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();
+    }
+  }
+  async function changeSubExpression(event: any, index: number) {
+    const params = (event.target.textContent || "").replace(/\s+/g, "");
+
+    if (params) {
+      const resp = await dashboardStore.getTypeOfMQE(params);
+      states.subMetrics[index] = params;
+      states.subMetricTypes[index] = resp.data.metricType.type;
+      states.subTips[index] = resp.data.metricType.error || "";
+    } else {
+      states.subMetrics[index] = params;
+      states.subMetricTypes[index] = "";
+      states.subTips[index] = "";
+    }
+
+    dashboardStore.selectWidget({
+      ...dashboardStore.selectedGrid,
+      subExpressions: states.subMetrics,
+      subTypesOfMQE: states.subMetricTypes,
+    });
+    if (params) {
+      await queryMetrics();
+    }
+  }
 </script>
 <style lang="scss" scoped>
   .ds-name {
@@ -400,7 +603,7 @@ limitations under the License. -->
   }
 
   .selectors {
-    width: 500px;
+    width: 400px;
     margin-right: 10px;
   }
 
@@ -427,4 +630,26 @@ limitations under the License. -->
     background-color: #409eff;
     color: #fff;
   }
+
+  .expression-param {
+    display: inline-block;
+    width: 400px;
+    border: 1px solid #dcdfe6;
+    cursor: text;
+    padding: 0 5px;
+    border-radius: 3px;
+    color: #606266;
+    outline: none;
+    height: 26px;
+    margin-right: 5px;
+
+    &:focus {
+      border-color: #409eff;
+    }
+  }
+
+  .title {
+    display: inline-block;
+    width: 410px;
+  }
 </style>

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

@@ -42,7 +42,13 @@ limitations under the License. -->
         "
       />
     </div>
-    <div class="item mb-10" v-if="metricType === 'readLabeledMetricsValues'">
+    <div
+      class="item mb-10"
+      v-if="
+        [ProtocolTypes.ReadLabeledMetricsValues].includes(metricType) &&
+        dashboardStore.selectedGrid.metricMode === MetricModes.General
+      "
+    >
       <span class="label">{{ t("labelsIndex") }}</span>
       <el-input
         class="input"
@@ -56,7 +62,7 @@ limitations under the License. -->
         "
       />
     </div>
-    <div class="item mb-10">
+    <div class="item mb-10" v-show="isExec">
       <span class="label">{{ t("aggregation") }}</span>
       <SelectSingle
         :value="currentMetric.calculation"
@@ -94,10 +100,10 @@ limitations under the License. -->
   import { ref, watch, computed } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
-  import { SortOrder, CalculationOpts } from "../../../data";
+  import { SortOrder, CalculationOpts, MetricModes } from "../../../data";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import type { MetricConfigOpt } from "@/types/dashboard";
-  import { ListChartTypes, ProtocolTypes } from "../../../data";
+  import { ListChartTypes, ProtocolTypes, ExpressionResultType } from "../../../data";
 
   /*global defineEmits, defineProps */
   const props = defineProps({
@@ -110,24 +116,32 @@ limitations under the License. -->
   const { t } = useI18n();
   const emit = defineEmits(["update"]);
   const dashboardStore = useDashboardStore();
+  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
   const currentMetric = ref<MetricConfigOpt>({
     ...props.currentMetricConfig,
     topN: props.currentMetricConfig.topN || 10,
   });
-  const metricTypes = dashboardStore.selectedGrid.metricTypes || [];
+  const metricTypes = computed(
-  const metricType = computed(() => (dashboardStore.selectedGrid.metricTypes || [])[props.index]);
+    () => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [],
+  );
+  const metricType = computed(() => metricTypes.value[props.index]);
   const hasLabel = computed(() => {
     const graph = dashboardStore.selectedGrid.graph || {};
     return (
       ListChartTypes.includes(graph.type) ||
-      [ProtocolTypes.ReadLabeledMetricsValues, ProtocolTypes.ReadMetricsValues].includes(metricType.value)
+      [
+        ProtocolTypes.ReadLabeledMetricsValues,
+        ProtocolTypes.ReadMetricsValues,
+        ExpressionResultType.TIME_SERIES_VALUES,
+      ].includes(metricType.value)
     );
   });
   const isTopn = computed(() =>
     [ProtocolTypes.SortMetrics, ProtocolTypes.ReadSampledRecords, ProtocolTypes.ReadRecords].includes(
-      metricTypes[props.index],
+      metricTypes.value[props.index],
     ),
   );
+  const isExec = computed(() => dashboardStore.selectedGrid.metricMode === MetricModes.General);
   function updateConfig(index: number, param: { [key: string]: string }) {
     const key = Object.keys(param)[0];
     if (!key) {

src/views/dashboard/controls/Widget.vue

@@ -59,6 +59,11 @@ limitations under the License. -->
           filters: data.filters || {},
           relatedTrace: data.relatedTrace || {},
           associate: data.associate || [],
+          metricMode: data.metricMode,
+          expressions: data.expressions || [],
+          typesOfMQE: data.typesOfMQE || [],
+          subExpressions: data.subExpressions || [],
+          subTypesOfMQE: data.subTypesOfMQE || [],
         }"
         :needQuery="needQuery"
         @click="clickHandle"
@@ -76,10 +81,12 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import graphs from "../graphs";
   import { useI18n } from "vue-i18n";
-  import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
+  import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
+  import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor";
   import { EntityType, ListChartTypes } from "../data";
   import type { EventParams } from "@/types/dashboard";
   import getDashboard from "@/hooks/useDashboardsSession";
+  import { MetricModes } from "../data";
 
   const props = {
     data: {
@@ -113,10 +120,14 @@ limitations under the License. -->
       }
 
       async function queryMetrics() {
-        const metricTypes: string[] = props.data.metricTypes || [];
+        const isExpression = props.data.metricMode === MetricModes.Expression;
-        const metrics = props.data.metrics || [];
+        const params = isExpression
-        const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
+          ? await useExpressionsQueryProcessor({
-        const params = await useQueryProcessor({ ...props.data, catalog });
+              metrics: props.data.expressions,
+              metricTypes: props.data.typesOfMQE,
+              metricConfig: props.data.metricConfig,
+            })
+          : await useQueryProcessor({ ...props.data });
 
         if (!params) {
           state.source = {};
@@ -133,7 +144,12 @@ limitations under the License. -->
           metricTypes: props.data.metricTypes || [],
           metricConfig: props.data.metricConfig || [],
         };
-        state.source = useSourceProcessor(json, d);
+        const e = {
+          metrics: props.data.expressions || [],
+          metricTypes: props.data.typesOfMQE || [],
+          metricConfig: props.data.metricConfig || [],
+        };
+        state.source = isExpression ? await useExpressionsSourceProcessor(json, e) : await useSourceProcessor(json, d);
       }
 
       function removeWidget() {
@@ -169,7 +185,7 @@ limitations under the License. -->
         dashboardStore.selectWidget(props.data);
       }
       watch(
-        () => [props.data.metricTypes, props.data.metrics],
+        () => [props.data.metricTypes, props.data.metrics, props.data.expressions],
         () => {
           if (!dashboardStore.selectedGrid) {
             return;

src/views/dashboard/data.ts

@@ -56,6 +56,15 @@ export enum ProtocolTypes {
   ReadMetricsValues = "readMetricsValues",
   ReadMetricsValue = "readMetricsValue",
 }
+
+export enum ExpressionResultType {
+  UNKNOWN = "UNKNOWN",
+  SINGLE_VALUE = "SINGLE_VALUE",
+  TIME_SERIES_VALUES = "TIME_SERIES_VALUES",
+  SORTED_LIST = "SORTED_LIST",
+  RECORD_LIST = "RECORD_LIST",
+}
+
 export const DefaultGraphConfig: { [key: string]: any } = {
   Bar: {
     type: "Bar",
@@ -322,3 +331,8 @@ export const RefreshOptions = [
   { label: "Last 8 hours", value: "8", step: "HOUR" },
   { label: "Last 7 days", value: "7", step: "DAY" },
 ];
+
+export enum MetricModes {
+  Expression = "Expression",
+  General = "General",
+}

src/views/dashboard/graphs/Bar.vue

@@ -23,6 +23,7 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
   import useLegendProcess from "@/hooks/useLegendProcessor";
+  import Legend from "./components/Legend.vue";
 
   /*global defineProps, defineEmits */
   const emits = defineEmits(["click"]);

src/views/dashboard/graphs/EndpointList.vue

@@ -41,6 +41,7 @@ limitations under the License. -->
             metrics: colMetrics,
             metricConfig,
             metricTypes,
+            metricMode,
           }"
           v-if="colMetrics.length"
         />
@@ -58,7 +59,8 @@ limitations under the License. -->
   import type { Endpoint } from "@/types/selector";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
-  import { EntityType } from "../data";
+  import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
+  import { EntityType, MetricModes } from "../data";
   import router from "@/router";
   import getDashboard from "@/hooks/useDashboardsSession";
   import type { MetricConfigOpt } from "@/types/dashboard";
@@ -75,6 +77,11 @@ limitations under the License. -->
           i: string;
           metrics: string[];
           metricTypes: string[];
+          metricMode: string;
+          expressions: string[];
+          typesOfMQE: string[];
+          subExpressions: string[];
+          subTypesOfMQE: string[];
         } & { metricConfig: MetricConfigOpt[] }
       >,
       default: () => ({
@@ -98,6 +105,7 @@ limitations under the License. -->
   const colMetrics = ref<string[]>([]);
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const metricTypes = ref<string[]>(props.config.metricTypes || []);
+  const metricMode = ref<string>(props.config.metricMode);
 
   if (props.needQuery) {
     queryEndpoints();
@@ -116,8 +124,20 @@ limitations under the License. -->
     endpoints.value = resp.data.pods || [];
     queryEndpointMetrics(endpoints.value);
   }
-  async function queryEndpointMetrics(currentPods: Endpoint[]) {
+  async function queryEndpointMetrics(arr: Endpoint[]) {
-    if (!currentPods.length) {
+    if (!arr.length) {
+      return;
+    }
+    const currentPods = arr.map((d: Endpoint) => {
+      return {
+        id: d.id,
+        value: d.value,
+        label: d.label,
+        merge: d.merge,
+      };
+    });
+    if (props.config.metricMode === MetricModes.Expression) {
+      queryEndpointExpressions(currentPods);
       return;
     }
     const metrics = props.config.metrics || [];
@@ -141,6 +161,32 @@ limitations under the License. -->
       return;
     }
     endpoints.value = currentPods;
+    colMetrics.value = [];
+    metricTypes.value = [];
+    metricConfig.value = [];
+  }
+  async function queryEndpointExpressions(currentPods: Endpoint[]) {
+    const expressions = props.config.expressions || [];
+    const typesOfMQE = props.config.typesOfMQE || [];
+    const subExpressions = props.config.subExpressions || [];
+
+    if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
+      const params = await useExpressionsQueryPodsMetrics(
+        currentPods,
+        { ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
+        EntityType[2].value,
+      );
+      endpoints.value = params.data;
+      colMetrics.value = params.names;
+      metricTypes.value = params.metricTypesArr;
+      metricConfig.value = params.metricConfigArr;
+
+      return;
+    }
+    endpoints.value = currentPods;
+    colMetrics.value = [];
+    metricTypes.value = [];
+    metricConfig.value = [];
   }
   function clickEndpoint(scope: any) {
     const { dashboard } = getDashboard({
@@ -160,12 +206,19 @@ limitations under the License. -->
     await queryEndpoints();
   }
   watch(
-    () => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
+    () => [
+      ...(props.config.metricTypes || []),
+      ...(props.config.metrics || []),
+      ...(props.config.metricConfig || []),
+      ...(props.config.expressions || []),
+      props.config.metricMode,
+    ],
     (data, old) => {
       if (JSON.stringify(data) === JSON.stringify(old)) {
         return;
       }
       metricConfig.value = props.config.metricConfig;
+      metricMode.value = props.config.metricMode;
       queryEndpointMetrics(endpoints.value);
     },
   );

src/views/dashboard/graphs/InstanceList.vue

@@ -40,6 +40,7 @@ limitations under the License. -->
             metrics: colMetrics,
             metricConfig,
             metricTypes,
+            metricMode,
           }"
           v-if="colMetrics.length"
         />
@@ -87,7 +88,8 @@ limitations under the License. -->
   import type { InstanceListConfig } from "@/types/dashboard";
   import type { Instance } from "@/types/selector";
   import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
-  import { EntityType } from "../data";
+  import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
+  import { EntityType, MetricModes } from "../data";
   import router from "@/router";
   import getDashboard from "@/hooks/useDashboardsSession";
   import type { MetricConfigOpt } from "@/types/dashboard";
@@ -102,6 +104,11 @@ limitations under the License. -->
           metrics: string[];
           metricTypes: string[];
           isEdit: boolean;
+          metricMode: string;
+          expressions: string[];
+          typesOfMQE: string[];
+          subExpressions: string[];
+          subTypesOfMQE: string[];
         } & { metricConfig: MetricConfigOpt[] }
       >,
       default: () => ({
@@ -126,6 +133,7 @@ limitations under the License. -->
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const metricTypes = ref<string[]>(props.config.metricTypes || []);
   const pods = ref<Instance[]>([]); // all instances
+  const metricMode = ref<string>(props.config.metricMode);
   if (props.needQuery) {
     queryInstance();
   }
@@ -146,8 +154,23 @@ limitations under the License. -->
     queryInstanceMetrics(instances.value);
   }
 
-  async function queryInstanceMetrics(currentInstances: Instance[]) {
+  async function queryInstanceMetrics(arr: Instance[]) {
-    if (!currentInstances.length) {
+    if (!arr.length) {
+      return;
+    }
+    const currentInstances = arr.map((d: Instance) => {
+      return {
+        id: d.id,
+        value: d.value,
+        label: d.label,
+        merge: d.merge,
+        language: d.language,
+        instanceUUID: d.instanceUUID,
+        attributes: d.attributes,
+      };
+    });
+    if (props.config.metricMode === MetricModes.Expression) {
+      queryInstanceExpressions(currentInstances);
       return;
     }
     const metrics = props.config.metrics || [];
@@ -172,6 +195,33 @@ limitations under the License. -->
       return;
     }
     instances.value = currentInstances;
+    colMetrics.value = [];
+    metricTypes.value = [];
+    metricConfig.value = [];
+  }
+
+  async function queryInstanceExpressions(currentInstances: Instance[]) {
+    const expressions = props.config.expressions || [];
+    const typesOfMQE = props.config.typesOfMQE || [];
+    const subExpressions = props.config.subExpressions || [];
+
+    if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
+      const params = await useExpressionsQueryPodsMetrics(
+        currentInstances,
+        { ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
+        EntityType[3].value,
+      );
+      instances.value = params.data;
+      colMetrics.value = params.names;
+      metricTypes.value = params.metricTypesArr;
+      metricConfig.value = params.metricConfigArr;
+
+      return;
+    }
+    instances.value = currentInstances;
+    colMetrics.value = [];
+    metricTypes.value = [];
+    metricConfig.value = [];
   }
 
   function clickInstance(scope: any) {
@@ -207,12 +257,19 @@ limitations under the License. -->
   }
 
   watch(
-    () => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
+    () => [
+      ...(props.config.metricTypes || []),
+      ...(props.config.metrics || []),
+      ...(props.config.metricConfig || []),
+      ...(props.config.expressions || []),
+      props.config.metricMode,
+    ],
     (data, old) => {
       if (JSON.stringify(data) === JSON.stringify(old)) {
         return;
       }
       metricConfig.value = props.config.metricConfig;
+      metricMode.value = props.config.metricMode;
       queryInstanceMetrics(instances.value);
     },
   );

src/views/dashboard/graphs/ServiceList.vue

@@ -52,6 +52,7 @@ limitations under the License. -->
             metrics: colMetrics,
             metricConfig,
             metricTypes,
+            metricMode,
           }"
           v-if="colMetrics.length"
         />
@@ -80,7 +81,8 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import type { Service } from "@/types/selector";
   import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
-  import { EntityType } from "../data";
+  import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
+  import { EntityType, MetricModes } from "../data";
   import router from "@/router";
   import getDashboard from "@/hooks/useDashboardsSession";
   import type { MetricConfigOpt } from "@/types/dashboard";
@@ -100,6 +102,11 @@ limitations under the License. -->
           isEdit: boolean;
           names: string[];
           metricConfig: MetricConfigOpt[];
+          metricMode: string;
+          expressions: string[];
+          typesOfMQE: string[];
+          subExpressions: string[];
+          subTypesOfMQE: string[];
         }
       >,
       default: () => ({ dashboardName: "", fontSize: 12 }),
@@ -119,6 +126,7 @@ limitations under the License. -->
   const sortServices = ref<(Service & { merge: boolean })[]>([]);
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const metricTypes = ref<string[]>(props.config.metricTypes || []);
+  const metricMode = ref<string>(props.config.metricMode);
 
   queryServices();
 
@@ -187,8 +195,23 @@ limitations under the License. -->
 
     router.push(path);
   }
-  async function queryServiceMetrics(currentServices: Service[]) {
+  async function queryServiceMetrics(arr: Service[]) {
-    if (!currentServices.length) {
+    if (!arr.length) {
+      return;
+    }
+    const currentServices = arr.map((d: Service) => {
+      return {
+        id: d.id,
+        value: d.value,
+        label: d.label,
+        layers: d.layers,
+        group: d.group,
+        normal: d.normal,
+        merge: d.merge,
+      };
+    });
+    if (props.config.metricMode === MetricModes.Expression) {
+      queryServiceExpressions(currentServices);
       return;
     }
     const metrics = props.config.metrics || [];
@@ -211,6 +234,7 @@ limitations under the License. -->
         ...props.config,
         metricConfig: metricConfig.value || [],
       });
+
       services.value = data;
       colMetrics.value = names;
       metricTypes.value = metricTypesArr;
@@ -219,6 +243,32 @@ limitations under the License. -->
       return;
     }
     services.value = currentServices;
+    colMetrics.value = [];
+    colMetrics.value = [];
+    metricTypes.value = [];
+    metricConfig.value = [];
+  }
+  async function queryServiceExpressions(currentServices: Service[]) {
+    const expressions = props.config.expressions || [];
+    const typesOfMQE = props.config.typesOfMQE || [];
+    const subExpressions = props.config.subExpressions || [];
+
+    if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
+      const params = await useExpressionsQueryPodsMetrics(
+        currentServices,
+        { ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
+        EntityType[0].value,
+      );
+      services.value = params.data;
+      colMetrics.value = params.names;
+      metricTypes.value = params.metricTypesArr;
+      metricConfig.value = params.metricConfigArr;
+      return;
+    }
+    services.value = currentServices;
+    colMetrics.value = [];
+    metricTypes.value = [];
+    metricConfig.value = [];
   }
   function objectSpanMethod(param: any): any {
     if (!props.config.showGroup) {
@@ -251,15 +301,24 @@ limitations under the License. -->
   }
 
   watch(
-    () => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
+    () => [
+      ...(props.config.metricTypes || []),
+      ...(props.config.metrics || []),
+      ...(props.config.metricConfig || []),
+      ...(props.config.expressions || []),
+      ...(props.config.subExpressions || []),
+      props.config.metricMode,
+    ],
     (data, old) => {
       if (JSON.stringify(data) === JSON.stringify(old)) {
         return;
       }
       metricConfig.value = props.config.metricConfig;
+      metricMode.value = props.config.metricMode;
       queryServiceMetrics(services.value);
     },
   );
+
   watch(
     () => appStore.durationTime,
     () => {

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">

src/views/dashboard/graphs/components/ColumnGraph.vue

@@ -23,7 +23,7 @@ limitations under the License. -->
     <template #default="scope">
       <div class="chart">
         <Line
-          v-if="useListConfig(config, index).isLinear"
+          v-if="useListConfig(config, index).isLinear && config.metricMode !== MetricModes.Expression"
           :data="{
             [metric]: scope.row[metric] && scope.row[metric].values,
           }"
@@ -35,7 +35,10 @@ limitations under the License. -->
             showlabels: false,
           }"
         />
-        <span class="item flex-h" v-else-if="useListConfig(config, index).isAvg">
+        <span
+          class="item flex-h"
+          v-else-if="useListConfig(config, index).isAvg || config.metricMode === MetricModes.Expression"
+        >
           <el-popover placement="left" :width="400" trigger="click">
             <template #reference>
               <span class="trend">
@@ -79,6 +82,7 @@ limitations under the License. -->
   import Line from "../Line.vue";
   import Card from "../Card.vue";
   import { MetricQueryTypes } from "@/hooks/data";
+  import { ExpressionResultType, MetricModes } from "@/views/dashboard/data";
 
   /*global defineProps */
   const props = defineProps({
@@ -89,6 +93,7 @@ limitations under the License. -->
         metrics: string[];
         metricTypes: string[];
         metricConfig: MetricConfigOpt[];
+        metricMode: string;
       }>,
       default: () => ({}),
     },
@@ -107,7 +112,15 @@ limitations under the License. -->
     const i = Number(index);
     const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
     if (label) {
-      if (props.config.metricTypes[i] === MetricQueryTypes.ReadLabeledMetricsValues) {
+      if (
+        (
+          [
+            MetricQueryTypes.ReadLabeledMetricsValues,
+            ExpressionResultType.TIME_SERIES_VALUES,
+            ExpressionResultType.SINGLE_VALUE,
+          ] as string[]
+        ).includes(props.config.metricTypes[i])
+      ) {
         const name = (label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""))[
           props.config.metricConfig[i].index || 0
         ];