feat(ui): minor changes in the uI (#2977)

keephq · Jan 4, 2025 · 1a6ea83 · 1a6ea83
1 parent 0b5e146
commit 1a6ea83
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 63 deletions.
diff --git a/keep-ui/app/(keep)/alerts/ViewAlertModal.tsx b/keep-ui/app/(keep)/alerts/ViewAlertModal.tsx
@@ -99,7 +99,7 @@ export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({
     <Modal
       onClose={handleClose}
       isOpen={isOpen}
-      className="overflow-visible max-w-fit"
+      className="overflow-visible max-w-[800px]"
     >
       <div className="flex justify-between items-center mb-4 min-w-full">
         <h2 className="text-lg font-semibold">Alert Details</h2>
@@ -130,7 +130,7 @@ export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({
         </div>
       </div>
       {alert && (
-        <pre className="p-2 bg-gray-100 rounded mt-2 overflow-auto">
+        <pre className="p-2 bg-gray-100 rounded mt-2 overflow-auto whitespace-pre-wrap break-all">
           <p>&#123;</p>
           {highlightKeys(alert, alert.enriched_fields)}
           <p>&#125;</p>

diff --git a/keep-ui/app/(keep)/alerts/alerts-rules-builder.tsx b/keep-ui/app/(keep)/alerts/alerts-rules-builder.tsx
@@ -12,6 +12,7 @@ import QueryBuilder, {
 } from "react-querybuilder";
 import "react-querybuilder/dist/query-builder.scss";
 import { Table } from "@tanstack/react-table";
+import { FiSave } from "react-icons/fi";
 import {
   AlertDto,
   severityMapping,
@@ -27,8 +28,6 @@ import { FiExternalLink } from "react-icons/fi";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { toast } from "react-toastify";
 import { CornerDownLeft } from "lucide-react";
-import { Link } from "@/components/ui";
-import { DocumentTextIcon } from "@heroicons/react/24/outline";
 import { STATIC_PRESETS_NAMES } from "@/entities/presets/model/constants";
 import { Preset } from "@/entities/presets/model/types";
 import { usePresetActions } from "@/entities/presets/model/usePresetActions";
@@ -89,7 +88,7 @@ const CustomMenuList = (props: MenuListProps<{}>) => {
           <kbd style={kbdStyle}>Enter</kbd> to update query
         </span>
         <a
-          href="https://docs.keephq.dev/overview/presets"
+          href="https://docs.keephq.dev/overview/cel"
           target="_blank"
           rel="noopener noreferrer"
           style={{
@@ -539,27 +538,18 @@ export const AlertsRulesBuilder = ({
   };
 
   const validateAndOpenSaveModal = (celExpression: string) => {
+    // Use existing validation logic
     const celQuery = formatQuery(parseCEL(celExpression), "cel");
-
-    // Normalize both strings by:
-    // 1. Removing all whitespace
-    // 2. Creating versions with both single and double quotes
-    const normalizedCelQuery = celQuery.replace(/\s+/g, "");
-    const normalizedExpression = celExpression.replace(/\s+/g, "");
-
-    // Create variants with different quote styles
-    const celQuerySingleQuotes = normalizedCelQuery.replace(/"/g, "'");
-    const celQueryDoubleQuotes = normalizedCelQuery.replace(/'/g, '"');
-
     const isValidCEL =
-      normalizedExpression === celQuerySingleQuotes ||
-      normalizedExpression === celQueryDoubleQuotes ||
+      celQuery.replace(/\s+/g, "") === celExpression.replace(/\s+/g, "") ||
       celExpression === "";
 
     if (isValidCEL && celExpression.length) {
+      // If CEL is valid and not empty, set the CEL rules for the preset and open the modal
       setPresetCEL?.(celExpression);
       setIsModalOpen?.(true);
     } else {
+      // If CEL is invalid or empty, inform the user
       alert("You can only save a valid CEL expression.");
       setIsValidCEL(isValidCEL);
     }
@@ -573,25 +563,28 @@ export const AlertsRulesBuilder = ({
           <div className="flex flex-wrap gap-2 items-center relative flex-grow">
             {/* Textarea and error message container */}
             <div className="flex-grow relative" ref={wrapperRef}>
-              <Textarea
-                ref={textAreaRef}
-                rows={1}
-                className="resize-none overflow-hidden w-full pr-9 min-h-[38px]" // Padding for clear button and height to match the button height
-                value={celRules}
-                onValueChange={onValueChange}
-                onKeyDown={handleKeyDown}
-                placeholder='Use CEL to filter your alerts e.g. source.contains("kibana").'
-                error={!isValidCEL}
-                onFocus={() => setShowSuggestions(true)}
-              />
-              {celRules && (
-                <button
-                  onClick={handleClearInput}
-                  className="absolute top-0 right-0 w-9 h-[38px] flex items-center justify-center text-gray-400 hover:text-gray-600" // Position to the left of the Enter to apply badge
-                >
-                  <XMarkIcon className="h-4 w-4" />
-                </button>
-              )}
+              <div className="relative">
+                <IoSearchOutline className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+                <Textarea
+                  ref={textAreaRef}
+                  rows={1}
+                  className="resize-none overflow-hidden w-full pr-9 pl-9 min-h-[38px]" // Added pl-9 for left padding to accommodate icon
+                  value={celRules}
+                  onValueChange={onValueChange}
+                  onKeyDown={handleKeyDown}
+                  placeholder='Use CEL to filter your alerts e.g. source.contains("kibana").'
+                  error={!isValidCEL}
+                  onFocus={() => setShowSuggestions(true)}
+                />
+                {celRules && (
+                  <button
+                    onClick={handleClearInput}
+                    className="absolute top-0 right-0 w-9 h-[38px] flex items-center justify-center text-gray-400 hover:text-gray-600" // Position to the left of the Enter to apply badge
+                  >
+                    <XMarkIcon className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
               {showSuggestions && (
                 <div className="absolute z-10 w-full">
                   <Select
@@ -608,16 +601,7 @@ export const AlertsRulesBuilder = ({
                   Invalid Common Expression Logic expression.
                 </div>
               )}
-              <div className="flex items-center justify-between pt-1 px-2">
-                <Link
-                  href="https://docs.keephq.dev/overview/presets"
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  className="text-xs text-tremor-muted"
-                  icon={DocumentTextIcon}
-                >
-                  CEL Documentation
-                </Link>
+              <div className="flex items-center justify-end pt-1 px-2">
                 <span className="text-xs text-gray-400">
                   <CornerDownLeft className="h-3 w-3 mr-1 inline-block" />
                   Enter to apply
@@ -627,22 +611,11 @@ export const AlertsRulesBuilder = ({
           </div>
 
           {/* Buttons next to the Textarea */}
-          {showSqlImport && (
-            <Button
-              color="orange"
-              variant="secondary"
-              type="button"
-              onClick={onImportSQL}
-              icon={TbDatabaseImport}
-              size="sm"
-              tooltip="Import from SQL"
-            >
-              Import from SQL
-            </Button>
-          )}
           {showSave && (
             <Button
+              icon={FiSave}
               color="orange"
+              variant="secondary"
               size="sm"
               disabled={!celRules.length}
               onClick={() => validateAndOpenSaveModal(celRules)}
@@ -651,9 +624,18 @@ export const AlertsRulesBuilder = ({
                   ? "Edit preset"
                   : "Save current filter as a preset"
               }
-            >
-              {action === "update" ? "Edit" : "Save"}
-            </Button>
+            ></Button>
+          )}
+          {showSqlImport && (
+            <Button
+              color="orange"
+              variant="secondary"
+              type="button"
+              onClick={onImportSQL}
+              icon={TbDatabaseImport}
+              size="sm"
+              tooltip="Import from SQL"
+            ></Button>
           )}
           {isDynamic && (
             <Button