Merge branch 'main' into icinga2_provider and add Automatic snippet to provider doc

Author: Matvey-Kuk

docs/providers/documentation/icinga2-provider.mdx

@@ -1,7 +1,11 @@
 ---
 title: "Icinga2 Provider"
 sidebarTitle: "Icinga2"
+description: "Icinga2 Provider Allows Reception of Push Alerts from Icinga2 to Keep."
 ---
+import AutoGeneratedSnippet from '/snippets/providers/icinga2-snippet-autogenerated.mdx';
+
+<AutoGeneratedSnippet />
 
 import ProviderLogo from '@components/ProviderLogo';
 

docs/snippets/providers/grafana_loki-snippet-autogenerated.mdx

@@ -1,16 +1,17 @@
-{/* This snippet is automatically generated using scripts/docs_render_provider_snippets.py 
+{/* This snippet is automatically generated using scripts/docs_render_provider_snippets.py
 Do not edit it manually, as it will be overwritten */}
 
 ## Authentication
 This provider requires authentication.
 - **host_url**: Grafana Loki Host URL (required: True, sensitive: False)
+- **verify**: Enable SSL verification (required: False, sensitive: False)
 - **authentication_type**: Authentication Type (required: True, sensitive: False)
 - **username**: HTTP basic authentication - Username (required: False, sensitive: False)
 - **password**: HTTP basic authentication - Password (required: False, sensitive: True)
 - **x_scope_orgid**: X-Scope-OrgID Header Authentication (required: False, sensitive: False)
 
 Certain scopes may be required to perform specific actions or queries via the provider. Below is a summary of relevant scopes and their use cases:
-- **authenticated**: Instance is valid and user is authenticated  
+- **authenticated**: Instance is valid and user is authenticated
 
 
 
@@ -26,16 +27,16 @@ steps:
       provider: grafana_loki
       config: "{{ provider.my_provider_name }}"
       with:
-        query: {value}  
-        limit: {value}  
-        time: {value}  
-        direction: {value}  
-        start: {value}  
-        end: {value}  
-        since: {value}  
-        step: {value}  
-        interval: {value}  
-        queryType: {value}  
+        query: {value}
+        limit: {value}
+        time: {value}
+        direction: {value}
+        start: {value}
+        end: {value}
+        since: {value}
+        step: {value}
+        interval: {value}
+        queryType: {value}
 ```
 
 

examples/workflows/planner_basic.yml

@@ -13,7 +13,7 @@ workflow:
         with:
           title: "Keep HQ Task1"
           plan_id: "tAtCor_XPEmqTzVqTigCycgABz0K"
-  on-failure:
-    retry:
-      count: 2
-      interval: 2
+      on-failure:
+        retry:
+          count: 2
+          interval: 2

examples/workflows/send_slack_message_on_failure.yaml

@@ -0,0 +1,32 @@
+workflow:
+  id: send-slack-message-on-failure
+  name: Get alert root cause from OpenAI, notify if workflow fails
+  description: Get alert root cause from OpenAI, notify if workflow fails
+  triggers:
+    - type: alert
+      cel: alert.severity == "critical"
+  on-failure:
+    provider:
+      type: slack
+      config: "{{ providers.slack }}"
+      with:
+        channel: "<slack-channel-id>"
+        # message will be injected from the workflow engine
+        # e.g. "Workflow <workflow-id> failed with error: <error-message>"
+  steps:
+    - name: openai-step
+      provider:
+        config: "{{ providers.openai }}"
+        type: openai
+        with:
+          prompt: |
+            You are a very talented engineer that receives critical alert and reports back the root
+            cause analysis. Here is the context: keep.json_dumps({{alert}}) (it is a JSON of the alert).
+            In your answer, also provide the reason why you think it is the root cause and specify what your certainty level is that it is the root cause. (between 1-10, where 1 is low and 10 is high)
+  actions:
+    - name: slack-action
+      provider:
+        config: "{{ providers.slack }}"
+        type: slack
+        with:
+          message: "{{steps.openai-step.results}}"

keep-ui/app/(keep)/alerts/[id]/ui/alerts.tsx

@@ -221,7 +221,7 @@ export default function Alerts({ presetName, initialFacets }: AlertsProps) {
       />
       <ManualRunWorkflowModal
         alert={runWorkflowModalAlert}
-        handleClose={() => setRunWorkflowModalAlert(null)}
+        onClose={() => setRunWorkflowModalAlert(null)}
       />
       <ViewAlertModal
         alert={viewAlertModal}

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

@@ -184,7 +184,7 @@ export function IncidentHeader({
       </Modal>
       <ManualRunWorkflowModal
         incident={runWorkflowModalIncident}
-        handleClose={() => setRunWorkflowModalIncident(null)}
+        onClose={() => setRunWorkflowModalIncident(null)}
       />
     </CopilotKit>
   );

keep-ui/app/(keep)/incidents/[id]/workflows/incident-workflow-empty.tsx

@@ -41,7 +41,7 @@ export function IncidentWorkflowsEmptyState({
 
       <ManualRunWorkflowModal
         incident={runWorkflowModalIncident}
-        handleClose={() => setRunWorkflowModalIncident(null)}
+        onClose={() => setRunWorkflowModalIncident(null)}
       />
     </>
   );

keep-ui/app/(keep)/layout.tsx

@@ -13,6 +13,7 @@ import { ThemeScript, WatchUpdateTheme } from "@/shared/ui";
 import "@/app/globals.css";
 import "react-toastify/dist/ReactToastify.css";
 import { PostHogPageView } from "@/shared/ui/PostHogPageView";
+import { WorkflowModalProvider } from "@/features/workflows/manual-run-workflow";
 
 // If loading a variable font, you don't need to specify the font weight
 const mulish = Mulish({
@@ -37,26 +38,28 @@ export default async function RootLayout({ children }: RootLayoutProps) {
           <PHProvider>
             <NextAuthProvider session={session}>
               <TopologyPollingContextProvider>
-                {/* @ts-ignore-error Server Component */}
-                <PostHogPageView />
-                <Navbar />
-                {/* https://discord.com/channels/752553802359505017/1068089513253019688/1117731746922893333 */}
-                <main className="page-container flex flex-col col-start-3 overflow-auto">
-                  {/* Add the banner here, before the navbar */}
-                  {config.READ_ONLY && <ReadOnlyBanner />}
-                  <div className="flex-1">{children}</div>
-                  {/** footer */}
-                  {process.env.GIT_COMMIT_HASH &&
-                    process.env.SHOW_BUILD_INFO !== "false" && (
-                      <div className="pointer-events-none opacity-80 w-full p-2 text-slate-400 text-xs">
-                        <div className="w-full text-right">
-                          Version: {process.env.KEEP_VERSION} | Build:{" "}
-                          {process.env.GIT_COMMIT_HASH.slice(0, 6)}
+                <WorkflowModalProvider>
+                  {/* @ts-ignore-error Server Component */}
+                  <PostHogPageView />
+                  <Navbar />
+                  {/* https://discord.com/channels/752553802359505017/1068089513253019688/1117731746922893333 */}
+                  <main className="page-container flex flex-col col-start-3 overflow-auto">
+                    {/* Add the banner here, before the navbar */}
+                    {config.READ_ONLY && <ReadOnlyBanner />}
+                    <div className="flex-1">{children}</div>
+                    {/** footer */}
+                    {process.env.GIT_COMMIT_HASH &&
+                      process.env.SHOW_BUILD_INFO !== "false" && (
+                        <div className="pointer-events-none opacity-80 w-full p-2 text-slate-400 text-xs">
+                          <div className="w-full text-right">
+                            Version: {process.env.KEEP_VERSION} | Build:{" "}
+                            {process.env.GIT_COMMIT_HASH.slice(0, 6)}
+                          </div>
                         </div>
-                      </div>
-                    )}
-                  <ToastContainer />
-                </main>
+                      )}
+                    <ToastContainer />
+                  </main>
+                </WorkflowModalProvider>
               </TopologyPollingContextProvider>
             </NextAuthProvider>
           </PHProvider>

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

@@ -264,6 +264,41 @@ export const CorrelationForm = ({
             )}
           />
         </div>
+
+        <div>
+          <label
+            className="flex items-center text-tremor-default font-medium text-tremor-content-strong"
+            htmlFor="threshold"
+          >
+            Alerts threshold{" "}
+          </label>
+
+          <Controller
+            control={control}
+            name="threshold"
+            render={({ field: { value, onChange } }) => (
+              <TextInput
+              type="number"
+              placeholder="1"
+              className="mt-2"
+              {...register("threshold", {
+                required: {
+                  message: "Threshold is required",
+                  value: false,
+                },
+                validate: (value) => {
+                  if (value <= 0) {
+                    return "Threshold should be positive";
+                  }
+                  return true;
+                },
+              })}
+              error={isSubmitted && !!get(errors, "threshold.message")}
+              errorMessage={isSubmitted && get(errors, "threshold.message")}
+            />
+            )}
+          />
+        </div>
       </fieldset>
 
       <div className="flex items-center space-x-2">

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

@@ -77,6 +77,7 @@ export const CorrelationSidebarBody = ({
       incidentPrefix,
       multiLevel,
       multiLevelPropertyName,
+      threshold,
     } = correlationFormData;
 
     const body = {
@@ -94,6 +95,7 @@ export const CorrelationSidebarBody = ({
       incidentPrefix,
       multiLevel,
       multiLevelPropertyName,
+      threshold,
     };
 
     try {

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

@@ -27,6 +27,7 @@ export const DEFAULT_CORRELATION_FORM_VALUES: CorrelationFormType = {
   incidentPrefix: "",
   multiLevel: false,
   multiLevelPropertyName: "",
+  threshold: 1,
   query: {
     combinator: "or",
     rules: [
@@ -92,6 +93,7 @@ export const CorrelationSidebar = ({
         incidentPrefix: selectedRule.incident_prefix || "",
         multiLevel: selectedRule.multi_level,
         multiLevelPropertyName: selectedRule.multi_level_property_name || "",
+        threshold: selectedRule.threshold || 1,
       };
     }
 

keep-ui/app/(keep)/rules/CorrelationSidebar/types.ts

@@ -14,4 +14,5 @@ export type CorrelationFormType = {
   incidentPrefix: string;
   multiLevel: boolean;
   multiLevelPropertyName?: string;
+  threshold: number;
 };

keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-header.tsx

@@ -2,11 +2,9 @@
 
 import { useWorkflowDetail } from "@/entities/workflows/model/useWorkflowDetail";
 import { Workflow } from "@/shared/api/workflows";
-import { useWorkflowRun } from "@/utils/hooks/useWorkflowRun";
+import { useWorkflowRun } from "@/features/workflows/manual-run-workflow/model/useWorkflowRun";
 import { Button, Text } from "@tremor/react";
 import Skeleton from "react-loading-skeleton";
-import AlertTriggerModal from "../workflow-run-with-alert-modal";
-import { ManualRunWorkflowModal } from "@/features/workflows/manual-run-workflow";
 
 export default function WorkflowDetailHeader({
   workflowId: workflow_id,
@@ -19,14 +17,8 @@ export default function WorkflowDetailHeader({
     fallbackData: initialData,
   });
 
-  const {
-    isRunning,
-    handleRunClick,
-    getTriggerModalProps,
-    getManualInputModalProps,
-    isRunButtonDisabled,
-    message,
-  } = useWorkflowRun(workflow as Workflow);
+  const { isRunning, handleRunClick, isRunButtonDisabled, message } =
+    useWorkflowRun(workflow as Workflow);
 
   if (error) {
     return <div>Error loading workflow</div>;
@@ -78,27 +70,13 @@ export default function WorkflowDetailHeader({
                 handleRunClick?.();
               }}
               tooltip={message}
+              data-testid="wf-run-now-button"
             >
               {isRunning ? "Running..." : "Run now"}
             </Button>
           )}
         </div>
       </div>
-
-      {/* Alert Trigger Modal */}
-      {!!workflow && !!getTriggerModalProps && (
-        <AlertTriggerModal {...getTriggerModalProps()} />
-      )}
-
-      {/* Manual Input Modal */}
-      {!!workflow && !!getManualInputModalProps && (
-        <ManualRunWorkflowModal
-          workflow={workflow}
-          handleClose={() => getManualInputModalProps().onClose()}
-          isOpen={getManualInputModalProps().isOpen}
-          onSubmit={getManualInputModalProps().onSubmit}
-        />
-      )}
     </div>
   );
 }

keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-page.tsx

@@ -29,6 +29,8 @@ import { WorkflowYAMLEditorStandalone } from "@/shared/ui/WorkflowYAMLEditor/ui/
 import { getOrderedWorkflowYamlString } from "@/entities/workflows/lib/yaml-utils";
 import { PiClockCounterClockwise } from "react-icons/pi";
 import { WorkflowVersions } from "./workflow-versions";
+import { useUIBuilderUnsavedChanges } from "@/entities/workflows/model/workflow-store";
+import { useWorkflowYAMLEditorStore } from "@/entities/workflows/model/workflow-yaml-editor-store";
 
 const TABS_KEYS = ["overview", "builder", "yaml", "versions", "secrets"];
 
@@ -54,6 +56,10 @@ export default function WorkflowDetailPage({
   );
   const router = useRouter();
 
+  const isUIBuilderUnsaved = useUIBuilderUnsavedChanges();
+  const { hasUnsavedChanges: isYamlEditorUnsaved } =
+    useWorkflowYAMLEditorStore();
+
   // Set initial tab based on URL query param
   useEffect(() => {
     const tab = searchParams.get("tab");
@@ -88,8 +94,22 @@ export default function WorkflowDetailPage({
       <TabGroup index={tabIndex} onIndexChange={handleTabChange}>
         <TabList>
           <Tab icon={AiOutlineSwap}>Overview</Tab>
-          <Tab icon={WrenchIcon}>Builder</Tab>
-          <Tab icon={CodeBracketIcon}>YAML Definition</Tab>
+          <Tab icon={WrenchIcon}>
+            <div className="flex items-center gap-2">
+              Builder{" "}
+              {isUIBuilderUnsaved ? (
+                <div className="inline-block text-xs size-1.5 rounded-full bg-yellow-500" />
+              ) : null}
+            </div>
+          </Tab>
+          <Tab icon={CodeBracketIcon}>
+            <div className="flex items-center gap-2">
+              YAML Definition{" "}
+              {isYamlEditorUnsaved ? (
+                <div className="inline-block text-xs size-1.5 rounded-full bg-yellow-500" />
+              ) : null}
+            </div>
+          </Tab>
           <Tab icon={PiClockCounterClockwise}>Versions</Tab>
           <Tab icon={KeyIcon}>Secrets</Tab>
           <TabNavigationLink

keep-ui/app/(keep)/workflows/[workflow_id]/workflow-overview.tsx

@@ -8,7 +8,7 @@ import WorkflowGraph from "../workflow-graph";
 import { WorkflowExecutionsTable } from "./workflow-executions-table";
 import { WorkflowOverviewSkeleton } from "./workflow-overview-skeleton";
 import { WorkflowProviders } from "./workflow-providers";
-import { WorkflowSteps } from "../workflows-templates";
+import { WorkflowSteps } from "../workflows-steps";
 import { parseWorkflowYamlStringToJSON } from "@/entities/workflows/lib/yaml-utils";
 interface Pagination {
   limit: number;
@@ -134,6 +134,7 @@ export default function WorkflowOverview({
           <Card>
             <Title>Executions Graph</Title>
             <WorkflowGraph
+              full
               showLastExecutionStatus={false}
               workflow={workflow}
               limit={executionPagination.limit}

keep-ui/app/(keep)/workflows/[workflow_id]/workflow-providers.tsx

@@ -7,7 +7,7 @@ import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
 import { DynamicImageProviderIcon } from "@/components/ui";
 import { useFetchProviders } from "../../providers/page.client";
 import { useRevalidateMultiple } from "@/shared/lib/state-utils";
-import { checkProviderNeedsInstallation } from "@/entities/workflows/lib/validation";
+import { checkProviderNeedsInstallation } from "@/entities/workflows/lib/validate-definition";
 import { Drawer } from "@/shared/ui/Drawer";
 
 export const ProvidersCarousel = ({