Merge pull request #259 from easyops-cn/steve/ai-portal-730

weareoutman · web-flow · commit 87b6a6c76514 · 2025-07-29T12:24:57.000+08:00
fix(): support dashboard comparison
diff --git a/bricks/ai-portal/src/cruise-canvas/NodeView/NodeView.tsx b/bricks/ai-portal/src/cruise-canvas/NodeView/NodeView.tsx
@@ -90,7 +90,10 @@ export function NodeView({ job, active }: NodeViewProps): JSX.Element {
       }
       if (component.componentName === "dashboard") {
         const widgets = component?.properties?.widgets;
-        if (Array.isArray(widgets) && widgets.length >= 7) {
+        if (
+          Array.isArray(widgets) &&
+          widgets.length >= (component.properties!.groupField ? 3 : 7)
+        ) {
           return true;
         }
       }
diff --git a/bricks/ai-portal/src/cruise-canvas/utils/converters/convertDashboard.ts b/bricks/ai-portal/src/cruise-canvas/utils/converters/convertDashboard.ts
@@ -55,14 +55,23 @@ export default async function convertDashboard(
   view: ViewWithInfo,
   options: ConvertViewOptions
 ): Promise<BrickConf> {
-  const { dataSource, widgets } = properties as {
+  const {
+    dataSource,
+    groupField: _groupField,
+    widgets,
+  } = properties as {
     dataSource: string;
+    groupField?: string;
     widgets: Array<Widget>;
   };
 
+  const groupField = _groupField ? "#showKey" : undefined;
+
   const { isString, expression, usedContexts } = parseDataSource(dataSource);
 
-  const chartData = isString ? `<%= (${expression}).list %>` : dataSource;
+  const chartData = isString
+    ? `<%= CTX.__builtin_fn_extractList((${expression})) %>`
+    : dataSource;
 
   if (options.expanded) {
     let mergedWidgets = widgets as MergedWidget[];
@@ -116,7 +125,8 @@ export default async function convertDashboard(
       },
       children: mergedWidgets.map((widget) => {
         const { title, /* type, */ metric, size, precision, min, max } = widget;
-        const colorCount = widget.relevantMetrics?.length ?? 1;
+        const colorCount =
+          widget.relevantMetrics?.length ?? (groupField ? 2 : 1);
         const colors = Array.from(
           { length: colorCount },
           (_, i) => COLORS[(colorCursor + i) % COLORS.length]
@@ -128,7 +138,19 @@ export default async function convertDashboard(
           properties: {
             data: chartData,
             xField: "time",
-            yFields: widget.relevantMetrics ?? [metric.id],
+            ...(widget.relevantMetrics
+              ? {
+                  // yFields: widget.relevantMetrics,
+                  yFields: `<% CTX.__builtin_fn_getMetricDisplayNames((${expression}).displayNameList, ${JSON.stringify(
+                    widget.relevantMetrics
+                  )}) %>`,
+                }
+              : {
+                  // yField: metric.id,
+                  yField: `<% CTX.__builtin_fn_getMetricDisplayNames((${expression}).displayNameList, [${JSON.stringify(
+                    metric.id
+                  )}])[0] %>`,
+                }),
             ...(widget.counterMetric
               ? {
                   forceAbsoluteNumbers: true,
@@ -141,7 +163,7 @@ export default async function convertDashboard(
               : null),
             height: size === "large" ? 230 : 200,
             timeFormat: "HH:mm",
-            ...(widget.relevantMetrics
+            ...(widget.relevantMetrics || groupField
               ? null
               : {
                   areaOptions: {
@@ -164,8 +186,9 @@ export default async function convertDashboard(
                 shape: "smooth",
               },
             },
+            groupField,
             areaShape: "smooth",
-            legends: size === "large",
+            legends: !!(widget.relevantMetrics || groupField),
             colors: colors,
             tooltip: {
               marker: {
@@ -221,18 +244,82 @@ export default async function convertDashboard(
     };
   }
 
+  if (groupField) {
+    return {
+      brick: "div",
+      properties: {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+        },
+      },
+      children: [
+        {
+          brick: ":forEach",
+          dataSource: `<%= CTX.__builtin_fn_groupMetricData(CTX.__builtin_fn_extractList((${expression})), ${JSON.stringify(groupField)}) %>`,
+          children: [
+            {
+              brick: "div",
+              properties: {
+                textContent: "<% `${ITEM.group}:` %>",
+                style: {
+                  fontWeight: "500",
+                },
+              },
+            },
+            {
+              brick: "div",
+              properties: {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(auto-fill, minmax(205px, 1fr))",
+                  gap: "10px",
+                  marginBottom: "8px",
+                },
+              },
+              children: widgets.map((widget, i) => {
+                const { title, type, metric, precision } = widget;
+                return {
+                  brick: "ai-portal.stat-with-mini-chart",
+                  properties: {
+                    size: "small",
+                    label: title || metric.id,
+                    data: "<% ITEM.list %>",
+                    xField: "time",
+                    yField: metric.id,
+                    lineColor: COLORS[i % COLORS.length],
+                    ...(metric.unit === "percent(1)"
+                      ? { min: 0, max: 1, showArea: true }
+                      : metric.unit === "percent(100)" || metric.unit === "%"
+                        ? { min: 0, max: 100, showArea: true }
+                        : { showArea: type === "area" }),
+                    value: `<%= CTX.__builtin_fn_getLatestMetricValue(ITEM.list, ${JSON.stringify(
+                      {
+                        metric,
+                        precision,
+                      }
+                    )}) %>`,
+                  },
+                };
+              }),
+            },
+          ],
+        },
+      ],
+    };
+  }
+
   return {
     brick: "div",
     properties: {
       style: {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, minmax(205px, 1fr))",
         gap: "10px",
-        // gridTemplateColumns: "repeat(auto-fill, minmax(375px, 1fr))",
-        // gap: "12px",
       },
     },
-    children: widgets.map((widget) => {
+    children: widgets.map((widget, i) => {
       const { title, type, metric, precision } = widget;
       return {
         brick: "ai-portal.stat-with-mini-chart",
@@ -242,14 +329,16 @@ export default async function convertDashboard(
           data: chartData,
           xField: "time",
           yField: metric.id,
-          lineColor: "#295DFF",
+          lineColor: COLORS[i % COLORS.length],
           ...(metric.unit === "percent(1)"
             ? { min: 0, max: 1, showArea: true }
             : metric.unit === "percent(100)" || metric.unit === "%"
               ? { min: 0, max: 100, showArea: true }
               : { showArea: type === "area" }),
           value: `<%= CTX.__builtin_fn_getLatestMetricValue((${
-            isString ? expression : JSON.stringify(dataSource ?? null)
+            isString
+              ? `CTX.__builtin_fn_extractList((${expression}))`
+              : JSON.stringify(dataSource ?? null)
           }), ${JSON.stringify({
             metric,
             precision,
diff --git a/bricks/ai-portal/src/cruise-canvas/utils/converters/convertView.ts b/bricks/ai-portal/src/cruise-canvas/utils/converters/convertView.ts
@@ -120,21 +120,67 @@ export async function convertView(
     {
       name: "__builtin_fn_getLatestMetricValue",
       value: function getLatestMetricValue(
-        data: {
-          list?: Record<string, any>[];
-        },
+        list: Record<string, any>[] | undefined,
         {
           metric,
           precision,
         }: { metric: { id: string; unit: string }; precision?: number }
       ) {
-        const value = data?.list?.findLast?.(
-          (item) => item[metric.id] != null
-        )?.[metric.id];
+        const value = list?.findLast?.((item) => item[metric.id] != null)?.[
+          metric.id
+        ];
         const unit = metric.unit === "load" ? "" : metric.unit;
         return pipes.unitFormat(value, unit, precision).join("");
       },
     },
+    {
+      name: "__builtin_fn_extractList",
+      value: function extractList<T = unknown>(data: T[] | { list: T[] }): T[] {
+        if (Array.isArray(data)) {
+          return data;
+        }
+        return data?.list;
+      },
+    },
+    {
+      name: "__builtin_fn_groupMetricData",
+      value: function groupMetricData(
+        list: Record<string, any>[],
+        groupField: string
+      ) {
+        if (!list || !Array.isArray(list) || list.length === 0) {
+          return [];
+        }
+        const grouped = new Map<
+          string,
+          { group: string; list: Record<string, any>[] }
+        >();
+        for (const item of list) {
+          const key = item[groupField];
+          let groupedList = grouped.get(key);
+          if (!groupedList) {
+            grouped.set(key, (groupedList = { group: key, list: [] }));
+          }
+          groupedList.list.push(item);
+        }
+        return Array.from(grouped.values());
+      },
+    },
+    {
+      name: "__builtin_fn_getMetricDisplayNames",
+      value: function getMetricDisplayNames(
+        displayNameList:
+          | { metric_name: string; metric_display_name: string }[]
+          | undefined,
+        metricNames: string[]
+      ): string[] {
+        return metricNames.map(
+          (metricName) =>
+            displayNameList?.find((item) => item.metric_name === metricName)
+              ?.metric_display_name ?? metricName
+        );
+      },
+    },
     {
       name: "SIZE",
       value: options.expanded ? "medium" : "small",
@@ -162,9 +208,20 @@ function convertDataSourcesToContext(dataSources: DataSource[]): ContextConf[] {
     resolve: {
       useProvider: `${dataSource.api.name}:${dataSource.api.version}`,
       params: dataSource.params,
-      ...(dataSource.transform
-        ? { transform: { value: dataSource.transform } }
-        : null),
+      ...(dataSource.api.name === "easyops.api.data_exchange.olap@Query"
+        ? {
+            params: {
+              ...dataSource.params,
+              translate: ["#showKey"],
+              limit: undefined,
+              limitBy: undefined,
+              order: undefined,
+              displayName: true,
+            },
+          }
+        : dataSource.transform
+          ? { transform: { value: dataSource.transform } }
+          : null),
     },
     track: true,
   }));

Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,10 @@ export function NodeView({ job, active }: NodeViewProps): JSX.Element {`
`90`	`90`	`}`
`91`	`91`	`if (component.componentName === "dashboard") {`
`92`	`92`	`const widgets = component?.properties?.widgets;`
`93`		`- if (Array.isArray(widgets) && widgets.length >= 7) {`
	`93`	`+ if (`
	`94`	`+ Array.isArray(widgets) &&`
	`95`	`+ widgets.length >= (component.properties!.groupField ? 3 : 7)`
	`96`	`+ ) {`
`94`	`97`	`return true;`
`95`	`98`	`}`
`96`	`99`	`}`