告警草稿 Storybook
告警以吸引用户注意力的方式显示重要消息，而不会中断他们的任务。
行为
| 类型 | 目的 |
|---|---|
| 持久性 | 它们通常是紧急且具有侵扰性的，需要立即关注并需要执行操作才能关闭。 |
| 被动性 | 用于提供信息，报告不需要用户采取任何操作的系统问题。 |
类型
在 Grafana 中，我们有三种不同类型的告警，可以根据上下文和内容使用它们。
| 类型 | 目的 | 行为 |
|---|---|---|
| 内联 | 用于通知用户操作的状态。它们出现在主内容区域的顶部或底部。 | 被动或持久 |
| Toast | 这些临时窗口元素用于显示短消息；它们出现在屏幕的右上角，可以通过点击 [x] 关闭或在几秒后消失。 | 被动性 |
| 横幅 | 它会一直存在，直到用户驳回它或触发横幅的状态得到解决。 | 持久性 |
消息类型
| 状态 | 用途 | 操作 | 颜色 | 图标 |
|---|---|---|---|---|
| 信息 | 向用户提供信息，不中断任何当前操作。 | 无需立即操作，用户可以通过点击 [X] 关闭或被动显示直到计时器到期。 | 蓝色背景 | Info-circle |
| 成功 | 当任何操作成功时，表示任务按预期完成。 | 通常不需要进一步操作，可以自动关闭或以非侵扰的方式持续存在。 | 绿色背景 | Check |
| 警告 | 告知用户某个操作是不期望的。 | 通常会一直存在，直到用户采取行动关闭通知或采取措施解决问题。 | 黄色背景 | Exclamation-triangle |
| 错误 | 当某个操作未按预期发生时，通常是发生了失败，用户需要采取行动。 | 总是持续存在，直到用户采取措施补救触发通知的问题。 | 红色背景 | Exclamation-circle |
内容
告警可以包含一个操作，关闭或驳回操作是可选的。
主要元素
-
图标状态
- 通过每种状态的颜色和图标表示消息的重要性。
-
告警文本/标题
- 应明确、清晰、简短地解释信息中最重要的部分。
-
详情
- 对通知的精确描述，告知用户需要做什么。
-
按钮和文本链接
- 只有持久性通知应包含文本链接或按钮。
-
关闭图标
- 当用户可以关闭通知时出现。
格式化
结构
- 图标状态：告知用户通知的状态。
- 告警文本/标题：通过快速摘要通知消息内容。
- 详情：简短描述，更详细地解释用户必须做什么。
- 操作（可选）：文本链接按钮或默认按钮，允许用户导航到包含更多详情的页面。