fix(): always degrade for complex data

easyops-cn · Jul 18, 2024 · cc40486 · cc40486
1 parent 4141291
commit cc40486
Show file tree

Hide file tree

Showing 5 changed files with 852 additions and 2,395 deletions.
diff --git a/bricks/visual-builder/docs/raw-data-preview.md b/bricks/visual-builder/docs/raw-data-preview.md
@@ -5,52 +5,75 @@
 ### Basic
 
 ```yaml preview
-brick: visual-builder.raw-data-preview
-properties:
-  previewUrl: /preview/
-  theme: <% THEME.getTheme() %>
-  uiVersion: "8.2"
-  generations: <% CTX.generations ?? [] %>
-  style:
-    height: calc(100vh - 4em)
-context:
-  - name: hostList
-    resolve:
-      useProvider: basic.http-request
+- brick: eo-tab-list
+  properties:
+    tabs: <% CTX.tabs %>
+    activePanel: <% CTX.modelId %>
+  events:
+    tab.select:
+      action: context.replace
       args:
-        - /preview/bricks/visual-builder/dist/fixtures/host-list.json?v=1
-  - name: appList
-    resolve:
-      useProvider: basic.http-request
-      args:
-        - /preview/bricks/visual-builder/dist/fixtures/app-list.json
-  - name: serviceList
-    resolve:
-      useProvider: basic.http-request
-      args:
-        - /preview/bricks/visual-builder/dist/fixtures/service-list.json
-  - name: rawGenerations
-    resolve:
-      useProvider: basic.http-request
-      args:
-        - /preview/bricks/visual-builder/dist/fixtures/raw-generations.json?v=4
-  - name: generations
-    value: |
-      <%
-        CTX.rawGenerations.map((g) => ({
-          ..._.pick(g, [
-            "objectId",
-            "objectName",
-            "propertyId",
-            "propertyName",
-          ]),
-          candidates: g.json,
-          mockData:
-            g.objectId === "HOST"
-              ? CTX.hostList
-              : g.objectId === "APP"
-              ? CTX.appList
-              : CTX.serviceList
-        })).filter((g) => g.candidates)
-      %>
+        - modelId
+        - <% EVENT.detail %>
+  context:
+    - name: modelId
+      value: HOST
+    - name: tabs
+      value:
+        - text: 主机
+          panel: HOST
+        - text: 应用
+          panel: APP
+        - text: 服务
+          panel: SERVICE@ONEMODEL
+    - name: hostList
+      resolve:
+        useProvider: basic.http-request
+        args:
+          - /preview/bricks/visual-builder/dist/fixtures/host-list.json?v=1
+    - name: appList
+      resolve:
+        useProvider: basic.http-request
+        args:
+          - /preview/bricks/visual-builder/dist/fixtures/app-list.json
+    - name: serviceList
+      resolve:
+        useProvider: basic.http-request
+        args:
+          - /preview/bricks/visual-builder/dist/fixtures/service-list.json
+    - name: rawGenerations
+      resolve:
+        useProvider: basic.http-request
+        args:
+          - /preview/bricks/visual-builder/dist/fixtures/raw-generations.json?v=5
+    - name: generations
+      track: true
+      value: |
+        <%
+          CTX.rawGenerations
+            .filter((g) => g.objectId === CTX.modelId)
+            .map((g) => ({
+            ..._.pick(g, [
+              "objectId",
+              "objectName",
+              "propertyId",
+              "propertyName",
+            ]),
+            candidates: g.json,
+            mockData:
+              g.objectId === "HOST"
+                ? CTX.hostList
+                : g.objectId === "APP"
+                ? CTX.appList
+                : CTX.serviceList
+          })).filter((g) => g.candidates)
+        %>
+- brick: visual-builder.raw-data-preview
+  properties:
+    previewUrl: /preview/
+    theme: <% THEME.getTheme() %>
+    uiVersion: "8.2"
+    generations: <%= CTX.generations ?? [] %>
+    style:
+      height: calc(100vh - 4em - 72px)
 ```
diff --git a/bricks/visual-builder/src/raw-data-preview/convert.ts b/bricks/visual-builder/src/raw-data-preview/convert.ts
@@ -1,7 +1,6 @@
 import type { BrickConf } from "@next-core/types";
 import { pick } from "lodash";
 import type { CSSProperties } from "react";
-import { isEvaluable } from "@next-core/cook";
 import type { VisualConfig, VisualStyle } from "./raw-data-interfaces";
 
 const ATTR_NAME_REGEX = /^[a-zA-Z_]\w+$/;
@@ -17,41 +16,41 @@ export function convertToStoryboard(
   const baseValue = `<% DATA.${attr} %>`;
 
   switch (config.display) {
+    case "link":
     case "text": {
-      const brickItem = getPlainBrick(config, attr, baseValue);
+      let brickItem = getPlainBrick(config, attr, baseValue);
+      if (config.display === "link") {
+        brickItem = {
+          brick: "eo-link",
+          errorBoundary: true,
+          children: [brickItem],
+        };
+      }
       const maxItems = Number(config.maxItems) || 3;
-      if (config.type === "struct-list" || config.type === "array") {
+      if (config.type === "struct-list") {
         if (config.countOnly) {
-          return {
-            brick: "span",
-            properties: {
-              textContent: `<% \`\${DATA.${attr}.length}\` %>`,
-            },
-          };
+          return brickItem;
         }
         return {
           brick: "span",
+          properties: {
+            style: {
+              display: "inline-flex",
+              gap: "0.25em",
+            },
+          },
           children: [
             {
               brick: ":forEach",
               errorBoundary: true,
               dataSource: `<% DATA.${attr}.slice(0, ${maxItems}) %>`,
-              children: [
-                {
-                  brick: "span",
-                  if: "<% INDEX > 0 %>",
-                  properties: {
-                    textContent: ", ",
-                  },
-                },
-                brickItem,
-              ],
+              children: [brickItem],
             },
             {
-              brick: "span",
+              brick: "eo-link",
               if: `<% DATA.${attr}.length > ${maxItems} %>`,
               properties: {
-                textContent: `<% \`等共 \${DATA.${attr}.length} 项\` %>`,
+                textContent: `<% \`+ \${DATA.${attr}.length - ${maxItems}} 项\` %>`,
               },
             },
           ],
@@ -75,72 +74,6 @@ export function convertToStoryboard(
         },
       };
     }
-    case "detail":
-      return {
-        brick: "eo-descriptions",
-        errorBoundary: true,
-        properties: {
-          dataSource: baseValue,
-          column: 1,
-          list: config.fields?.map((field) => ({
-            label: field.title,
-            field: field.dataIndex,
-          })),
-        },
-      };
-    case "table":
-      if (config.type !== "struct-list") {
-        return null;
-      }
-      return {
-        brick: "eo-next-table",
-        errorBoundary: true,
-        properties: {
-          dataSource: `<% { list: DATA.${attr} } %>`,
-          pagination: false,
-          columns: config.columns?.slice(0, 5).map((column) => ({
-            title: column.title,
-            dataIndex: column.dataIndex,
-          })),
-        },
-      };
-    case "card-list": {
-      if (config.type !== "struct-list") {
-        return null;
-      }
-      const titleKey = config.keys?.title ?? "name";
-      const descKey = config.keys?.description ?? "description";
-      return {
-        brick: "div",
-        properties: {
-          style: {
-            display: "flex",
-            flexWrap: "wrap",
-            gap: "var(--page-card-gap)",
-          },
-        },
-        children: [
-          {
-            brick: ":forEach",
-            errorBoundary: true,
-            dataSource: baseValue,
-            children: [
-              {
-                brick: "eo-card-item",
-                properties: {
-                  cardTitle: isEvaluable(titleKey)
-                    ? titleKey
-                    : `<% ITEM[${JSON.stringify(titleKey)}] %>`,
-                  description: isEvaluable(descKey)
-                    ? descKey
-                    : `<% ITEM[${JSON.stringify(config.keys?.description ?? "description")}] %>`,
-                },
-              },
-            ],
-          },
-        ],
-      };
-    }
     default:
       return null;
   }
@@ -151,10 +84,17 @@ function getPlainBrick(
   attr: string,
   baseValue: string
 ): BrickConf {
+  if (config.type === "struct-list" && config.countOnly) {
+    return {
+      brick: "span",
+      properties: {
+        textContent: `<% \`\${DATA.${attr}.length}\` %>`,
+      },
+    };
+  }
+
   const value =
-    (config.type === "struct" ||
-      config.type === "struct-list" ||
-      config.type === "array") &&
+    (config.type === "struct" || config.type === "struct-list") &&
     config.mainField
       ? `<% ${config.type === "struct" ? `DATA[${JSON.stringify(attr)}]` : "ITEM"}[${JSON.stringify(config.mainField)}] %>`
       : baseValue;
@@ -214,8 +154,8 @@ function getTagSize(size: VisualStyle["size"]): string | undefined {
       return size;
     case "x-large":
       return "large";
-    case "x-small":
-      return "xs";
+    // case "x-small":
+    //   return "xs";
   }
 }
 
@@ -227,7 +167,7 @@ function getPlainStyle(
   }
   const style: CSSProperties = {};
   switch (configStyle.size) {
-    case "x-small":
+    // case "x-small":
     case "small":
       style.fontSize = "var(--sub-title-font-size-small)";
       break;