refactor: remove the General metric mode and related logical code (#384)

2025-10-15 12:49:17 +00:00 · 2024-04-11 17:50:43 +08:00
parent 460b24f42c
commit 03f321b62a
31 changed files with 204 additions and 1790 deletions
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -304,6 +304,7 @@ limitations under the License. -->

  async function importTemplates(event: any) {
    const arr: any = await readFile(event);
+
    for (const item of arr) {
      const { layer, name, entity } = item.configuration;
      const index = dashboardStore.dashboards.findIndex(
@@ -359,6 +360,20 @@ limitations under the License. -->
      multipleTableRef.value!.clearSelection();
    }, 2000);
  }
+
+  function removeUnusedConfig(config: any) {
+    // remove `General` metrics config
+    delete config.metrics;
+    delete config.metricTypes;
+    delete config.metricMode;
+    delete config.linkServerMetrics;
+    delete config.linkClientMetrics;
+    delete config.nodeMetric;
+    if (([WidgetType.Topology] as string[]).includes(config.type)) {
+      delete config.legend;
+    }
+  }
+
  function optimizeTemplate(
    children: (LayoutConfig & {
      moved?: boolean;
@@ -390,17 +405,8 @@ limitations under the License. -->
      if (isEmptyObject(child.widget)) {
        delete child.widget;
      }
-      if (!(child.metrics && child.metrics.length && child.metrics[0])) {
-        delete child.metrics;
-      }
-      if (!(child.metricTypes && child.metricTypes.length && child.metricTypes[0])) {
-        delete child.metricTypes;
-      }
      if (child.metricConfig && child.metricConfig.length) {
        child.metricConfig.forEach((c, index) => {
-          if (!c.calculation) {
-            delete c.calculation;
-          }
          if (!c.unit) {
            delete c.unit;
          }
@@ -415,6 +421,7 @@ limitations under the License. -->
      if (!(child.metricConfig && child.metricConfig.length)) {
        delete child.metricConfig;
      }
+      removeUnusedConfig(child);
      if (child.type === WidgetType.Tab) {
        for (const item of child.children || []) {
          optimizeTemplate(item.children);
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -32,10 +32,7 @@ limitations under the License. -->
        :config="{
          i: 0,
          ...graph,
-          metrics: config.metrics,
-          metricTypes: config.metricTypes,
          metricConfig: config.metricConfig,
-          metricMode: config.metricMode,
          expressions: config.expressions || [],
          typesOfMQE: typesOfMQE || [],
          subExpressions: config.subExpressions || [],
@@ -56,12 +53,10 @@ limitations under the License. -->
  import { useRoute } from "vue-router";
  import { useSelectorStore } from "@/store/modules/selectors";
  import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
  import { useExpressionsQueryProcessor } 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",
@@ -132,37 +127,16 @@ limitations under the License. -->
        }
      }
      async function queryMetrics() {
-        const isExpression = config.value.metricMode === MetricModes.Expression;
-        if (isExpression) {
-          loading.value = true;
-          const params = await useExpressionsQueryProcessor({
-            metrics: config.value.expressions || [],
-            metricConfig: config.value.metricConfig || [],
-            subExpressions: config.value.subExpressions || [],
-          });
-
-          loading.value = false;
-          source.value = params.source || {};
-          typesOfMQE.value = params.typesOfMQE;
-          return;
-        }
-        const params = await useQueryProcessor({ ...config.value });
-        if (!params) {
-          source.value = {};
-          return;
-        }
        loading.value = true;
-        const json = await dashboardStore.fetchMetricValue(params);
-        loading.value = false;
-        if (!json) {
-          return;
-        }
-        const d = {
-          metrics: config.value.metrics || [],
-          metricTypes: config.value.metricTypes || [],
+        const params = await useExpressionsQueryProcessor({
+          metrics: config.value.expressions || [],
          metricConfig: config.value.metricConfig || [],
-        };
-        source.value = await useSourceProcessor(json, d);
+          subExpressions: config.value.subExpressions || [],
+        });
+
+        loading.value = false;
+        source.value = params.source || {};
+        typesOfMQE.value = params.typesOfMQE;
      }
      watch(
        () => appStoreWithOut.durationTime,
@@ -209,7 +183,7 @@ limitations under the License. -->
    height: 25px;
    line-height: 25px;
    text-align: center;
-    background-color: aliceblue;
+    background-color: var(--sw-config-header);
    font-size: $font-size-smaller;
    position: relative;
  }
--- a/src/views/dashboard/components/WidgetLink.vue
+++ b/src/views/dashboard/components/WidgetLink.vue
@@ -54,7 +54,6 @@ 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();
@@ -88,8 +87,7 @@ limitations under the License. -->
      step: appStore.durationRow.step,
      utc: appStore.utc,
    });
-    const { widget, graph, metrics, metricTypes, metricConfig, metricMode, expressions, typesOfMQE, subExpressions } =
-      dashboardStore.selectedGrid;
+    const { widget, graph, metricConfig, expressions, typesOfMQE, subExpressions } = dashboardStore.selectedGrid;
    const c = (metricConfig || []).map((d: any) => {
      const t: any = {};
      if (d.label) {
@@ -103,19 +101,13 @@ limitations under the License. -->
    const opt: any = {
      type: dashboardStore.selectedGrid.type,
      graph: graph,
-      metricMode,
      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;
+    opt.expressions = expressions;
+    opt.typesOfMQE = typesOfMQE;
+    if (subExpressions && subExpressions.length) {
+      opt.subExpressions = subExpressions;
    }
    if (widget) {
      opt.widget = {
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -34,11 +34,8 @@ limitations under the License. -->
            ...graph,
            legend: (dashboardStore.selectedGrid.graph || {}).legend,
            i: dashboardStore.selectedGrid.i,
-            metrics: dashboardStore.selectedGrid.metrics,
-            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 || [],
@@ -89,7 +86,6 @@ 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",
@@ -142,23 +138,6 @@ 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);
      }

--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -25,28 +25,20 @@ limitations under the License. -->
      :clearable="true"
    />
  </div>
-  <div>{{ t("metrics") }}</div>
  <div class="flex-h">
-    <el-switch
-      v-model="isExpression"
-      class="mb-5"
-      active-text="Expressions"
-      inactive-text="General"
-      size="small"
-      @change="changeMetricMode"
-    />
-    <div class="ml-5 link">
+    <div>{{ t("metrics") }}</div>
+    <div class="link">
      <a target="_blank" href="https://skywalking.apache.org/docs/main/next/en/api/metrics-query-expression/">
        <Icon iconName="info_outline" size="middle" />
      </a>
    </div>
  </div>
-  <div v-if="isExpression && states.isList">
+  <div v-if="states.isList">
    <span class="title">{{ t("summary") }}</span>
    <span>{{ t("detail") }}</span>
  </div>
  <div v-for="(metric, index) in states.metrics" :key="index" class="mb-10">
-    <span v-if="isExpression">
+    <span>
      <div class="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
        {{ metric }}
      </div>
@@ -59,24 +51,6 @@ limitations under the License. -->
        {{ 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)">
@@ -88,7 +62,7 @@ limitations under the License. -->
    <span
      v-show="
        states.isList ||
-        [ProtocolTypes.ReadMetricsValues, ExpressionResultType.TIME_SERIES_VALUES as string].includes(states.metricTypes[0])
+        [ExpressionResultType.TIME_SERIES_VALUES as string].includes(states.metricTypes[0])
      "
    >
      <Icon
@@ -100,13 +74,13 @@ 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">
+    <div v-if="(states.tips || [])[index]" class="ml-10 red sm">
      {{ states.tips[index] }}
    </div>
-    <div v-if="(errors || [])[index] && isExpression" class="ml-10 red sm">
+    <div v-if="(errors || [])[index]" class="ml-10 red sm">
      {{ (errors || [])[index] }}
    </div>
-    <div v-if="(subErrors || [])[index] && isExpression" class="ml-10 red sm">
+    <div v-if="(subErrors || [])[index]" class="ml-10 red sm">
      {{ (subErrors || [])[index] }}
    </div>
  </div>
@@ -128,20 +102,14 @@ limitations under the License. -->
  import type { Option } from "@/types/app";
  import { useDashboardStore } from "@/store/modules/dashboard";
  import {
-    MetricTypes,
    ListChartTypes,
    DefaultGraphConfig,
    EntityType,
    ChartTypes,
    PodsChartTypes,
-    MetricsType,
-    ProtocolTypes,
    ExpressionResultType,
-    MetricModes,
-  } from "../../../data";
-  import { ElMessage } from "element-plus";
+  } from "@/views/dashboard/data";
  import Icon from "@/components/Icon.vue";
-  import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
  import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
  import { useI18n } from "vue-i18n";
  import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
@@ -160,16 +128,11 @@ limitations under the License. -->
    },
  });
  const dashboardStore = useDashboardStore();
-  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
-  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 metrics = computed(() => dashboardStore.selectedGrid.expressions || []);
+  const subMetrics = computed(() => dashboardStore.selectedGrid.subExpressions || []);
+  const subMetricTypes = computed(() => dashboardStore.selectedGrid.subTypesOfMQE || []);
  const graph = computed(() => dashboardStore.selectedGrid.graph || {});
-  const metricTypes = computed(
-    () => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [],
-  );
+  const typesOfMQE = computed(() => dashboardStore.selectedGrid.typesOfMQE || []);
  const states = reactive<{
    metrics: string[];
    subMetrics: string[];
@@ -177,17 +140,15 @@ limitations under the License. -->
    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 : [""],
+    metricTypes: typesOfMQE.value.length ? typesOfMQE.value : [""],
    metricTypeList: [],
    isList: false,
-    metricList: [],
    dashboardName: graph.value.dashboardName,
    dashboardList: [{ label: "", value: "" }],
    tips: [],
@@ -199,16 +160,13 @@ limitations under the License. -->
    unit: "",
    label: "",
    labelsIndex: "",
-    calculation: "",
    sortOrder: "DES",
  });

  states.isList = ListChartTypes.includes(graph.value.type);
  const defaultLen = ref<number>(states.isList ? 5 : 20);
-  const backupMetricConfig = ref<MetricConfigOpt[]>([]);

  setDashboards();
-  setMetricType();

  const setVisTypes = computed(() => {
    let graphs = [];
@@ -223,70 +181,6 @@ limitations under the License. -->
    return graphs;
  });

-  async function setMetricType(chart?: any) {
-    const g = chart || dashboardStore.selectedGrid.graph || {};
-    let arr: any[] = states.metricList;
-    if (!chart) {
-      const json = await dashboardStore.fetchMetricList();
-      if (json.errors) {
-        ElMessage.error(json.errors);
-        return;
-      }
-      arr = json.data.metrics;
-    }
-    states.metricList = (arr || []).filter((d: { type: string }) => {
-      if (states.isList) {
-        if (d.type === MetricsType.REGULAR_VALUE || d.type === MetricsType.LABELED_VALUE) {
-          return d;
-        }
-      } else if (g.type === "Table") {
-        if (d.type === MetricsType.LABELED_VALUE || d.type === MetricsType.REGULAR_VALUE) {
-          return d;
-        }
-      } else {
-        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),
-    );
-
-    if (metrics.length) {
-      // keep states.metrics index
-      const m = metrics.map((d: { value: string }) => d.value);
-      states.metrics = states.metrics.filter((d) => m.includes(d));
-    } else {
-      states.metrics = [""];
-      states.metricTypes = [""];
-    }
-    dashboardStore.selectWidget({
-      ...dashboardStore.selectedGrid,
-      metrics: states.metrics,
-      metricTypes: states.metricTypes,
-      graph: g,
-    });
-    states.metricTypeList = [];
-    for (const metric of metrics) {
-      if (states.metrics.includes(metric.value)) {
-        const arr = setMetricTypeList(metric.type);
-        states.metricTypeList.push(arr);
-      }
-    }
-    if (states.metrics && states.metrics[0]) {
-      queryMetrics();
-    } else {
-      emit("update", {});
-    }
-  }
-
  function setDashboards(type?: string) {
    const chart = type || (dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type);
    const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
@@ -308,6 +202,11 @@ limitations under the License. -->
    }, []);

    states.dashboardList = arr.length ? arr : [{ label: "", value: "" }];
+    if (states.metrics && states.metrics[0]) {
+      queryMetrics();
+    } else {
+      emit("update", {});
+    }
  }

  function changeChartType(item: Option) {
@@ -316,8 +215,6 @@ limitations under the License. -->
    if (states.isList) {
      dashboardStore.selectWidget({
        ...dashboardStore.selectedGrid,
-        metrics: [""],
-        metricTypes: [""],
        expressions: [""],
        typesOfMQE: [""],
      });
@@ -326,97 +223,20 @@ limitations under the License. -->
      defaultLen.value = 5;
    }

-    if (isExpression.value) {
-      dashboardStore.selectWidget({
-        ...dashboardStore.selectedGrid,
-        graph: chart,
-      });
-    } else {
-      setMetricType(chart);
-    }
+    dashboardStore.selectWidget({
+      ...dashboardStore.selectedGrid,
+      graph: chart,
+    });
    setDashboards(chart.type);
    states.dashboardName = "";
    defaultLen.value = 10;
  }

-  function changeMetrics(index: number, arr: (Option & { type: string })[] | any) {
-    if (!arr.length) {
-      states.metricTypeList = [];
-      states.metricTypes = [];
-      dashboardStore.selectWidget({
-        ...dashboardStore.selectedGrid,
-        ...{ metricTypes: states.metricTypes, metrics: states.metrics },
-      });
-      return;
-    }
-    states.metrics[index] = arr[0].value;
-    const typeOfMetrics = arr[0].type;
-
-    states.metricTypeList[index] = setMetricTypeList(typeOfMetrics);
-    states.metricTypes[index] = MetricTypes[typeOfMetrics][0].value;
-    dashboardStore.selectWidget({
-      ...dashboardStore.selectedGrid,
-      ...{ metricTypes: states.metricTypes, metrics: states.metrics },
-    });
-    if (states.isList) {
-      return;
-    }
-    queryMetrics();
-  }
-
-  function changeMetricType(index: number, opt: Option[] | any) {
-    const metric = states.metricList.filter((d: Option) => states.metrics[index] === d.value)[0] || {};
-    const l = setMetricTypeList(metric.type);
-    if (states.isList) {
-      states.metricTypes[index] = opt[0].value;
-      states.metricTypeList[index] = l;
-    } else {
-      states.metricTypes = states.metricTypes.map((d: string) => {
-        d = opt[0].value;
-        return d;
-      });
-      states.metricTypeList = states.metricTypeList.map((d: Option[]) => {
-        d = l;
-
-        return d;
-      });
-    }
-    dashboardStore.selectWidget({
-      ...dashboardStore.selectedGrid,
-      ...{ metricTypes: states.metricTypes },
-    });
-    if (states.isList) {
-      return;
-    }
-    queryMetrics();
-  }
  async function queryMetrics() {
    if (states.isList) {
      return;
    }
-    if (isExpression.value) {
-      queryMetricsWithExpressions();
-      return;
-    }
-    const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
-    if (!(metrics && metrics[0] && metricTypes && metricTypes[0])) {
-      return emit("update", {});
-    }
-    const params = useQueryProcessor({ ...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 = useSourceProcessor(json, { ...states, metricConfig });
-    emit("update", source);
+    queryMetricsWithExpressions();
  }

  async function queryMetricsWithExpressions() {
@@ -432,7 +252,6 @@ limitations under the License. -->
      ...dashboardStore.selectedGrid,
      typesOfMQE: states.metricTypes,
    });
-
    emit("update", params.source || {});
  }

@@ -454,43 +273,32 @@ limitations under the License. -->
  function addMetric() {
    states.metrics.push("");
    states.tips.push("");
-    if (isExpression.value && states.isList) {
+    if (states.isList) {
      states.subMetrics.push("");
      states.subTips.push("");
    }

    if (!states.isList) {
      states.metricTypes.push(states.metricTypes[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 };
+      let v: any = { typesOfMQE: states.metricTypes, expressions: states.metrics };
+      if (states.isList) {
+        states.subMetrics = [""];
+        states.subMetricTypes = [""];
+        states.subTips = [""];
+        v = {
+          ...v,
+          subTypesOfMQE: states.subMetricTypes,
+          subExpressions: states.subMetrics,
+        };
      }
      dashboardStore.selectWidget({
        ...dashboardStore.selectedGrid,
@@ -505,37 +313,26 @@ limitations under the License. -->
    const config = dashboardStore.selectedGrid.metricConfig || [];
    const metricConfig = config[index] ? config.splice(index, 1) : config;
    let p = {};
-    if (isExpression.value) {
-      if (states.isList) {
-        states.subMetrics.splice(index, 1);
-        states.subMetricTypes.splice(index, 1);
-        states.subTips.splice(index, 1);
-        p = {
-          ...p,
-          typesOfMQE: states.metricTypes,
-          expressions: states.metrics,
-          subTypesOfMQE: states.subMetricTypes,
-          subExpressions: states.subMetrics,
-        };
-      }
-    } else {
-      p = { metricTypes: states.metricTypes, metrics: states.metrics };
+    if (states.isList) {
+      states.subMetrics.splice(index, 1);
+      states.subMetricTypes.splice(index, 1);
+      states.subTips.splice(index, 1);
+      p = {
+        ...p,
+        typesOfMQE: states.metricTypes,
+        expressions: states.metrics,
+        subTypesOfMQE: states.subMetricTypes,
+        subExpressions: states.subMetrics,
+      };
    }
    dashboardStore.selectWidget({
      ...dashboardStore.selectedGrid,
      ...p,
      metricConfig,
    });
+    queryMetrics();
  }
-  function setMetricTypeList(type: string) {
-    if (type !== MetricsType.REGULAR_VALUE) {
-      return MetricTypes[type];
-    }
-    if (states.isList || graph.value.type === "Table") {
-      return [MetricTypes.REGULAR_VALUE[0], MetricTypes.REGULAR_VALUE[1]];
-    }
-    return MetricTypes[type];
-  }
+
  function setMetricConfig(index: number) {
    const n = {
      unit: "",
@@ -553,20 +350,6 @@ 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, "");

@@ -651,5 +434,6 @@ limitations under the License. -->
  .link {
    cursor: pointer;
    color: $active-color;
+    padding-left: 2px;
  }
 </style>
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -28,7 +28,7 @@ limitations under the License. -->
        "
      />
    </div>
-    <div class="item mb-10" v-if="hasLabel || isExpression">
+    <div class="item mb-10">
      <span class="label">{{ t("labels") }}</span>
      <el-input
        class="input"
@@ -42,7 +42,7 @@ limitations under the License. -->
        "
      />
    </div>
-    <div class="item mb-10" v-if="isList && isExpression">
+    <div class="item mb-10" v-if="isList">
      <span class="label">{{ t("detailLabel") }}</span>
      <el-input
        class="input"
@@ -56,30 +56,6 @@ limitations under the License. -->
        "
      />
    </div>
-    <div class="item mb-10" v-if="[ProtocolTypes.ReadLabeledMetricsValues].includes(metricType) && !isExpression">
-      <span class="label">{{ t("labelsIndex") }}</span>
-      <el-input
-        class="input"
-        v-model="currentMetric.labelsIndex"
-        size="small"
-        placeholder="auto"
-        @change="
-          updateConfig(index, {
-            labelsIndex: encodeURIComponent(currentMetric.labelsIndex || ''),
-          })
-        "
-      />
-    </div>
-    <div class="item mb-10" v-show="!isExpression">
-      <span class="label">{{ t("aggregation") }}</span>
-      <SelectSingle
-        :value="currentMetric.calculation"
-        :options="CalculationOpts"
-        @change="changeConfigs(index, { calculation: $event })"
-        class="selectors"
-        :clearable="true"
-      />
-    </div>
    <div class="item mb-10" v-show="isTopn">
      <span class="label">{{ t("sortOrder") }}</span>
      <SelectSingle
@@ -108,10 +84,9 @@ limitations under the License. -->
  import { ref, watch, computed } from "vue";
  import type { PropType } from "vue";
  import { useI18n } from "vue-i18n";
-  import { SortOrder, CalculationOpts, MetricModes } from "../../../data";
+  import { SortOrder, ExpressionResultType, ListChartTypes } from "@/views/dashboard/data";
  import { useDashboardStore } from "@/store/modules/dashboard";
  import type { MetricConfigOpt } from "@/types/dashboard";
-  import { ListChartTypes, ProtocolTypes } from "../../../data";

  /*global defineEmits, defineProps */
  const props = defineProps({
@@ -124,30 +99,17 @@ 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 = computed(
-    () => (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)
-    );
-  });
+  const metricTypes = computed(() => dashboardStore.selectedGrid.typesOfMQE || []);
  const isList = computed(() => {
    const graph = dashboardStore.selectedGrid.graph || {};
    return ListChartTypes.includes(graph.type);
  });
  const isTopn = computed(() =>
-    [ProtocolTypes.SortMetrics, ProtocolTypes.ReadSampledRecords, ProtocolTypes.ReadRecords].includes(
-      metricTypes.value[props.index],
-    ),
+    [ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST].includes(metricTypes.value[props.index]),
  );

  function updateConfig(index: number, param: { [key: string]: string }) {
@@ -170,7 +132,6 @@ limitations under the License. -->
  watch(
    () => props.currentMetricConfig,
    () => {
-      isExpression.value = dashboardStore.selectedGrid.metricMode === MetricModes.Expression;
      currentMetric.value = {
        ...props.currentMetricConfig,
        topN: Number(props.currentMetricConfig.topN) || 10,
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -51,15 +51,12 @@ limitations under the License. -->
        :data="state.source"
        :config="{
          ...data.graph,
-          metrics: data.metrics || [''],
-          metricTypes: data.metricTypes || [''],
          i: data.i,
          id: data.id,
          metricConfig: data.metricConfig || [],
          filters: data.filters || {},
          relatedTrace: data.relatedTrace || {},
          associate: data.associate || [],
-          metricMode: data.metricMode,
          expressions: data.expressions || [],
          typesOfMQE: typesOfMQE || [],
          subExpressions: data.subExpressions || [],
@@ -81,12 +78,10 @@ limitations under the License. -->
  import { useSelectorStore } from "@/store/modules/selectors";
  import graphs from "../graphs";
  import { useI18n } from "vue-i18n";
-  import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
  import { useExpressionsQueryProcessor } 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: {
@@ -121,38 +116,15 @@ limitations under the License. -->
      }

      async function queryMetrics() {
-        const isExpression = props.data.metricMode === MetricModes.Expression;
-
-        if (isExpression) {
-          loading.value = true;
-          const e = {
-            metrics: props.data.expressions || [],
-            metricConfig: props.data.metricConfig || [],
-          };
-          const params = (await useExpressionsQueryProcessor(e)) || {};
-          loading.value = false;
-          state.source = params.source || {};
-          typesOfMQE.value = params.typesOfMQE;
-          return;
-        }
-        const params = await useQueryProcessor({ ...props.data });
-
-        if (!params) {
-          state.source = {};
-          return;
-        }
        loading.value = true;
-        const json = await dashboardStore.fetchMetricValue(params);
-        loading.value = false;
-        if (!json) {
-          return;
-        }
-        const d = {
-          metrics: props.data.metrics || [],
-          metricTypes: props.data.metricTypes || [],
+        const e = {
+          metrics: props.data.expressions || [],
          metricConfig: props.data.metricConfig || [],
        };
-        state.source = await useSourceProcessor(json, d);
+        const params = (await useExpressionsQueryProcessor(e)) || {};
+        loading.value = false;
+        state.source = params.source || {};
+        typesOfMQE.value = params.typesOfMQE;
      }

      function removeWidget() {
@@ -188,7 +160,7 @@ limitations under the License. -->
        dashboardStore.selectWidget(props.data);
      }
      watch(
-        () => [props.data.metricTypes, props.data.metrics, props.data.expressions],
+        () => props.data.expressions,
        () => {
          if (!dashboardStore.selectedGrid) {
            return;
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -34,29 +34,6 @@ export const ChartTypes = [
  { label: "Endpoint List", value: "EndpointList" },
  { label: "Instance List", value: "InstanceList" },
 ];
-export const MetricChartType: any = {
-  readMetricsValue: [{ label: "Card", value: "Card" }],
-  readMetricsValues: [
-    { label: "Bar", value: "Bar" },
-    { label: "Line", value: "Line" },
-    { label: "Area", value: "Area" },
-  ],
-  sortMetrics: [{ label: "Top List", value: "TopList" }],
-  readLabeledMetricsValues: [{ label: "Line", value: "Line" }],
-  readHeatMap: [{ label: "Heat Map", value: "HeatMap" }],
-  readSampledRecords: [{ label: "Top List", value: "TopList" }],
-  readRecords: [{ label: "Top List", value: "TopList" }],
-};
-export enum ProtocolTypes {
-  ReadRecords = "readRecords",
-  ReadSampledRecords = "readSampledRecords",
-  SortMetrics = "sortMetrics",
-  ReadLabeledMetricsValues = "readLabeledMetricsValues",
-  ReadHeatMap = "readHeatMap",
-  ReadMetricsValues = "readMetricsValues",
-  ReadMetricsValue = "readMetricsValue",
-}
-
 export enum ExpressionResultType {
  UNKNOWN = "UNKNOWN",
  SINGLE_VALUE = "SINGLE_VALUE",
@@ -124,34 +101,6 @@ export const DefaultGraphConfig: { [key: string]: any } = {
  },
 };

-export enum MetricsType {
-  UNKNOWN = "UNKNOWN",
-  REGULAR_VALUE = "REGULAR_VALUE",
-  LABELED_VALUE = "LABELED_VALUE",
-  HEATMAP = "HEATMAP",
-  SAMPLED_RECORD = "SAMPLED_RECORD",
-}
-export const MetricTypes: {
-  [key: string]: Array<{ label: string; value: string }>;
-} = {
-  REGULAR_VALUE: [
-    { label: "read all values in the duration", value: "readMetricsValues" },
-    {
-      label: "read the single value in the duration",
-      value: "readMetricsValue",
-    },
-    { label: "get sorted top N values", value: "sortMetrics" },
-  ],
-  LABELED_VALUE: [
-    {
-      label: "read all values of labels in the duration",
-      value: "readLabeledMetricsValues",
-    },
-  ],
-  HEATMAP: [{ label: "read heatmap values in the duration", value: "readHeatMap" }],
-  SAMPLED_RECORD: [{ label: "get sorted topN values", value: "readRecords" }],
-};
-
 export enum MetricCatalog {
  SERVICE = "Service",
  SERVICE_INSTANCE = "ServiceInstance",
@@ -292,19 +241,6 @@ export const ScopeType = [
  { value: "Endpoint", label: "Endpoint", key: 3 },
  { value: "ServiceInstance", label: "Service Instance", key: 3 },
 ];
-export const LegendConditions = [
-  { label: "&&", value: "and" },
-  { label: "||", value: "or" },
-];
-export const MetricConditions = [
-  { label: ">", value: ">" },
-  { label: "<", value: "<" },
-];
-export enum LegendOpt {
-  NAME = "name",
-  VALUE = "value",
-  CONDITION = "condition",
-}
 export const DepthList = [1, 2, 3, 4, 5].map((item: number) => ({
  value: item,
  label: String(item),
@@ -329,24 +265,6 @@ export const TextColors: { [key: string]: string } = {
  purple: "#bf99f8",
 };

-export const CalculationOpts = [
-  { label: "Percentage", value: "percentage" },
-  { label: "Apdex", value: "apdex" },
-  { label: "Avg-preview", value: "average" },
-  { label: "Percentage + Avg-preview", value: "percentageAvg" },
-  { label: "Apdex + Avg-preview", value: "apdexAvg" },
-  { label: "Byte to KB", value: "byteToKB" },
-  { label: "Byte to MB", value: "byteToMB" },
-  { label: "Byte to GB", value: "byteToGB" },
-  {
-    label: "Milliseconds to YYYY-MM-DD HH:mm:ss",
-    value: "convertMilliseconds",
-  },
-  { label: "Seconds to YYYY-MM-DD HH:mm:ss", value: "convertSeconds" },
-  { label: "Milliseconds to seconds", value: "msTos" },
-  { label: "Seconds to days", value: "secondToDay" },
-  { label: "Nanoseconds to milliseconds", value: "nanosecondToMillisecond" },
-];
 export const RefIdTypes = [
  { label: "Trace ID", value: "traceId" },
  { label: "None", value: "none" },
@@ -357,10 +275,6 @@ export const RefreshOptions = [
  { label: "Last 7 days", value: "7", step: "DAY" },
 ];

-export enum MetricModes {
-  Expression = "Expression",
-  General = "General",
-}
 export enum CallTypes {
  Server = "SERVER",
  Client = "CLIENT",
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -40,8 +40,7 @@ limitations under the License. -->
          :config="{
            ...config,
            metricConfig,
-            metricTypes,
-            metricMode,
+            typesOfMQE,
          }"
          v-if="colMetrics.length"
        />
@@ -58,9 +57,8 @@ limitations under the License. -->
  import type { EndpointListConfig } from "@/types/dashboard";
  import type { Endpoint } from "@/types/selector";
  import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
  import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
-  import { EntityType, MetricModes } from "../data";
+  import { EntityType } from "../data";
  import router from "@/router";
  import getDashboard from "@/hooks/useDashboardsSession";
  import type { MetricConfigOpt } from "@/types/dashboard";
@@ -75,9 +73,6 @@ limitations under the License. -->
      type: Object as PropType<
        EndpointListConfig & {
          i: string;
-          metrics: string[];
-          metricTypes: string[];
-          metricMode: string;
          expressions: string[];
          typesOfMQE: string[];
          subExpressions: string[];
@@ -85,8 +80,6 @@ limitations under the License. -->
        } & { metricConfig: MetricConfigOpt[] }
      >,
      default: () => ({
-        metrics: [],
-        metricTypes: [],
        dashboardName: "",
        fontSize: 12,
        i: "",
@@ -106,8 +99,7 @@ limitations under the License. -->
  const colMetrics = ref<string[]>([]);
  const colSubMetrics = ref<string[]>([]);
  const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
-  const metricTypes = ref<string[]>(props.config.metricTypes || []);
-  const metricMode = ref<string>(props.config.metricMode);
+  const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);

  if (props.needQuery) {
    queryEndpoints();
@@ -138,34 +130,7 @@ limitations under the License. -->
        merge: d.merge,
      };
    });
-    if (props.config.metricMode === MetricModes.Expression) {
-      queryEndpointExpressions(currentPods);
-      return;
-    }
-    const metrics = props.config.metrics || [];
-    const types = props.config.metricTypes || [];
-    if (metrics.length && metrics[0] && types.length && types[0]) {
-      const params = await useQueryPodsMetrics(currentPods, props.config, EntityType[2].value);
-      const json = await dashboardStore.fetchMetricValue(params);
-
-      if (json.errors) {
-        ElMessage.error(json.errors);
-        return;
-      }
-      const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentPods, json, {
-        ...props.config,
-        metricConfig: metricConfig.value,
-      });
-      endpoints.value = data;
-      colMetrics.value = names;
-      metricTypes.value = metricTypesArr;
-      metricConfig.value = metricConfigArr;
-      return;
-    }
-    endpoints.value = currentPods;
-    colMetrics.value = [];
-    metricTypes.value = [];
-    metricConfig.value = [];
+    queryEndpointExpressions(currentPods);
  }
  async function queryEndpointExpressions(currentPods: Endpoint[]) {
    const expressions = props.config.expressions || [];
@@ -180,8 +145,8 @@ limitations under the License. -->
      endpoints.value = params.data;
      colMetrics.value = params.names;
      colSubMetrics.value = params.subNames;
-      metricTypes.value = params.metricTypesArr;
      metricConfig.value = params.metricConfigArr;
+      typesOfMQE.value = params.metricTypesArr;
      emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });

      return;
@@ -189,8 +154,8 @@ limitations under the License. -->
    endpoints.value = currentPods;
    colMetrics.value = [];
    colSubMetrics.value = [];
-    metricTypes.value = [];
    metricConfig.value = [];
+    typesOfMQE.value = [];
    emit("expressionTips", [], []);
  }
  function clickEndpoint(scope: any) {
@@ -212,19 +177,15 @@ limitations under the License. -->
  }
  watch(
    () => [
-      ...(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;
      queryEndpointMetrics(endpoints.value);
    },
  );
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -39,8 +39,7 @@ limitations under the License. -->
          :config="{
            ...config,
            metricConfig,
-            metricTypes,
-            metricMode,
+            typesOfMQE,
          }"
          v-if="colMetrics.length"
        />
@@ -85,9 +84,8 @@ limitations under the License. -->
  import { useDashboardStore } from "@/store/modules/dashboard";
  import type { InstanceListConfig } from "@/types/dashboard";
  import type { Instance } from "@/types/selector";
-  import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
  import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
-  import { EntityType, MetricModes } from "../data";
+  import { EntityType } from "../data";
  import router from "@/router";
  import getDashboard from "@/hooks/useDashboardsSession";
  import type { MetricConfigOpt } from "@/types/dashboard";
@@ -100,9 +98,7 @@ limitations under the License. -->
        InstanceListConfig & {
          i: string;
          metrics: string[];
-          metricTypes: string[];
          isEdit: boolean;
-          metricMode: string;
          expressions: string[];
          typesOfMQE: string[];
          subExpressions: string[];
@@ -114,7 +110,7 @@ limitations under the License. -->
        fontSize: 12,
        i: "",
        metrics: [],
-        metricTypes: [],
+        typesOfMQE: [],
      }),
    },
    intervalTime: { type: Array as PropType<string[]>, default: () => [] },
@@ -131,9 +127,9 @@ limitations under the License. -->
  const colMetrics = ref<string[]>([]);
  const colSubMetrics = ref<string[]>([]);
  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);
+  const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);
+
  if (props.needQuery) {
    queryInstance();
  }
@@ -169,36 +165,7 @@ limitations under the License. -->
        attributes: d.attributes,
      };
    });
-    if (props.config.metricMode === MetricModes.Expression) {
-      queryInstanceExpressions(currentInstances);
-      return;
-    }
-    const metrics = props.config.metrics || [];
-    const types = props.config.metricTypes || [];
-
-    if (metrics.length && metrics[0] && types.length && types[0]) {
-      const params = await useQueryPodsMetrics(currentInstances, props.config, EntityType[3].value);
-      const json = await dashboardStore.fetchMetricValue(params);
-
-      if (json.errors) {
-        ElMessage.error(json.errors);
-        return;
-      }
-      const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentInstances, json, {
-        ...props.config,
-        metricConfig: metricConfig.value,
-      });
-      instances.value = data;
-      colMetrics.value = names;
-      metricTypes.value = metricTypesArr;
-      metricConfig.value = metricConfigArr;
-
-      return;
-    }
-    instances.value = currentInstances;
-    colMetrics.value = [];
-    metricTypes.value = [];
-    metricConfig.value = [];
+    queryInstanceExpressions(currentInstances);
  }

  async function queryInstanceExpressions(currentInstances: Instance[]) {
@@ -214,7 +181,7 @@ limitations under the License. -->
      instances.value = params.data;
      colMetrics.value = params.names;
      colSubMetrics.value = params.subNames;
-      metricTypes.value = params.metricTypesArr;
+      typesOfMQE.value = params.metricTypesArr;
      metricConfig.value = params.metricConfigArr;
      emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });

@@ -223,7 +190,7 @@ limitations under the License. -->
    instances.value = currentInstances;
    colSubMetrics.value = [];
    colMetrics.value = [];
-    metricTypes.value = [];
+    typesOfMQE.value = [];
    metricConfig.value = [];
    emit("expressionTips", [], []);
  }
@@ -262,19 +229,15 @@ limitations under the License. -->

  watch(
    () => [
-      ...(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;
      queryInstanceMetrics(instances.value);
    },
  );
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -51,8 +51,7 @@ limitations under the License. -->
          :config="{
            ...config,
            metricConfig,
-            metricTypes,
-            metricMode,
+            typesOfMQE,
          }"
          v-if="colMetrics.length"
        />
@@ -78,9 +77,8 @@ limitations under the License. -->
  import { useDashboardStore } from "@/store/modules/dashboard";
  import { useAppStoreWithOut } from "@/store/modules/app";
  import type { Service } from "@/types/selector";
-  import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useMetricsProcessor";
  import { useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
-  import { EntityType, MetricModes } from "../data";
+  import { EntityType } from "../data";
  import router from "@/router";
  import getDashboard from "@/hooks/useDashboardsSession";
  import type { MetricConfigOpt } from "@/types/dashboard";
@@ -95,12 +93,9 @@ limitations under the License. -->
      type: Object as PropType<
        ServiceListConfig & {
          i: string;
-          metrics: string[];
-          metricTypes: string[];
          isEdit: boolean;
          names: string[];
          metricConfig: MetricConfigOpt[];
-          metricMode: string;
          expressions: string[];
          typesOfMQE: string[];
          subExpressions: string[];
@@ -125,8 +120,7 @@ limitations under the License. -->
  const groups = ref<any>({});
  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);
+  const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);

  queryServices();

@@ -211,43 +205,7 @@ limitations under the License. -->
        shortName: d.shortName,
      };
    });
-    if (props.config.metricMode === MetricModes.Expression) {
-      queryServiceExpressions(currentServices);
-      return;
-    }
-    const metrics = props.config.metrics || [];
-    const types = props.config.metricTypes || [];
-
-    if (metrics.length && metrics[0] && types.length && types[0]) {
-      const params = await useQueryPodsMetrics(
-        currentServices,
-        { ...props.config, metricConfig: metricConfig.value || [] },
-        EntityType[0].value,
-      );
-      const json = await dashboardStore.fetchMetricValue(params);
-
-      if (json.errors) {
-        ElMessage.error(json.errors);
-        return;
-      }
-
-      const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentServices, json, {
-        ...props.config,
-        metricConfig: metricConfig.value || [],
-      });
-
-      services.value = data;
-      colMetrics.value = names;
-      metricTypes.value = metricTypesArr;
-      metricConfig.value = metricConfigArr;
-
-      return;
-    }
-    services.value = currentServices;
-    colMetrics.value = [];
-    colMetrics.value = [];
-    metricTypes.value = [];
-    metricConfig.value = [];
+    queryServiceExpressions(currentServices);
  }
  async function queryServiceExpressions(currentServices: Service[]) {
    const expressions = props.config.expressions || [];
@@ -262,16 +220,16 @@ limitations under the License. -->
      services.value = params.data;
      colMetrics.value = params.names;
      colSubMetrics.value = params.subNames;
-      metricTypes.value = params.metricTypesArr;
      metricConfig.value = params.metricConfigArr;
+      typesOfMQE.value = params.metricTypesArr;
      emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
      return;
    }
    services.value = currentServices;
    colMetrics.value = [];
    colSubMetrics.value = [];
-    metricTypes.value = [];
    metricConfig.value = [];
+    typesOfMQE.value = [];
    emit("expressionTips", [], []);
  }
  function objectSpanMethod(param: any): any {
@@ -306,19 +264,15 @@ limitations under the License. -->

  watch(
    () => [
-      ...(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);
    },
  );
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -56,7 +56,6 @@ limitations under the License. -->
      type: Object as PropType<{
        showTableValues: boolean;
        tableHeaderCol2: string;
-        metricTypes: string[];
        typesOfMQE: string[];
      }>,
      default: () => ({ showTableValues: true }),
@@ -66,10 +65,6 @@ limitations under the License. -->
  const { t } = useI18n();
  const nameWidth = computed(() => (props.config.showTableValues ? 80 : 100));
  const dataKeys = computed(() => {
-    if (props.config.metricTypes && props.config.metricTypes[0] === "readMetricsValue") {
-      const keys = Object.keys(props.data || {});
-      return keys;
-    }
    const keys = Object.keys(props.data || {}).filter(
      (i: string) => Array.isArray(props.data[i]) && props.data[i].length,
    );
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -64,8 +64,7 @@ limitations under the License. -->
  import copy from "@/utils/copy";
  import { TextColors } from "@/views/dashboard/data";
  import Trace from "@/views/dashboard/related/trace/Index.vue";
-  import { QueryOrders, Status, RefIdTypes, ProtocolTypes, ExpressionResultType } from "../data";
-  import { WidgetType } from "@/views/dashboard/data";
+  import { WidgetType, QueryOrders, Status, RefIdTypes, ExpressionResultType } from "@/views/dashboard/data";

  /*global defineProps */
  const props = defineProps({
@@ -77,10 +76,8 @@ limitations under the License. -->
    },
    config: {
      type: Object as PropType<{
-        metricMode: string;
        color: string;
-        metrics: string[];
-        metricTypes: string[];
+        expressions: string[];
        typesOfMQE: string[];
        relatedTrace: any;
      }>,
@@ -116,11 +113,8 @@ limitations under the License. -->
      queryOrder: QueryOrders[1].value,
      status: Status[2].value,
      id: item.refId,
-      metricValue: [{ label: props.config.metrics[0], data: item.value, value: item.name }],
-      isReadRecords:
-        props.config.typesOfMQE.includes(ExpressionResultType.RECORD_LIST) ||
-        props.config.metricTypes.includes(ProtocolTypes.ReadRecords) ||
-        undefined,
+      metricValue: [{ label: props.config.expressions[0], data: item.value, value: item.name }],
+      isReadRecords: props.config.typesOfMQE.includes(ExpressionResultType.RECORD_LIST) || undefined,
    };
    traceOptions.value = {
      ...traceOptions.value,
--- a/src/views/dashboard/graphs/components/ColumnGraph.vue
+++ b/src/views/dashboard/graphs/components/ColumnGraph.vue
@@ -22,23 +22,7 @@ limitations under the License. -->
  >
    <template #default="scope">
      <div class="chart">
-        <Line
-          v-if="useListConfig(config, index).isLinear && config.metricMode !== MetricModes.Expression"
-          :data="{
-            [metric]: scope.row[metric] && scope.row[metric].values,
-          }"
-          :intervalTime="intervalTime"
-          :config="{
-            showXAxis: false,
-            showYAxis: false,
-            smallTips: true,
-            showlabels: false,
-          }"
-        />
-        <span
-          class="item flex-h"
-          v-else-if="useListConfig(config, index).isAvg || config.metricMode === MetricModes.Expression"
-        >
+        <span class="item flex-h">
          <el-popover placement="left" :width="400" trigger="click">
            <template #reference>
              <span class="trend">
@@ -70,7 +54,6 @@ limitations under the License. -->
            />
          </span>
        </span>
-        <Card v-else :data="{ [metric]: scope.row[metric] }" :config="{ textAlign: 'left' }" />
      </div>
    </template>
  </el-table-column>
@@ -79,11 +62,9 @@ limitations under the License. -->
 <script lang="ts" setup>
  import type { PropType } from "vue";
  import type { MetricConfigOpt } from "@/types/dashboard";
-  import { useListConfig } from "@/hooks/useListConfig";
  import Line from "../Line.vue";
  import Card from "../Card.vue";
-  import { MetricQueryTypes } from "@/hooks/data";
-  import { ExpressionResultType, MetricModes } from "@/views/dashboard/data";
+  import { ExpressionResultType } from "@/views/dashboard/data";

  /*global defineProps */
  const props = defineProps({
@@ -92,9 +73,8 @@ limitations under the License. -->
    config: {
      type: Object as PropType<{
        i: string;
-        metricTypes: string[];
+        typesOfMQE: string[];
        metricConfig: MetricConfigOpt[];
-        metricMode: string;
      }>,
      default: () => ({}),
    },
@@ -120,13 +100,9 @@ limitations under the License. -->
    }
    if (label) {
      if (
-        (
-          [
-            MetricQueryTypes.ReadLabeledMetricsValues,
-            ExpressionResultType.TIME_SERIES_VALUES,
-            ExpressionResultType.SINGLE_VALUE,
-          ] as string[]
-        ).includes(props.config.metricTypes[i])
+        ([ExpressionResultType.TIME_SERIES_VALUES, ExpressionResultType.SINGLE_VALUE] as string[]).includes(
+          props.config.typesOfMQE[i],
+        )
      ) {
        const name = (label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""))[
          props.config.metricConfig[i].index || 0
--- a/src/views/dashboard/related/topology/config/Metrics.vue
+++ b/src/views/dashboard/related/topology/config/Metrics.vue
@@ -19,7 +19,7 @@ limitations under the License. -->
        {{ t("expressions") }}
      </span>
      <span class="label" v-else>
-        {{ t(dashboardStore.selectedGrid.metricMode === MetricModes.General ? "metrics" : "expressions") }}
+        {{ t("expressions") }}
      </span>
      <SelectSingle :value="currentMetric" :options="metricList" @change="changeMetric" class="selectors" />
    </div>
@@ -43,33 +43,19 @@ limitations under the License. -->
        @change="changeConfigs({ label: currentConfig.label })"
      />
    </div>
-    <div
-      class="item mb-10"
-      v-if="type !== 'hierarchyServicesConfig' && dashboardStore.selectedGrid.metricMode === MetricModes.General"
-    >
-      <span class="label">{{ t("aggregation") }}</span>
-      <SelectSingle
-        :value="currentConfig.calculation"
-        :options="CalculationOpts"
-        @change="changeConfigs({ calculation: $event })"
-        class="selectors"
-        :clearable="true"
-      />
-    </div>
  </div>
 </template>
 <script lang="ts" setup>
  import { ref, computed, watch } from "vue";
  import { useI18n } from "vue-i18n";
  import type { Option } from "@/types/app";
-  import { CalculationOpts, MetricModes, EntityType, ConfigFieldTypes } from "@/views/dashboard/data";
+  import { EntityType, ConfigFieldTypes } from "@/views/dashboard/data";
  import { useDashboardStore } from "@/store/modules/dashboard";
  import getDashboard from "@/hooks/useDashboardsSession";

  /*global defineEmits, defineProps */
  const props = defineProps({
    type: { type: String, default: "" },
-    isExpression: { type: Boolean, default: true },
    layer: { type: String, default: "" },
    expressions: { type: Array<string>, default: () => [] },
    entity: { type: String, default: EntityType[0].value },
@@ -82,23 +68,16 @@ limitations under the License. -->
      return props.expressions || [];
    }
    let metrics: string[] = [];
-    const {
-      linkServerExpressions,
-      linkServerMetrics,
-      linkClientExpressions,
-      linkClientMetrics,
-      nodeExpressions,
-      nodeMetrics,
-    } = dashboardStore.selectedGrid;
+    const { linkServerExpressions, linkClientExpressions, nodeExpressions } = dashboardStore.selectedGrid;
    switch (props.type) {
      case "linkServerMetricConfig":
-        metrics = props.isExpression ? linkServerExpressions : linkServerMetrics;
+        metrics = linkServerExpressions;
        break;
      case "linkClientMetricConfig":
-        metrics = props.isExpression ? linkClientExpressions : linkClientMetrics;
+        metrics = linkClientExpressions;
        break;
      case "nodeMetricConfig":
-        metrics = props.isExpression ? nodeExpressions : nodeMetrics;
+        metrics = nodeExpressions;
        break;
    }
    return metrics || [];
--- a/src/views/dashboard/related/topology/config/Settings.vue
+++ b/src/views/dashboard/related/topology/config/Settings.vue
@@ -13,17 +13,6 @@ 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. -->
 <template>
-  <div class="mt-20">
-    <h5 class="title">{{ t("metricMode") }}</h5>
-    <el-switch
-      v-model="isExpression"
-      class="mt-5"
-      active-text="Expressions"
-      inactive-text="General"
-      size="small"
-      @change="changeMetricMode"
-    />
-  </div>
  <div class="mb-20">
    <h5 class="title">{{ t("callSettings") }}</h5>
    <div class="label">{{ t("linkDashboard") }}</div>
@@ -38,21 +27,16 @@ limitations under the License. -->
    />
    <div class="label">
      <span>{{ t("linkServerMetrics") }}</span>
-      <el-popover
-        placement="left"
-        :width="400"
-        trigger="click"
-        v-if="isExpression ? states.linkServerExpressions.length : states.linkServerMetrics.length"
-      >
+      <el-popover placement="left" :width="400" trigger="click" v-if="states.linkServerExpressions.length">
        <template #reference>
          <span @click="setConfigType('linkServerMetricConfig')">
            <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
          </span>
        </template>
-        <Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
+        <Metrics :type="configType" @update="updateSettings" />
      </el-popover>
    </div>
-    <div v-if="isExpression">
+    <div>
      <Tags
        :tags="states.linkServerExpressions"
        :vertical="true"
@@ -60,34 +44,19 @@ limitations under the License. -->
        @change="(param: string[]) => changeLinkServerExpressions(param)"
      />
    </div>
-    <Selector
-      v-else
-      class="inputs"
-      :multiple="true"
-      :value="states.linkServerMetrics"
-      :options="states.linkMetricList"
-      size="small"
-      placeholder="Select metrics"
-      @change="updateLinkServerMetrics"
-    />
    <span v-show="dashboardStore.entity !== EntityType[2].value">
      <div class="label">
        <span>{{ t("linkClientMetrics") }}</span>
-        <el-popover
-          placement="left"
-          :width="400"
-          trigger="click"
-          v-if="isExpression ? states.linkClientExpressions.length : states.linkClientMetrics.length"
-        >
+        <el-popover placement="left" :width="400" trigger="click" v-if="states.linkClientExpressions.length">
          <template #reference>
            <span @click="setConfigType('linkClientMetricConfig')">
              <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
            </span>
          </template>
-          <Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
+          <Metrics :type="configType" @update="updateSettings" />
        </el-popover>
      </div>
-      <div v-if="isExpression">
+      <div>
        <Tags
          :tags="states.linkClientExpressions"
          :vertical="true"
@@ -95,16 +64,6 @@ limitations under the License. -->
          @change="(param: string[]) => changeLinkClientExpressions(param)"
        />
      </div>
-      <Selector
-        v-else
-        class="inputs"
-        :multiple="true"
-        :value="states.linkClientMetrics"
-        :options="states.linkMetricList"
-        size="small"
-        placeholder="Select metrics"
-        @change="updateLinkClientMetrics"
-      />
    </span>
  </div>
  <div>
@@ -149,21 +108,16 @@ limitations under the License. -->
    </div>
    <div class="label">
      <span>{{ t("nodeMetrics") }}</span>
-      <el-popover
-        placement="left"
-        :width="400"
-        trigger="click"
-        v-if="isExpression ? states.nodeExpressions.length : states.nodeMetrics.length"
-      >
+      <el-popover placement="left" :width="400" trigger="click" v-if="states.nodeExpressions.length">
        <template #reference>
          <span @click="setConfigType('nodeMetricConfig')">
            <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
          </span>
        </template>
-        <Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
+        <Metrics :type="configType" @update="updateSettings" />
      </el-popover>
    </div>
-    <div v-if="isExpression">
+    <div>
      <Tags
        :tags="states.nodeExpressions"
        :vertical="true"
@@ -171,28 +125,17 @@ limitations under the License. -->
        @change="(param: string[]) => changeNodeExpressions(param)"
      />
    </div>
-    <Selector
-      v-else
-      class="inputs"
-      :multiple="true"
-      :value="states.nodeMetrics"
-      :options="states.nodeMetricList"
-      size="small"
-      placeholder="Select metrics"
-      @change="updateNodeMetrics"
-    />
  </div>
  <div v-show="isService">
    <h5 class="title">{{ t("legendSettings") }}</h5>
-    <span v-if="isExpression">
+    <span>
      <div class="label">Healthy Description</div>
      <el-input v-model="description.healthy" placeholder="Please input description" size="small" class="mt-5" />
    </span>
    <div class="label">
-      <span>{{ t(isExpression ? "unhealthyExpression" : "conditions") }}</span>
+      <span>{{ t("unhealthyExpression") }}</span>
      <el-tooltip
        class="cp"
-        v-if="isExpression"
        content="The node would be red to indicate unhealthy status when the expression return greater than 0"
      >
        <span>
@@ -200,50 +143,9 @@ limitations under the License. -->
        </span>
      </el-tooltip>
    </div>
-    <div v-if="isExpression">
+    <div>
      <el-input v-model="legendMQE.expression" placeholder="Please input a expression" size="small" class="inputs" />
    </div>
-    <div v-for="(metric, index) of legend" :key="index" v-else>
-      <Selector
-        class="item"
-        :value="metric.name"
-        :options="states.nodeMetricList"
-        size="small"
-        placeholder="Select a metric"
-        @change="changeLegend(LegendOpt.NAME, $event, index)"
-      />
-      <Selector
-        class="input-small"
-        :value="metric.condition"
-        :options="MetricConditions"
-        size="small"
-        placeholder="Select a condition"
-        @change="changeLegend(LegendOpt.CONDITION, $event, index)"
-      />
-      <el-input
-        v-model="metric.value"
-        placeholder="Please input a value"
-        type="number"
-        @change="changeLegend(LegendOpt.VALUE, $event, index)"
-        size="small"
-        class="item"
-      />
-      <span>
-        <Icon class="cp delete" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
-        <Icon
-          class="cp"
-          iconName="add_circle_outlinecontrol_point"
-          size="middle"
-          v-show="index === legend.length - 1 && legend.length < 5"
-          @click="addMetric"
-        />
-      </span>
-      <div v-show="index !== legend.length - 1">&&</div>
-    </div>
-    <span v-if="!isExpression">
-      <div class="label">Healthy Description</div>
-      <el-input v-model="description.healthy" placeholder="Please input description" size="small" class="mt-5" />
-    </span>
    <div class="label">Unhealthy Description</div>
    <el-input v-model="description.unhealthy" placeholder="Please input description" size="small" class="mt-5" />
    <el-button @click="setLegend" class="mt-20" size="small" type="primary">
@@ -257,20 +159,9 @@ limitations under the License. -->
  import { useDashboardStore } from "@/store/modules/dashboard";
  import { useTopologyStore } from "@/store/modules/topology";
  import { ElMessage } from "element-plus";
-  import {
-    MetricCatalog,
-    ScopeType,
-    MetricConditions,
-    EntityType,
-    LegendOpt,
-    MetricsType,
-    MetricModes,
-    CallTypes,
-  } from "@/views/dashboard/data";
+  import { ScopeType, EntityType, CallTypes } from "@/views/dashboard/data";
  import type { Option } from "@/types/app";
-  import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
  import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
-  import type { Node } from "@/types/topology";
  import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
  import Metrics from "./Metrics.vue";

@@ -280,7 +171,6 @@ limitations under the License. -->
  const dashboardStore = useDashboardStore();
  const topologyStore = useTopologyStore();
  const { selectedGrid } = dashboardStore;
-  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
  const nodeDashboard =
    selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length ? selectedGrid.nodeDashboard : "";
  const isService = [EntityType[0].value, EntityType[1].value].includes(dashboardStore.entity);
@@ -296,11 +186,6 @@ limitations under the License. -->
      scope: string;
      dashboard: string;
    }[];
-    linkServerMetrics: string[];
-    linkClientMetrics: string[];
-    nodeMetrics: string[];
-    nodeMetricList: Option[];
-    linkMetricList: Option[];
    linkDashboards: (DashboardItem & { label: string; value: string })[];
    nodeDashboards: (DashboardItem & { label: string; value: string })[];
    linkServerExpressions: string[];
@@ -309,27 +194,18 @@ limitations under the License. -->
  }>({
    linkDashboard: selectedGrid.linkDashboard || "",
    nodeDashboard: selectedGrid.nodeDashboard || [],
-    linkServerMetrics: selectedGrid.linkServerMetrics || [],
-    linkClientMetrics: selectedGrid.linkClientMetrics || [],
-    nodeMetrics: selectedGrid.nodeMetrics || [],
-    nodeMetricList: [],
-    linkMetricList: [],
    linkDashboards: [],
    nodeDashboards: [],
    linkServerExpressions: selectedGrid.linkServerExpressions || [],
    linkClientExpressions: selectedGrid.linkClientExpressions || [],
    nodeExpressions: selectedGrid.nodeExpressions || [],
  });
-  const l = selectedGrid.legend && selectedGrid.legend.length;
-  const legend = ref<{ name: string; condition: string; value: string }[]>(
-    l ? selectedGrid.legend : [{ name: "", condition: "", value: "" }],
-  );
  const legendMQE = ref<{ expression: string }>(selectedGrid.legendMQE || { expression: "" });
  const configType = ref<string>("");
  const description = reactive<any>(selectedGrid.description || {});

-  getMetricList();
-  async function getMetricList() {
+  getDashboardList();
+  async function getDashboardList() {
    const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
    const json = await dashboardStore.fetchMetricList();
    if (json.errors) {
@@ -351,13 +227,6 @@ limitations under the License. -->
      },
      [],
    );
-    states.nodeMetricList = (json.data.metrics || []).filter(
-      (d: { type: string }) => d.type === MetricsType.REGULAR_VALUE,
-    );
-    states.linkMetricList = (json.data.metrics || []).filter(
-      (d: { catalog: string; type: string }) =>
-        entity + "Relation" === (MetricCatalog as any)[d.catalog] && d.type === MetricsType.REGULAR_VALUE,
-    );
    if (isService) {
      return;
    }
@@ -373,36 +242,15 @@ limitations under the License. -->
  }
  async function setLegend() {
    updateSettings();
-    if (isExpression.value) {
-      const expression = dashboardStore.selectedGrid.legendMQE && dashboardStore.selectedGrid.legendMQE.expression;
-      if (!expression) {
-        emit("updateNodes");
-        return;
-      }
-      const { getExpressionQuery } = useQueryTopologyExpressionsProcessor([expression], topologyStore.nodes);
-      const param = getExpressionQuery();
-      const res = await topologyStore.getNodeExpressionValue(param);
-      if (res.errors) {
-        ElMessage.error(res.errors);
-      } else {
-        topologyStore.setLegendValues([expression], res.data);
-      }
+    const expression = dashboardStore.selectedGrid.legendMQE && dashboardStore.selectedGrid.legendMQE.expression;
+    const { getExpressionQuery } = useQueryTopologyExpressionsProcessor([expression], topologyStore.nodes);
+    const param = getExpressionQuery();
+    const res = await topologyStore.getNodeExpressionValue(param);
+    if (res.errors) {
+      ElMessage.error(res.errors);
    } else {
-      const names = dashboardStore.selectedGrid.legend.map((d: any) => d.name && d.condition && d.value);
-      if (!names.length) {
-        emit("updateNodes");
-        return;
-      }
-      const ids = topologyStore.nodes.map((d: Node) => d.id);
-      const param = await useQueryTopologyMetrics(names, ids);
-      const res = await topologyStore.getLegendMetrics(param);
-
-      if (res.errors) {
-        ElMessage.error(res.errors);
-      }
+      topologyStore.setLegendValues([expression], res.data);
    }
-
-    emit("updateNodes");
  }
  function changeNodeDashboard(opt: any) {
    states.nodeDashboard = opt[0].value;
@@ -412,9 +260,6 @@ limitations under the License. -->
    states.linkDashboard = opt[0].value;
    updateSettings();
  }
-  function changeLegend(type: string, opt: any, index: number) {
-    (legend.value[index] as any)[type] = opt[0].value || opt;
-  }
  function changeScope(index: number, opt: Option[] | any) {
    items[index].scope = opt[0].value;
    const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
@@ -445,27 +290,15 @@ limitations under the License. -->
    updateSettings();
  }
  function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
-    let metrics = [];
-    if (isExpression.value) {
-      metrics = legend.value.filter((d: any) => d.name);
-    } else {
-      metrics = legend.value.filter((d: any) => d.name && d.value && d.condition);
-    }
-
    const param = {
      ...dashboardStore.selectedGrid,
      linkDashboard: states.linkDashboard,
      nodeDashboard: isService
        ? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
        : states.nodeDashboard,
-      linkServerMetrics: states.linkServerMetrics,
-      linkClientMetrics: states.linkClientMetrics,
-      nodeMetrics: states.nodeMetrics,
      linkServerExpressions: states.linkServerExpressions,
      linkClientExpressions: states.linkClientExpressions,
      nodeExpressions: states.nodeExpressions,
-      metricMode: isExpression.value ? MetricModes.Expression : MetricModes.General,
-      legend: metrics,
      legendMQE: legendMQE.value,
      ...metricConfig,
      description,
@@ -474,30 +307,8 @@ limitations under the License. -->
    dashboardStore.setConfigs(param);
    emit("update", param);
  }
-  function updateLinkServerMetrics(options: Option[] | any) {
-    const opt = options.map((d: Option) => d.value);
-    const index = states.linkServerMetrics.findIndex((d: any) => !opt.includes(d));
-    states.linkServerMetrics = opt;
-    if (index < 0) {
-      changeLinkServerMetrics();
-      return;
-    }
-    const origin = dashboardStore.selectedGrid.linkServerMetricConfig || [];
-    const config = origin.length === 1 ? [] : origin.splice(index, 1);
-    changeLinkServerMetrics({ linkServerMetricConfig: config });
-  }
-  async function changeLinkServerMetrics(config?: { [key: string]: MetricConfigOpt[] }) {
-    updateSettings(config);
-    if (!states.linkServerMetrics.length) {
-      topologyStore.setLinkServerMetrics({});
-      return;
-    }
-    topologyStore.getLinkServerMetrics(states.linkServerMetrics);
-  }
+
  function changeLinkServerExpressions(param: string[]) {
-    if (!isExpression.value) {
-      return;
-    }
    states.linkServerExpressions = param;
    updateSettings();
    if (!states.linkServerExpressions.length) {
@@ -507,9 +318,6 @@ limitations under the License. -->
    topologyStore.getLinkExpressions(states.linkServerExpressions, CallTypes.Server);
  }
  function changeLinkClientExpressions(param: string[]) {
-    if (!isExpression.value) {
-      return;
-    }
    states.linkClientExpressions = param;
    updateSettings();
    if (!states.linkClientExpressions.length) {
@@ -518,63 +326,11 @@ limitations under the License. -->
    }
    topologyStore.getLinkExpressions(states.linkClientExpressions, CallTypes.Client);
  }
-  function updateLinkClientMetrics(options: Option[] | any) {
-    const opt = options.map((d: Option) => d.value);
-    const index = states.linkClientMetrics.findIndex((d: any) => !opt.includes(d));
-    states.linkClientMetrics = opt;
-    if (index < 0) {
-      changeLinkClientMetrics();
-      return;
-    }
-    const origin = dashboardStore.selectedGrid.linkClientMetricConfig || [];
-    const config = origin.length === 1 ? [] : origin.splice(index, 1);
-    changeLinkClientMetrics({ linkClientMetricConfig: config });
-  }
-  async function changeLinkClientMetrics(config?: { [key: string]: MetricConfigOpt[] }) {
-    updateSettings(config);
-    if (!states.linkClientMetrics.length) {
-      topologyStore.setLinkClientMetrics({});
-      return;
-    }
-    topologyStore.getLinkClientMetrics(states.linkClientMetrics);
-  }
-  function updateNodeMetrics(options: Option[] | any) {
-    const opt = options.map((d: Option) => d.value);
-    const index = states.nodeMetrics.findIndex((d: any) => !opt.includes(d));
-    states.nodeMetrics = opt;
-    if (index < 0) {
-      changeNodeMetrics();
-      return;
-    }
-    const origin = dashboardStore.selectedGrid.nodeMetricConfig || [];
-    const config = origin.length === 1 ? [] : origin.splice(index, 1);
-    changeNodeMetrics({ nodeMetricConfig: config });
-  }
-  async function changeNodeMetrics(config?: { [key: string]: MetricConfigOpt[] }) {
-    updateSettings(config);
-    if (!states.nodeMetrics.length) {
-      topologyStore.setNodeMetricValue({});
-      return;
-    }
-    topologyStore.queryNodeMetrics(states.nodeMetrics);
-  }
-  function deleteMetric(index: number) {
-    if (legend.value.length === 1) {
-      legend.value = [{ name: "", condition: "", value: "" }];
-      return;
-    }
-    legend.value.splice(index, 1);
-  }
-  function addMetric() {
-    legend.value.push({ name: "", condition: "", value: "" });
-  }
+
  function setConfigType(type: string) {
    configType.value = type;
  }
  function changeNodeExpressions(param: string[]) {
-    if (!isExpression.value) {
-      return;
-    }
    states.nodeExpressions = param;
    updateSettings();
    if (!states.nodeExpressions.length) {
@@ -583,25 +339,6 @@ limitations under the License. -->
    }
    topologyStore.queryNodeExpressions(states.nodeExpressions);
  }
-  function changeMetricMode() {
-    legend.value = [{ name: "", condition: "", value: "" }];
-    const config = {
-      linkServerMetricConfig: [],
-      linkClientMetricConfig: [],
-      nodeMetricConfig: [],
-    };
-    if (isExpression.value) {
-      states.linkServerMetrics = [];
-      states.linkClientMetrics = [];
-      states.nodeMetrics = [];
-    } else {
-      states.linkServerExpressions = [];
-      states.linkClientExpressions = [];
-      states.nodeExpressions = [];
-    }
-
-    updateSettings(config);
-  }
 </script>
 <style lang="scss" scoped>
  .inputs {
--- a/src/views/dashboard/related/topology/pod/InstanceMap.vue
+++ b/src/views/dashboard/related/topology/pod/InstanceMap.vue
@@ -41,7 +41,6 @@ limitations under the License. -->
  import router from "@/router";
  import { ElMessage } from "element-plus";
  import type { MetricConfigOpt } from "@/types/dashboard";
-  import { aggregation } from "@/hooks/useMetricsProcessor";
  import getDashboard from "@/hooks/useDashboardsSession";
  import Graph from "../components/Graph.vue";

@@ -129,8 +128,8 @@ limitations under the License. -->
          (val: { id: string; value: unknown }) => val.id === data.id,
        ) || {};
      const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      const v = aggregation(metric.value, opt);
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
+
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
    });
    const tipHtml = [
      `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
--- a/src/views/dashboard/related/topology/pod/PodMap.vue
+++ b/src/views/dashboard/related/topology/pod/PodMap.vue
@@ -69,7 +69,7 @@ limitations under the License. -->
  import { useDashboardStore } from "@/store/modules/dashboard";
  import { useSelectorStore } from "@/store/modules/selectors";
  import { useAppStoreWithOut } from "@/store/modules/app";
-  import { EntityType, DepthList, MetricModes, CallTypes } from "@/views/dashboard/data";
+  import { EntityType, DepthList, CallTypes } from "@/views/dashboard/data";
  import { ElMessage } from "element-plus";
  import Sankey from "./Sankey.vue";
  import Settings from "../config/Settings.vue";
@@ -119,15 +119,9 @@ limitations under the License. -->
    };
    height.value = dom.height - 70;
    width.value = dom.width - 5;
-    if (settings.value.metricMode === MetricModes.Expression) {
-      topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []);
-      topologyStore.getLinkExpressions(settings.value.linkClientExpressions || [], CallTypes.Client);
-      topologyStore.getLinkExpressions(settings.value.linkServerExpressions || [], CallTypes.Server);
-    } else {
-      topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
-      topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
-      topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
-    }
+    topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []);
+    topologyStore.getLinkExpressions(settings.value.linkClientExpressions || [], CallTypes.Client);
+    topologyStore.getLinkExpressions(settings.value.linkServerExpressions || [], CallTypes.Server);
  }

  function resize() {
--- a/src/views/dashboard/related/topology/pod/Sankey.vue
+++ b/src/views/dashboard/related/topology/pod/Sankey.vue
@@ -22,8 +22,6 @@ limitations under the License. -->
  import { useTopologyStore } from "@/store/modules/topology";
  import type { Node, Call } from "@/types/topology";
  import type { MetricConfigOpt } from "@/types/dashboard";
-  import { aggregation } from "@/hooks/useMetricsProcessor";
-  import { MetricModes } from "@/views/dashboard/data";
  import { useAppStoreWithOut } from "@/store/modules/app";
  import { Themes } from "@/constants/data";

@@ -85,14 +83,8 @@ limitations under the License. -->
    };
  }
  function linkTooltip(data: Call) {
-    const clientMetrics: string[] =
-      props.settings.metricMode === MetricModes.Expression
-        ? props.settings.linkClientExpressions
-        : props.settings.linkClientMetrics;
-    const serverMetrics: string[] =
-      props.settings.metricMode === MetricModes.Expression
-        ? props.settings.linkServerExpressions
-        : props.settings.linkServerMetrics;
+    const clientMetrics: string[] = props.settings.linkClientExpressions;
+    const serverMetrics: string[] = props.settings.linkServerExpressions;
    const linkServerMetricConfig: MetricConfigOpt[] = props.settings.linkServerMetricConfig || [];
    const linkClientMetricConfig: MetricConfigOpt[] = props.settings.linkClientMetricConfig || [];

@@ -102,8 +94,10 @@ limitations under the License. -->
        {};
      if (metric) {
        const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
-        const v = aggregation(metric.value, opt);
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
+
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
+          opt.unit || ""
+        }</div>`;
      }
    });
    const htmlClient = clientMetrics.map((m, index) => {
@@ -111,8 +105,8 @@ limitations under the License. -->
      const metric =
        topologyStore.linkClientMetrics[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) ||
        {};
-      const v = aggregation(metric.value, opt);
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
+
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
    });
    const html = [
      `<div>${data.sourceObj.serviceName} -> ${data.targetObj.serviceName}</div>`,
@@ -124,17 +118,14 @@ limitations under the License. -->
  }

  function nodeTooltip(data: Node) {
-    const nodeMetrics: string[] =
-      props.settings.metricMode === MetricModes.Expression
-        ? props.settings.nodeExpressions
-        : props.settings.nodeMetrics;
+    const nodeMetrics: string[] = props.settings.nodeExpressions;
    const nodeMetricConfig = props.settings.nodeMetricConfig || [];
    const html = nodeMetrics.map((m, index) => {
      const metric =
        topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) || {};
      const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      const v = aggregation(metric.value, opt);
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
+
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
    });
    return [` <div><span>name: </span>${data.serviceName}</div>`, ...html].join(" ");
  }
--- a/src/views/dashboard/related/topology/service/HierarchyMap.vue
+++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue
@@ -43,7 +43,6 @@ limitations under the License. -->
  import router from "@/router";
  import { ElMessage } from "element-plus";
  import type { MetricConfigOpt } from "@/types/dashboard";
-  import { aggregation } from "@/hooks/useMetricsProcessor";
  import getDashboard from "@/hooks/useDashboardsSession";
  import Graph from "../components/Graph.vue";

@@ -137,8 +136,7 @@ limitations under the License. -->
          (val: { id: string; value: unknown }) => val.id === data.id,
        ) || {};
      const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      const v = aggregation(metric.value, opt);
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
    });
    const tipHtml = [
      `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
--- a/src/views/dashboard/related/topology/service/ServiceMap.vue
+++ b/src/views/dashboard/related/topology/service/ServiceMap.vue
@@ -144,7 +144,7 @@ limitations under the License. -->
  import { useSelectorStore } from "@/store/modules/selectors";
  import { useTopologyStore } from "@/store/modules/topology";
  import { useDashboardStore } from "@/store/modules/dashboard";
-  import { EntityType, DepthList, MetricModes, CallTypes } from "@/views/dashboard/data";
+  import { EntityType, DepthList, CallTypes } from "@/views/dashboard/data";
  import router from "@/router";
  import { ElMessage } from "element-plus";
  import Settings from "../config/Settings.vue";
@@ -154,9 +154,7 @@ limitations under the License. -->
  import { useAppStoreWithOut } from "@/store/modules/app";
  import getDashboard from "@/hooks/useDashboardsSession";
  import type { MetricConfigOpt } from "@/types/dashboard";
-  import { aggregation } from "@/hooks/useMetricsProcessor";
  import icons from "@/assets/img/icons";
-  import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
  import { layout, computeLevels, changeNode } from "../components/utils/layout";
  import zoom from "@/views/dashboard/related/components/utils/zoom";
  import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
@@ -231,15 +229,9 @@ limitations under the License. -->
  }

  async function update() {
-    if (settings.value.metricMode === MetricModes.Expression) {
-      topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []);
-      topologyStore.getLinkExpressions(settings.value.linkClientExpressions || [], CallTypes.Client);
-      topologyStore.getLinkExpressions(settings.value.linkServerExpressions || [], CallTypes.Server);
-    } else {
-      topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
-      topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
-      topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
-    }
+    topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []);
+    topologyStore.getLinkExpressions(settings.value.linkClientExpressions || [], CallTypes.Client);
+    topologyStore.getLinkExpressions(settings.value.linkServerExpressions || [], CallTypes.Server);

    window.addEventListener("resize", resize);
    await initLegendMetrics();
@@ -288,67 +280,33 @@ limitations under the License. -->
    if (!topologyStore.nodes.length) {
      return;
    }
-    if (settings.value.metricMode === MetricModes.Expression) {
-      const expression = props.config.legendMQE && props.config.legendMQE.expression;
-      if (!expression) {
-        return;
-      }
-      const { getExpressionQuery } = useQueryTopologyExpressionsProcessor([expression], topologyStore.nodes);
-      const param = getExpressionQuery();
-      const res = await topologyStore.getNodeExpressionValue(param);
-      if (res.errors) {
-        ElMessage.error(res.errors);
-      } else {
-        topologyStore.setLegendValues([expression], res.data);
-      }
+
+    const expression = props.config.legendMQE && props.config.legendMQE.expression;
+    if (!expression) {
+      return;
+    }
+    const { getExpressionQuery } = useQueryTopologyExpressionsProcessor([expression], topologyStore.nodes);
+    const param = getExpressionQuery();
+    const res = await topologyStore.getNodeExpressionValue(param);
+    if (res.errors) {
+      ElMessage.error(res.errors);
    } else {
-      const names = props.config.legend.map((d: any) => d.name);
-      if (!names.length) {
-        return;
-      }
-      const ids = topologyStore.nodes.map((d: Node) => d.id);
-      if (ids.length) {
-        const param = await useQueryTopologyMetrics(names, ids);
-        const res = await topologyStore.getLegendMetrics(param);
-        if (res.errors) {
-          ElMessage.error(res.errors);
-        }
-      }
+      topologyStore.setLegendValues([expression], res.data);
    }
  }

  function getNodeStatus(d: any) {
-    const { legend, legendMQE } = settings.value;
-    if (settings.value.metricMode === MetricModes.Expression) {
-      if (!legendMQE) {
-        return icons.CUBE;
-      }
-      if (!legendMQE.expression) {
-        return icons.CUBE;
-      }
-      return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE;
-    }
-    if (!legend) {
+    const { legendMQE } = settings.value;
+    if (!legendMQE) {
      return icons.CUBE;
    }
-    if (!legend.length) {
+    if (!legendMQE.expression) {
      return icons.CUBE;
    }
-    let c = true;
-    for (const l of legend) {
-      if (l.condition === "<") {
-        c = c && d[l.name] < Number(l.value);
-      } else {
-        c = c && d[l.name] > Number(l.value);
-      }
-    }
-    return c && d.isReal ? icons.CUBEERROR : icons.CUBE;
+    return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE;
  }
  function showNodeTip(event: MouseEvent, data: Node) {
-    const nodeMetrics: string[] =
-      (settings.value.metricMode === MetricModes.Expression
-        ? settings.value.nodeExpressions
-        : settings.value.nodeMetrics) || [];
+    const nodeMetrics: string[] = settings.value.nodeExpressions || [];
    const nodeMetricConfig = settings.value.nodeMetricConfig || [];
    const html = nodeMetrics.map((m, index) => {
      const metric =
@@ -356,8 +314,9 @@ limitations under the License. -->
          topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id)) ||
        {};
      const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      const v = aggregation(metric.value, opt);
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || "unknown"}</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
+        opt.unit || "unknown"
+      }</div>`;
    });
    const tipHtml = [
      `<div class="mb-5"><span class="grey">name: </span>${
@@ -373,24 +332,19 @@ limitations under the License. -->
      .html(tipHtml);
  }
  function showLinkTip(event: MouseEvent, data: Call) {
-    const linkClientMetrics: string[] =
-      settings.value.metricMode === MetricModes.Expression
-        ? settings.value.linkClientExpressions
-        : settings.value.linkClientMetrics || [];
+    const linkClientMetrics: string[] = settings.value.linkClientExpressions || [];
    const linkServerMetricConfig: MetricConfigOpt[] = settings.value.linkServerMetricConfig || [];
    const linkClientMetricConfig: MetricConfigOpt[] = settings.value.linkClientMetricConfig || [];
-    const linkServerMetrics: string[] =
-      settings.value.metricMode === MetricModes.Expression
-        ? settings.value.linkServerExpressions
-        : settings.value.linkServerMetrics || [];
+    const linkServerMetrics: string[] = settings.value.linkServerExpressions || [];
    const htmlServer = linkServerMetrics.map((m, index) => {
      const metric = topologyStore.linkServerMetrics[m].values.find(
        (val: { id: string; value: unknown }) => val.id === data.id,
      );
      if (metric) {
        const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
-        const v = aggregation(metric.value, opt);
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
+          opt.unit || ""
+        }</div>`;
      }
    });
    const htmlClient = linkClientMetrics.map((m: string, index: number) => {
@@ -399,8 +353,9 @@ limitations under the License. -->
        (val: { id: string; value: unknown }) => val.id === data.id,
      );
      if (metric) {
-        const v = aggregation(metric.value, opt);
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
+          opt.unit || ""
+        }</div>`;
      }
    });
    const html = [