fix: several issues in incidents and correlation rule builder

keep-ui/app/(keep)/alerts/alerts-rules-builder.tsx

@@ -7,9 +7,9 @@ import QueryBuilder, {
   RuleGroupType,
   defaultOperators,
   formatQuery,
-  parseCEL,
-  parseSQL,
 } from "react-querybuilder";
+import { parseCEL } from "react-querybuilder/parseCEL";
+import { parseSQL } from "react-querybuilder/parseSQL";
 import "react-querybuilder/dist/query-builder.scss";
 import { Table } from "@tanstack/react-table";
 import { FiSave } from "react-icons/fi";
@@ -512,8 +512,8 @@ export const AlertsRulesBuilder = ({
           operators: getOperators(id),
         }))
     : customFields
-      ? customFields
-      : [];
+    ? customFields
+    : [];
 
   const onImportSQL = () => {
     setImportSQLOpen(true);

keep-ui/app/(keep)/incidents/[id]/activity/incident-activity.tsx

@@ -28,6 +28,19 @@ interface IncidentActivity {
   initiator?: string | AlertDto;
 }
 
+const ACTION_TYPES = [
+  "alert was triggered",
+  "alert acknowledged",
+  "alert automatically resolved",
+  "alert manually resolved",
+  "alert status manually changed",
+  "alert status changed by API",
+  "alert automatically resolved by API",
+  "A comment was added to the incident",
+  "Incident status changed",
+  "Incident assigned",
+];
+
 function Item({
   icon,
   children,
@@ -41,7 +54,7 @@ function Item({
         {/* vertical line */}
         <div className="absolute mx-auto right-0 left-0 top-0 bottom-0 h-full bg-gray-200 w-px" />
         {/* wrapping icon to avoid vertical line visible behind transparent background */}
-        <div className="relative z-[1] bg-tremor-background rounded-full border border-2 border-tremor-background">
+        <div className="relative z-[1] bg-tremor-background rounded-full border-2 border-tremor-background">
           {icon}
         </div>
       </div>
@@ -94,6 +107,7 @@ export function IncidentActivity({ incident }: { incident: IncidentDto }) {
     return (
       auditEvents
         .concat(incidentEvents)
+        .filter((auditEvent) => ACTION_TYPES.includes(auditEvent.action))
         .sort(
           (a, b) =>
             new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()

keep-ui/app/(keep)/rules/CorrelationSidebar/RuleFields.tsx

@@ -26,6 +26,7 @@ import { useDeduplicationFields } from "@/utils/hooks/useDeduplicationRules";
 const DEFAULT_OPERATORS = defaultOperators.filter((operator) =>
   [
     "=",
+    "!=",
     "contains",
     "beginsWith",
     "endsWith",

keep-ui/app/(keep)/rules/CorrelationSidebar/RuleGroup.tsx

@@ -1,5 +1,9 @@
 import { Button } from "@tremor/react";
-import { RuleGroupProps as QueryRuleGroupProps } from "react-querybuilder";
+import {
+  RuleGroupProps as QueryRuleGroupProps,
+  RuleGroupType,
+  RuleType,
+} from "react-querybuilder";
 import { RuleFields } from "./RuleFields";
 
 export const RuleGroup = ({ actions, ruleGroup }: QueryRuleGroupProps) => {
@@ -24,7 +28,12 @@ export const RuleGroup = ({ actions, ruleGroup }: QueryRuleGroupProps) => {
           <div key={groupIndex}>
             <div className="mb-2">{groupIndex > 0 ? "OR" : ""}</div>
             <RuleFields
-              rule={rule}
+              rule={
+                rule as RuleGroupType<
+                  RuleType<string, string, any, string>,
+                  string
+                >
+              }
               key={rule.id}
               groupIndex={groupIndex}
               onRuleAdd={onRuleAdd}

keep-ui/app/(keep)/rules/CorrelationTable.tsx

@@ -22,7 +22,8 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { DefaultRuleGroupType, parseCEL } from "react-querybuilder";
+import { DefaultRuleGroupType } from "react-querybuilder";
+import { parseCEL } from "react-querybuilder/parseCEL";
 import { useRouter, useSearchParams } from "next/navigation";
 import { FormattedQueryCell } from "./FormattedQueryCell";
 import { DeleteRuleCell } from "./CorrelationSidebar/DeleteRule";

keep-ui/entities/presets/model/usePresetActions.ts

@@ -1,7 +1,8 @@
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { showErrorToast, showSuccessToast } from "@/shared/ui";
 import { useCallback } from "react";
-import { formatQuery, parseCEL } from "react-querybuilder";
+import { formatQuery } from "react-querybuilder";
+import { parseCEL } from "react-querybuilder/parseCEL";
 import { Preset, PresetCreateUpdateDto } from "./types";
 import { useRevalidateMultiple } from "@/shared/lib/state-utils";
 import { useLocalStorage } from "@/utils/hooks/useLocalStorage";

keep-ui/features/change-incident-status/ui/incident-change-status-select.tsx

@@ -3,7 +3,7 @@ import { Status } from "@/entities/incidents/model";
 import { STATUS_ICONS } from "@/entities/incidents/ui";
 import Select, { ClassNamesConfig } from "react-select";
 import { useIncidentActions } from "@/entities/incidents/model";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { capitalize } from "@/utils/helpers";
 
 const customClassNames: ClassNamesConfig<any, false, any> = {
@@ -41,30 +41,35 @@ export function IncidentChangeStatusSelect({
 }: Props) {
   // Use a portal to render the menu outside the table container with overflow: hidden
   const menuPortalTarget = useRef<HTMLElement | null>(null);
+  const [isDisabled, setIsDisabled] = useState(false);
   useEffect(() => {
     menuPortalTarget.current = document.body;
   }, []);
 
   const { changeStatus } = useIncidentActions();
   const statusOptions = useMemo(
     () =>
-      Object.values(Status).filter((status) => status != Status.Deleted || value == Status.Deleted).map((status) => ({
-        value: status,
-        label: (
-          <div className="flex items-center">
-            {STATUS_ICONS[status]}
-            <span>{capitalize(status)}</span>
-          </div>
-        ),
-      })),
+      Object.values(Status)
+        .filter((status) => status != Status.Deleted || value == Status.Deleted)
+        .map((status) => ({
+          value: status,
+          label: (
+            <div className="flex items-center">
+              {STATUS_ICONS[status]}
+              <span>{capitalize(status)}</span>
+            </div>
+          ),
+        })),
     [value]
   );
 
   const handleChange = useCallback(
     (option: any) => {
       const _asyncUpdate = async (option: any) => {
+        setIsDisabled(true);
         await changeStatus(incidentId, option?.value || null);
         onChange?.(option?.value || null);
+        setIsDisabled(false);
       };
       _asyncUpdate(option);
     },
@@ -83,6 +88,7 @@ export function IncidentChangeStatusSelect({
       options={statusOptions}
       value={selectedOption}
       onChange={handleChange}
+      isDisabled={isDisabled}
       placeholder="Status"
       classNames={customClassNames}
       menuPortalTarget={menuPortalTarget.current}

keep-ui/package.json

@@ -92,7 +92,7 @@
     "react-name-initials-avatar": "^0.0.7",
     "react-papaparse": "^4.4.0",
     "react-player": "^2.16.0",
-    "react-querybuilder": "^6.5.4",
+    "react-querybuilder": "^8.3.1",
     "react-quill": "^2.0.0",
     "react-select": "^5.8.0",
     "react-sliding-side-panel": "^2.0.3",