Merge branch 'main' into feat/workflow-ai-assistant

# Conflicts: # keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-header.tsx # keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-page.tsx # keep-ui/app/(keep)/workflows/[workflow_id]/workflow-overview.tsx # keep-ui/app/(keep)/workflows/builder/CustomNode.tsx # keep-ui/app/(keep)/workflows/builder/builder.tsx # keep-ui/app/(keep)/workflows/builder/workflow-execution-results.tsx # keep-ui/app/(keep)/workflows/workflows.client.tsx
keephq · Jan 8, 2025 · ce2f097 · ce2f097
2 parents 54b93c2 + 0da8d31
commit ce2f097
Show file tree

Hide file tree

Showing 29 changed files with 330 additions and 366 deletions.
diff --git a/docs/overview/howdoeskeepgetmyalerts.mdx b/docs/overview/howdoeskeepgetmyalerts.mdx
@@ -25,7 +25,7 @@ You can configure which providers you want to push from by checking the `Install
 ### Pull
 
 When you connect a [Provider](/providers), Keep will start pulling alerts from the tool automatically.
-Pulling interval is defined by the `KEEP_PULL_INTERVAL` environment variable and defaults to 7 days and can be completely turned off by using the `KEEP_PULL_DATA_ENABLED` environment variable.
+Pulling interval is defined by the `KEEP_PULL_INTERVAL` environment variable and defaults to 7 days (in minutes) and can be completely turned off by using the `KEEP_PULL_DATA_ENABLED` environment variable.
 
 You can also configure which providers you want to pull from by checking the `Pulling Enabled` checkbox in the provider settings.
 

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

diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/table-filters.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/table-filters.tsx
@@ -210,13 +210,14 @@ export const TableFilters: React.FC<TableFiltersProps> = ({ workflowId }) => {
         />
       </div>
       <Button
-        className="shadow-lg p-2"
+        color="orange"
+        variant="secondary"
         onClick={() => {
           filterRef.current = { trigger: [], status: [], execution_id: "" };
           setApply(true);
         }}
       >
-        Clear Filters
+        Clear filters
       </Button>
     </div>
   );

diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-header.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-header.tsx
@@ -5,7 +5,9 @@ import { Workflow } from "../models";
 
 import useSWR from "swr";
 import Skeleton from "react-loading-skeleton";
-import { Text } from "@tremor/react";
+import { Button, Text } from "@tremor/react";
+import { useWorkflowRun } from "@/utils/hooks/useWorkflowRun";
+import AlertTriggerModal from "../workflow-run-with-alert-modal";
 
 export default function WorkflowDetailHeader({
   workflow_id,
@@ -22,6 +24,14 @@ export default function WorkflowDetailHeader({
     (url: string) => api.get(url)
   );
 
+  const {
+    isRunning,
+    handleRunClick,
+    getTriggerModalProps,
+    isRunButtonDisabled,
+    message,
+  } = useWorkflowRun(workflow as Workflow);
+
   if (error) {
     return <div>Error loading workflow</div>;
   }
@@ -40,11 +50,36 @@ export default function WorkflowDetailHeader({
 
   return (
     <div>
-      <h1 className="text-2xl line-clamp-2 font-extrabold">{workflow.name}</h1>
-      {workflow.description && (
-        <Text className="line-clamp-5">
-          <span>{workflow.description}</span>
-        </Text>
+      <div className="flex justify-between items-end text-sm gap-2">
+        <div>
+          <h1 className="text-2xl line-clamp-2 font-extrabold">
+            {workflow.name}
+          </h1>
+          {workflow.description && (
+            <Text className="line-clamp-5">
+              <span>{workflow.description}</span>
+            </Text>
+          )}
+        </div>
+        {!!workflow && (
+          <Button
+            color="orange"
+            disabled={isRunning || isRunButtonDisabled}
+            className="p-2 px-4"
+            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleRunClick?.();
+            }}
+            tooltip={message}
+          >
+            {isRunning ? "Running..." : "Run now"}
+          </Button>
+        )}
+      </div>
+
+      {!!workflow && !!getTriggerModalProps && (
+        <AlertTriggerModal {...getTriggerModalProps()} />
       )}
     </div>
   );

diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-page.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  Callout,
   Card,
   Tab,
   TabGroup,
@@ -13,8 +12,6 @@ import React, { useState } from "react";
 import {
   ArrowUpRightIcon,
   CodeBracketIcon,
-  DocumentTextIcon,
-  ExclamationCircleIcon,
   WrenchIcon,
 } from "@heroicons/react/24/outline";
 import Loading from "@/app/(keep)/loading";
@@ -24,7 +21,6 @@ import { WorkflowBuilderPageClient } from "../builder/page.client";
 import WorkflowOverview from "./workflow-overview";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { AiOutlineSwap } from "react-icons/ai";
-import { AcademicCapIcon } from "@heroicons/react/24/solid";
 import { ErrorComponent, TabNavigationLink, YAMLCodeblock } from "@/shared/ui";
 
 export default function WorkflowDetailPage({
@@ -81,9 +77,7 @@ export default function WorkflowDetailPage({
         </TabList>
         <TabPanels>
           <TabPanel>
-            <Card>
-              <WorkflowOverview workflow_id={params.workflow_id} />
-            </Card>
+            <WorkflowOverview workflow_id={params.workflow_id} />
           </TabPanel>
           <TabPanel>
             <Card className="h-[calc(100vh-150px)]">