From 14d7b5d28dc1e6c393ddbb89af8f4a149ad7131b Mon Sep 17 00:00:00 2001
From: annzhang <annzhang@easyops.cn>
Date: Mon, 7 Aug 2023 15:17:49 +0800
Subject: [PATCH] =?UTF-8?q?fix(prestational-bricks):=20=E8=AD=A6=E5=91=8A?=
 =?UTF-8?q?=E6=9E=84=E4=BB=B6=E5=B1=95=E5=BC=80=E6=8A=98=E5=8F=A0=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=94=AF=E6=8C=81=E5=8F=A6=E8=B5=B7=E4=B8=80=E8=A1=8C?=
 =?UTF-8?q?=20Refs=20NEXT=5FBUILDER-3808?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/brick-alert/BrickAlert.tsx            |  12 +-
 .../stories/chapters/brick-alert.ts           | 192 ++++++++++++++++++
 2 files changed, 200 insertions(+), 4 deletions(-)

diff --git a/bricks/presentational-bricks/src/brick-alert/BrickAlert.tsx b/bricks/presentational-bricks/src/brick-alert/BrickAlert.tsx
index c07264598..4a302bf68 100644
--- a/bricks/presentational-bricks/src/brick-alert/BrickAlert.tsx
+++ b/bricks/presentational-bricks/src/brick-alert/BrickAlert.tsx
@@ -67,11 +67,15 @@ export function BrickAlert(props: BrickAlertProps): React.ReactElement {
           >
             <span style={{ ...props.messageStyle }}>
               {props.foldDescLabel ?? "故障排查"}
+              <UpOutlined
+                rotate={show ? 0 : 180}
+                style={{
+                  marginLeft: "4px",
+                  lineHeight: "0px",
+                  fontSize: "12px",
+                }}
+              />
             </span>
-            <UpOutlined
-              rotate={show ? 0 : 180}
-              style={{ marginLeft: "4px", lineHeight: "0px", fontSize: "12px" }}
-            />
           </span>
         </>
       ) : (
diff --git a/bricks/presentational-bricks/stories/chapters/brick-alert.ts b/bricks/presentational-bricks/stories/chapters/brick-alert.ts
index b8a7d5fe5..00406787b 100644
--- a/bricks/presentational-bricks/stories/chapters/brick-alert.ts
+++ b/bricks/presentational-bricks/stories/chapters/brick-alert.ts
@@ -654,6 +654,198 @@ export const BrickAlertStory: Story = {
         },
       },
     },
+    {
+      description: {
+        title: "折叠按钮换行展示",
+        message: "配置messageStyle，使折叠按钮换行展示",
+      },
+      brick: "presentational-bricks.brick-alert",
+      properties: {
+        id: "pseudoSlot",
+        type: "info",
+        message: "这是一段通知信息的标题",
+        messageStyle: {
+          fontSize: "14px",
+          display: "block",
+          marginTop: "-20px",
+        },
+        showIcon: true,
+        enableDescSlot: true,
+        enableMessageSlot: true,
+        iconSize: "small",
+        foldDesc: true,
+      },
+      slots: {
+        message: {
+          bricks: [
+            {
+              brick: "span",
+              slots: {
+                "": {
+                  bricks: [
+                    {
+                      brick: "span",
+                      properties: {
+                        textContent:
+                          "展示当前运行的采集实例。因为采集范围是动态的，可能与预期不符，请等待最长10分钟后查看，你也可以点击",
+                      },
+                    },
+                    {
+                      brick: "presentational-bricks.brick-link",
+                      events: {
+                        "link.click": {
+                          action: "console.log",
+                        },
+                      },
+                      properties: {
+                        style: {
+                          padding: "0 3px",
+                          position: "relative",
+                          bottom: "1px",
+                        },
+                        label: "立即同步",
+                      },
+                    },
+                    {
+                      brick: "span",
+                      properties: {
+                        textContent:
+                          "。如果发现有采集实例，但没数据上报，请点击查看",
+                      },
+                    },
+                  ],
+                  type: "bricks",
+                },
+              },
+            },
+          ],
+          type: "bricks",
+        },
+        description: {
+          type: "bricks",
+          bricks: [
+            {
+              brick: "div",
+              slots: {
+                "": {
+                  type: "bricks",
+                  bricks: [
+                    {
+                      brick: "span",
+                      properties: {
+                        style: {
+                          fontWeight: 500,
+                        },
+                        textContent: '1、采集状态为"失败"：',
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              brick: "div",
+              slots: {
+                "": {
+                  type: "bricks",
+                  bricks: [
+                    {
+                      brick: "span",
+                      properties: {
+                        style: {
+                          paddingLeft: "2em",
+                        },
+                        textContent:
+                          "﹣ 如果报错信息为get metric none，strategy:5ab3beb512b40，instance:5a14561111841，该instance是指主机的instanceid，请升级该主机Agent至3.24.14以上，且agent有与服务端8823端口的长链接",
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              brick: "div",
+              slots: {
+                "": {
+                  type: "bricks",
+                  bricks: [
+                    {
+                      brick: "span",
+                      properties: {
+                        style: {
+                          paddingLeft: "2em",
+                        },
+                        textContent:
+                          "﹣ 如果报错信息为get metric error，session timeout，请确认对应的agent升级到3.24.10以上，且agent有与服务端8823端口的长链接",
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              brick: "div",
+              slots: {
+                "": {
+                  type: "bricks",
+                  bricks: [
+                    {
+                      brick: "span",
+                      properties: {
+                        style: {
+                          paddingLeft: "2em",
+                        },
+                        textContent:
+                          "﹣ 如果是Prometheus插件，报错信息为connection refused，请确保exporter启动正常或可尝试手动curl对应的metrics接口",
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              brick: "div",
+              slots: {
+                "": {
+                  type: "bricks",
+                  bricks: [
+                    {
+                      brick: "span",
+                      properties: {
+                        style: {
+                          fontWeight: 500,
+                        },
+                        textContent:
+                          '2、如果采集状态为"正常"，那说明采集通道是正常的，是数据处理层的问题，可查看clickhouse或flink_taskmanager/log/monitor.log查看日志',
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              brick: "div",
+              slots: {
+                "": {
+                  type: "bricks",
+                  bricks: [
+                    {
+                      brick: "span",
+                      properties: {
+                        style: {
+                          fontWeight: 500,
+                        },
+                        textContent: "3、如果还有问题，请咨询技术人员。",
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
   ],
   previewColumns: 2,
 };