Merge branch 'main' into feat-2538-refactor-builder-actions

.gitignore

@@ -189,6 +189,7 @@ keep-ui/node_modules/*
 
 cov.xml
 keep.db
+keepdd.db
 RANDOM_USER_ID
 storage
 

docs/alerts/actionmenu.mdx

@@ -0,0 +1,40 @@
+---
+title: "Action Menu"
+---
+
+# Action Menu
+
+The Action Menu in Keep provides quick access to common actions that can be performed on alerts. This menu enables teams to efficiently manage and interact with alerts directly from the table.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_menu_1.png" />
+</Frame>
+
+### (1) Run Workflow
+Trigger predefined workflows directly from the Action Menu. This allows automation of actions such as escalating alerts or notifying specific teams.
+
+### (2) Create a New Workflow
+Quickly create a new workflow tailored to the selected alert. This is useful for handling unique cases that require a custom response.
+
+### (3) View Alert History
+Access the full history of the alert, including changes to its status, comments, and any actions performed. This provides a clear timeline of the alert's lifecycle.
+
+### (4) Manually Enrich Alert
+Add custom metadata or details to an alert manually. This can include additional context or information that assists with resolution.
+
+### (5) Self Assign
+Assign the selected alert to yourself. This is ideal for team members who are taking ownership of specific alerts.
+
+### (6) View Alert
+Open the alert details in the sidebar or dedicated alert view for a deeper dive into its metadata and context.
+
+### (7) Source-Specific Actions
+Perform actions that are specific to the source of the alert. For example, linking directly to the monitoring tool or executing source-specific workflows.
+
+### (8) Dismiss Alert
+Mark the alert as dismissed to indicate that no further action is required. This helps in managing and decluttering the alert table.
+
+### (9) Change Status
+Update the status of the alert (e.g., from "firing" to "acknowledged"). This keeps the team informed about the current state of the alert.
+
+---

docs/alerts/overview.mdx

@@ -0,0 +1,18 @@
+---
+title: "Overview"
+---
+
+**Alert Management** empowers teams to effectively manage, monitor, and act on critical alerts.
+
+With a robust and user-friendly interface, Keep allows users to gain deep insights into their alerts, filter through large volumes of data, and take swift actions to maintain system health.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_1.png" />
+</Frame>
+
+Everything related with Alert Management can be customized:
+
+1. **Alert table** - view and manage the alerts.
+2. **Search Bar** - use CEL to filter alerts which can be saved as "Customized Presets".
+3. **Facets** - slice and dice alerts.
+4. **Columns and Time** - customize columns and theme for your preset.

docs/overview/presets.mdx → docs/alerts/presets.mdx

@@ -1,33 +1,40 @@
 ---
-description: "CEL-Based Alert Filtering"
-title: "Presets"
+title: "Customized Presets"
 ---
 
-With Keep's introduction of CEL (Common Expression Language) for alert filtering, users gain the flexibility to define more complex and precise alert filtering logic. This feature allows the creation of customizable filters using CEL expressions to refine alert visibility based on specific criteria.
 
-## Introduction
+<Tip>
 
-CEL-based filtering offers a powerful method for users to specify conditions under which alerts should be shown. Through a combination of logical, comparison, and string operations, alerts can be filtered to meet the exact needs of the user, improving the focus and efficiency of alert management.
+You can think of a preset like a "Slack Channel" for your alerts - a logical container to follow only alerts that matter for you.
+
+</Tip>
+
+With Keep's introduction of CEL (Common Expression Language) for alert filtering, users gain the flexibility to define more complex and precise alert filtering logic.
+
+This feature allows the creation of customizable filters using CEL expressions to refine alert visibility based on specific criteria.
 
 ## How It Works
 
 1. **CEL Expression Creation**: Users craft CEL expressions that define the filtering criteria for alerts.
 2. **Preset Definition**: These expressions can be saved as presets for easy application to different alert streams.
 3. **Alert Filtering**: When applied, the CEL expressions evaluate each alert against the defined criteria, filtering the alert stream in real-time.
 
-## Practical Example
 
-For instance, a user could create a CEL expression to filter alerts by severity and source, such as `severity == 'critical' && service.contains('database')`, ensuring only critical alerts from database services are displayed.
-
-## Core Concepts
+## Creating a CEL Expression
 
-- **CEL Expressions**: The CEL language syntax used to define alert filtering logic.
-- **Presets**: Saved CEL expressions that can be reused across different alert streams.
-- **Real-Time Filtering**: The dynamic application of CEL expressions to incoming alerts.
+There are two ways of creating a CEL expression in Keep
+### Manually creating CEL query
 
-## Creating a CEL Expression
+Use the [CEL Language Definition](https://github.com/google/cel-spec/blob/master/doc/langdef.md) documentation to better understand the capabilities of the Common Expression Language
+This is an example of how to query all the alerts that came from `Sentry`
+<Frame width="100" height="200">
+  <img height="10" src="/images/presets/valid-sentry-cel.png" />
+</Frame>
+If the CEL syntax you typed in is invalid, an error message will show up (in this case, we used invalid `''` instead of `""`):
+<Frame width="100" height="200">
+  <img height="10" src="/images/presets/invalid-sentry-cel.png" />
+</Frame>
 
-There is generally two ways of creating a CEL expression in Keep
 ### Importing from an SQL query
 
 1. Click on the "Import from SQL" button
@@ -43,18 +50,6 @@ Which in turn will generate and apply a valid CEL query:
   <img height="10" src="/images/presets/converted-sql-to-cel.png" />
 </Frame>
 
-### Manually creating CEL query
-
-Use the [CEL Language Definition](https://github.com/google/cel-spec/blob/master/doc/langdef.md) documentation to better understand the capabilities of the Common Expression Language
-This is an example of how to query all the alerts that came from `Sentry`
-<Frame width="100" height="200">
-  <img height="10" src="/images/presets/valid-sentry-cel.png" />
-</Frame>
-If the CEL syntax you typed in is invalid, an error message will show up (in this case, we used invalid `''` instead of `""`):
-<Frame width="100" height="200">
-  <img height="10" src="/images/presets/invalid-sentry-cel.png" />
-</Frame>
-
 ## Save Presets
 
 You can save your CEL queries into a `Preset` using the "Save current filter as a view" button
@@ -70,6 +65,11 @@ The `Preset` will then be created and available for you to quickly navigate and
   <img height="10" src="/images/presets/preset-created.png" />
 </Frame>
 
+## Practical Example
+
+For instance, a user could create a CEL expression to filter alerts by severity and source, such as `severity == 'critical' && service.contains('database')`, ensuring only critical alerts from database services are displayed.
+
+
 ## Best Practices
 
 - **Specificity in Expressions**: Craft expressions that precisely target the desired alerts to avoid filtering out relevant alerts.

docs/alerts/sidebar.mdx

@@ -0,0 +1,32 @@
+---
+title: "Alert Sidebar"
+---
+
+The Alert Sidebar in Keep provides a detailed view of a selected alert, offering in-depth context and information to aid in alert management and resolution. This feature is designed to give users a comprehensive understanding of the alert without leaving the main interface.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_sidebar.png" />
+</Frame>
+
+### (1) Alert Name
+Displays the name of the alert, which typically summarizes the issue or event being reported. This is the primary identifier for the alert.
+
+### (2) Alert Related Service
+Shows the service associated with the alert. This helps teams quickly understand which part of the infrastructure or application is affected.
+
+### (3) Alert Source
+Indicates the source of the alert, such as the monitoring tool or system that generated it (e.g., Prometheus, Datadog). This provides context on where the alert originated.
+
+### (4) Alert Description
+A detailed description of the alert, including specifics about the issue. This section helps provide a deeper understanding of what triggered the alert.
+
+### (5) Alert Fingerprint
+A unique identifier for the alert. The fingerprint is used to correlate alerts and track their lifecycle across systems.
+
+### (6) Alert Timeline
+Displays a chronological history of the alert, including when it was created, acknowledged, updated, or resolved. The timeline provides insights into how the alert has been managed.
+
+### (7) Alert Topology View
+Offers a visual representation of the alert's impact on the system's topology. This view helps identify affected components and their relationships to other parts of the infrastructure.
+
+---

docs/alerts/table.mdx

@@ -0,0 +1,69 @@
+---
+title: "Alert Table"
+---
+
+The Alert Table is the central interface for viewing and managing alerts in Keep. It provides a comprehensive view of all alerts with powerful filtering, sorting, and interaction capabilities.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_table_1.png" />
+</Frame>
+
+### (1) Columns
+Columns in the alert table can be customized to display the most relevant data. Users can select which columns to display and reorder them using drag-and-drop functionality.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_table_2.png" />
+</Frame>
+
+
+### (2) Alert Bulk Action
+Easily select one or more alerts for bulk actions. Actions include options like "assign to incident," "dismiss," or other available workflows.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_table_3.png" />
+</Frame>
+
+### (3) Alert Actions Menu
+The actions menu provides quick access to various operations for each alert, such as linking to incidents, creating tickets, or escalating.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_table_4.png" />
+</Frame>
+
+### (4) Alert Link
+Each alert includes a badge that links directly to the original alert in the monitoring tool. Clicking this badge opens the alert in its source system for further investigation.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_table_5.png" />
+</Frame>
+
+### (5) Alert Ticket
+You can asign ticket to alert. If an alert is associated with a ticket, a ticket badge will be displayed. Clicking on this badge navigates directly to the assigned ticket in the ticketing tool.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_table_8.png" />
+</Frame>
+
+### (6) Alert Comment
+Users can add comments to any alert to provide additional context or share insights with team members. This improves collaboration and ensures all relevant information is available.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_table_9.png" />
+</Frame>
+
+### (7) Alert Related Workflows
+View and trigger related workflows for an alert directly from the table. This allows seamless integration with predefined processes like escalation, suppression, or custom automation.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_table_7.png" />
+</Frame>
+
+
+### (8) Sorting
+The table supports sorting by any column using the "sort" icon. This makes it easy to prioritize or organize alerts based on specific criteria.
+
+<Frame width="100" height="200">
+  <img height="10" src="/images/alert_table_table_sort.gif" />
+</Frame>
+
+---