feat: add expressions in independent widget page

src/views/dashboard/Widget.vue

@@ -55,9 +55,11 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
+  import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor";
   import graphs from "./graphs";
   import { EntityType } from "./data";
   import timeFormat from "@/utils/timeFormat";
+  import { MetricModes } from "./data";
 
   export default defineComponent({
     name: "WidgetPage",
@@ -125,7 +127,12 @@ limitations under the License. -->
         }
       }
       async function queryMetrics() {
-        const params = await useQueryProcessor({ ...config.value });
+        const isExpression = config.value.metricMode === MetricModes.Expression;
+        const params = isExpression
+          ? await useExpressionsQueryProcessor({
+              ...config.value,
+            })
+          : await useQueryProcessor({ ...config.value });
         if (!params) {
           source.value = {};
           return;
@@ -141,7 +148,7 @@ limitations under the License. -->
           metricTypes: config.value.metricTypes || [],
           metricConfig: config.value.metricConfig || [],
         };
-        source.value = useSourceProcessor(json, d);
+        source.value = isExpression ? await useExpressionsSourceProcessor(json, d) : await useSourceProcessor(json, d);
       }
       watch(
         () => appStoreWithOut.durationTime,

src/views/dashboard/components/WidgetLink.vue

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

src/views/dashboard/graphs/ServiceList.vue

@@ -127,6 +127,7 @@ limitations under the License. -->
   queryServices();
 
   async function queryServices() {
+    console.log(props.config);
     chartLoading.value = true;
     const resp = await selectorStore.fetchServices(dashboardStore.layerId);