From 5309866beef9e1fa1e6e7defa33b3c472c588fb3 Mon Sep 17 00:00:00 2001
From: asharonbaltazar <58940073+asharonbaltazar@users.noreply.github.com>
Date: Mon, 6 May 2024 13:23:39 -0400
Subject: [PATCH] fix(ui): Adjust Group Condition to `1` (#1167)

Co-authored-by: Tal <tal@keephq.dev>
---
 .../CorrelationSidebarBody.tsx                | 12 ++--
 .../rules/CorrelationSidebar/RuleFields.tsx   | 18 ++----
 keep-ui/app/rules/CorrelationTable.tsx        | 23 ++++++--
 keep-ui/app/rules/FormattedQueryCell.tsx      | 59 +++++++++++++------
 4 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/keep-ui/app/rules/CorrelationSidebar/CorrelationSidebarBody.tsx b/keep-ui/app/rules/CorrelationSidebar/CorrelationSidebarBody.tsx
index ddacc8832..4db1499c3 100644
--- a/keep-ui/app/rules/CorrelationSidebar/CorrelationSidebarBody.tsx
+++ b/keep-ui/app/rules/CorrelationSidebar/CorrelationSidebarBody.tsx
@@ -87,13 +87,11 @@ export const CorrelationSidebarBody = ({
           title="What is alert correlations? and why grouping alerts together can ease your work"
           color="teal"
         >
-          Rapidiously aggregate parallel initiatives before client-focused
-          action items, Distinctively extend effective convergence with
-          ubiquitous deliverables. Rapidiously productize long-term high-impact
-          infomediaries through multifunctional &quot;outside the box&quot;
-          thinking. Assertively communicate business testing procedures before
-          accurate deliverables. Uniquely maintain accurate architectures
-          through functional benefits.
+          A versatile tool for grouping and consolidating alerts. Read more in
+          our{" "}
+          <a href="https://docs.keephq.dev/overview/ruleengine" target="_blank">
+            docs.
+          </a>
           <Button
             className="absolute top-0 right-0"
             onClick={() => setIsCalloutShown(false)}
diff --git a/keep-ui/app/rules/CorrelationSidebar/RuleFields.tsx b/keep-ui/app/rules/CorrelationSidebar/RuleFields.tsx
index e4b5c5090..9945c3e0a 100644
--- a/keep-ui/app/rules/CorrelationSidebar/RuleFields.tsx
+++ b/keep-ui/app/rules/CorrelationSidebar/RuleFields.tsx
@@ -203,11 +203,7 @@ export const RuleFields = ({
 
   const onRemoveRuleFieldClick = (removedRuleFieldIndex: number) => {
     // prevent users from removing group if there are only two remaining
-    if (
-      groupsLength === 2 &&
-      ruleFields.length <= 1 &&
-      removedRuleFieldIndex === 0
-    ) {
+    if (groupsLength === 1 && ruleFields.length < 2) {
       return undefined;
     }
 
@@ -221,7 +217,7 @@ export const RuleFields = ({
   };
 
   const onRemoveGroupClick = () => {
-    if (groupsLength > 2) {
+    if (groupsLength > 1) {
       return onRuleRemove([groupIndex]);
     }
   };
@@ -240,11 +236,7 @@ export const RuleFields = ({
         if ("field" in ruleField) {
           const isInputRemovalDisabled =
             // groups length is only 2
-            groupsLength === 2 &&
-            // and remaining fields in group is down to one
-            ruleFields.length <= 1 &&
-            // and rule field is the first (and last) one
-            ruleFieldIndex === 0;
+            groupsLength === 1 && ruleFields.length < 2;
 
           return (
             <Field
@@ -282,9 +274,9 @@ export const RuleFields = ({
           variant="light"
           color="red"
           title={
-            groupsLength <= 2 ? "You must have at least two groups" : undefined
+            groupsLength <= 1 ? "You must have at least one group" : undefined
           }
-          disabled={groupsLength <= 2}
+          disabled={groupsLength <= 1}
           onClick={onRemoveGroupClick}
         >
           Remove group
diff --git a/keep-ui/app/rules/CorrelationTable.tsx b/keep-ui/app/rules/CorrelationTable.tsx
index 2877a74f9..0f33a14b2 100644
--- a/keep-ui/app/rules/CorrelationTable.tsx
+++ b/keep-ui/app/rules/CorrelationTable.tsx
@@ -18,18 +18,14 @@ import {
   DEFAULT_CORRELATION_FORM_VALUES,
 } from "./CorrelationSidebar";
 import {
-  CellContext,
   createColumnHelper,
   flexRender,
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { parseCEL } from "react-querybuilder";
+import { DefaultRuleGroupType, parseCEL } from "react-querybuilder";
 import { useRouter, useSearchParams } from "next/navigation";
 import { FormattedQueryCell } from "./FormattedQueryCell";
-import { TrashIcon } from "@radix-ui/react-icons";
-import { getApiURL } from "utils/apiUrl";
-import { Session } from "next-auth";
 import { DeleteRuleCell } from "./CorrelationSidebar/DeleteRule";
 
 const columnHelper = createColumnHelper<Rule>();
@@ -46,13 +42,28 @@ export const CorrelationTable = ({ rules }: CorrelationTableProps) => {
   const selectedRule = rules.find((rule) => rule.id === selectedId);
   const correlationFormFromRule: CorrelationForm = useMemo(() => {
     if (selectedRule) {
+      const query = parseCEL(selectedRule.definition_cel);
+
+      const queryInGroup: DefaultRuleGroupType = {
+        ...query,
+        rules:
+          query.rules.length > 1
+            ? query.rules
+            : [
+                {
+                  combinator: "and",
+                  rules: query.rules,
+                },
+              ],
+      };
+
       return {
         name: selectedRule.name,
         description: selectedRule.group_description ?? "",
         timeAmount: selectedRule.timeframe,
         timeUnit: "seconds",
         groupedAttributes: selectedRule.grouping_criteria,
-        query: parseCEL(selectedRule.definition_cel),
+        query: queryInGroup,
       };
     }
 
diff --git a/keep-ui/app/rules/FormattedQueryCell.tsx b/keep-ui/app/rules/FormattedQueryCell.tsx
index b41adecf2..9bc4ec677 100644
--- a/keep-ui/app/rules/FormattedQueryCell.tsx
+++ b/keep-ui/app/rules/FormattedQueryCell.tsx
@@ -7,13 +7,40 @@ type FormattedQueryCellProps = {
   query: RuleGroupType;
 };
 
-export const FormattedQueryCell = ({ query }: FormattedQueryCellProps) => (
-  <div className="inline-flex items-center">
-    {query.rules.map((group, groupI) => (
-      <Fragment key={groupI}>
-        <div className="p-2 bg-gray-50 border rounded space-x-2">
-          {"combinator" in group
-            ? group.rules.map((rule, ruleI) => (
+export const FormattedQueryCell = ({ query }: FormattedQueryCellProps) => {
+  // tb: this is a patch to make it work, needs refactor
+  const anyCombinator = query.rules.some((rule) => "combinator" in rule);
+
+  return (
+    <div className="inline-flex items-center">
+      {anyCombinator ? (
+        query.rules.map((group, groupI) => (
+          <Fragment key={groupI}>
+            <div className="p-2 bg-gray-50 border rounded space-x-2">
+              {"combinator" in group
+                ? group.rules.map((rule, ruleI) => (
+                    <Fragment key={ruleI}>
+                      {"field" in rule ? (
+                        <span className="space-x-2">
+                          <b>{rule.field}</b>{" "}
+                          <code className="font-mono">{rule.operator}</code>
+                          <Badge color="orange">{rule.value}</Badge>
+                        </span>
+                      ) : undefined}
+                    </Fragment>
+                  ))
+                : null}
+            </div>
+            {query.rules.length !== groupI + 1 && (
+              <Icon className="mx-1" icon={PlusIcon} size="sm" color="slate" />
+            )}
+          </Fragment>
+        ))
+      ) : (
+        <Fragment>
+          <div className="p-2 bg-gray-50 border rounded space-x-2">
+            {query.rules.map((rule, ruleI) => {
+              return (
                 <Fragment key={ruleI}>
                   {"field" in rule ? (
                     <span className="space-x-2">
@@ -23,13 +50,11 @@ export const FormattedQueryCell = ({ query }: FormattedQueryCellProps) => (
                     </span>
                   ) : undefined}
                 </Fragment>
-              ))
-            : null}
-        </div>
-        {query.rules.length !== groupI + 1 && (
-          <Icon className="mx-1" icon={PlusIcon} size="sm" color="slate" />
-        )}
-      </Fragment>
-    ))}
-  </div>
-);
+              );
+            })}
+          </div>
+        </Fragment>
+      )}
+    </div>
+  );
+};