diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index 0ad805ede8..07db958916 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/display-name */ -import { PlusOutlined } from '@ant-design/icons'; -import { Flex, Input, Typography } from 'antd'; +import { InfoCircleOutlined, PlusOutlined } from '@ant-design/icons'; +import { Flex, Input, Tooltip, Typography } from 'antd'; import type { ColumnsType } from 'antd/es/table/interface'; import saveAlertApi from 'api/alerts/save'; import logEvent from 'api/common/logEvent'; @@ -175,6 +175,41 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { setData(filteredData); }); + const searchTooltipContent = ( +
+
Search Options:
+
+ • Plain text: Search across all fields +
+
+ • Key:value pairs: Specific field matching +
+
+ • Multiple terms: All terms must match (AND logic) +
+
+ • Status mapping: Use "ok" for inactive alerts +
+
Examples:
+
+ • cpu warning - Find alerts with both "cpu" and + "warning" +
+
+ • status:ok - Find alerts with OK status +
+
+ • severity:critical - Find critical alerts +
+
+ • cluster:prod - Find alerts with cluster=prod label +
+
+ • status:ok cpu - Find OK alerts containing "cpu" +
+
+ ); + const dynamicColumns: ColumnsType = [ { title: 'Created At', @@ -344,11 +379,22 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { return ( <> - +
+ + + + +
+ + } + /> +
+ {addNewAlert && (