Merge branch 'main' into Matvey-Kuk/hyper-parameters-and-background-e…

…xecution

Signed-off-by: Matvey Kukuy <[email protected]>

README.md

@@ -9,8 +9,6 @@
 </br>
 
 <div align="center">
-    <a href="https://github.com/keephq/keep/blob/main/LICENSE">
-        <img src="https://img.shields.io/github/license/keephq/keep" /></a>
     <a href="https://slack.keephq.dev">
       <img src="https://img.shields.io/badge/Join-important.svg?color=4A154B&label=Slack&logo=slack&labelColor=334155&logoColor=f5f5f5" alt="Join Slack" /></a>
     <a href="https://codecov.io/gh/keephq/keep" >

docker/Dockerfile.dev.ui

@@ -19,7 +19,7 @@ COPY ./keep-ui/ /app
 RUN npm install
 # Install next globally and create a symlink
 RUN npm install -g next
-RUN ln -s /usr/local/lib/node_modules/next/dist/bin/next /usr/local/bin/next
+RUN ln -s /usr/local/lib/node_modules/next/dist/bin/next /usr/local/bin/next || echo "next binary already linked to bin"
 # Ensure port 3000 is accessible to our system
 EXPOSE 3000
 

docs/development/getting-started.mdx

@@ -13,7 +13,7 @@ git clone https://github.com/keephq/keep.git && cd keep
 
 Next, run
 ```
-docker-compose -f docker-compose.dev.yml up
+docker compose -f docker-compose.dev.yml up
 ```
 
 ### Testing
@@ -33,7 +33,7 @@ poetry run coverage run --branch -m pytest -s tests/e2e_tests/
 
 Migrations are automatically executed on a server startup. To create a migration:
 ```bash
-cd keep && alembic revision --autogenerate -m "Your message"
+alembic -c keep/alembic.ini revision --autogenerate -m "Your message"
 ```
 
 Hint: make sure your models are imported at `./api/models/db/migrations/env.py` for autogenerator to pick them up.
@@ -52,6 +52,7 @@ You can run Keep from your VSCode (after cloning the repo) by adding this config
         "program": "keep/cli/cli.py",
         "console": "integratedTerminal",
         "justMyCode": false,
+        "python": "venv/bin/python",
         "args": ["--json", "api","--multi-tenant"],
         "env": {
             "PYDEVD_DISABLE_FILE_VALIDATION": "1",
@@ -72,6 +73,7 @@ You can run Keep from your VSCode (after cloning the repo) by adding this config
         "program": "scripts/simulate_alerts.py",
         "console": "integratedTerminal",
         "justMyCode": false,
+        "python": "venv/bin/python",
         "env": {
           "PYDEVD_DISABLE_FILE_VALIDATION": "1",
           "PYTHONPATH": "${workspaceFolder}/",
@@ -92,9 +94,17 @@ You can run Keep from your VSCode (after cloning the repo) by adding this config
 
 Install dependencies:
 ```
+python3.11 -m venv venv;
+source venv/bin/activate;
 pip install poetry;
 poetry install;
-cd keep-ui && npm i;
+cd keep-ui && npm i && cd ..;
+```
+
+Set frontend envs:
+```
+cp keep-ui/.env.local.example keep-ui/.env.local;
+echo "\n\n\n\nNEXTAUTH_SECRET="$(openssl rand -hex 32) >> keep-ui/.env.local;
 ```
 
 Launch Pusher ([soketi](https://soketi.app/)) container in parallel:

docs/mint.json

@@ -46,7 +46,6 @@
       "group": "Development",
       "pages": [
         "development/getting-started",
-        "development/authentication",
         "development/external-url"
       ]
     },

keep-ui/.env.local.example

@@ -1,5 +1,8 @@
 NEXTAUTH_URL=http://localhost:3000
-NEXTAUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32
+
+# Required:
+# NEXTAUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32
+
 # API
 API_URL=http://localhost:8080
 # Auth

keep-ui/.gitignore

@@ -38,3 +38,5 @@ jspm_packages
 .next
 
 .env.local
+
+app/topology/mock-topology-data.tsx

keep-ui/app/alerts/alert-associate-incident-modal.tsx

@@ -1,13 +1,14 @@
-import React, {FormEvent, useState} from "react";
-import { useSession } from "next-auth/react";
-import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";
-import { useIncidents } from "../../utils/hooks/useIncidents";
+import { Button, Divider, Select, SelectItem, Title } from "@tremor/react";
+import CreateOrUpdateIncident from "app/incidents/create-or-update-incident";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { FormEvent, useCallback, useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { getApiURL } from "../../utils/apiUrl";
+import { useIncidents, usePollIncidents } from "../../utils/hooks/useIncidents";
 import Loading from "../loading";
-import {Button, Divider, Select, SelectItem, Title} from "@tremor/react";
-import {useRouter} from "next/navigation";
-import {getApiURL} from "../../utils/apiUrl";
-import {toast} from "react-toastify";
+import { AlertDto } from "./models";
 
 interface AlertAssociateIncidentModalProps {
   isOpen: boolean;
@@ -22,19 +23,22 @@ const AlertAssociateIncidentModal = ({
   handleClose,
   alerts,
 }: AlertAssociateIncidentModalProps) => {
+  const [createIncident, setCreateIncident] = useState(false)
 
   const { data: incidents, isLoading, mutate } = useIncidents(true, 100);
+  usePollIncidents(mutate)
+
   const [selectedIncident, setSelectedIncident] = useState<string | null>(null);
   // get the token
   const { data: session } = useSession();
   const router = useRouter();
   // if this modal should not be open, do nothing
   if (!alerts) return null;
-  const handleAssociateAlerts = async (e: FormEvent) => {
-    e.preventDefault();
+
+  const associateAlertsHandler = async (incidentId: string) => {
     const apiUrl = getApiURL();
     const response = await fetch(
-      `${apiUrl}/incidents/${selectedIncident}/alerts`,
+      `${apiUrl}/incidents/${incidentId}/alerts`,
       {
         method: "POST",
         headers: {
@@ -54,6 +58,28 @@ const AlertAssociateIncidentModal = ({
     }
   }
 
+  const handleAssociateAlerts = (e: FormEvent) => {
+    e.preventDefault();
+    associateAlertsHandler(selectedIncident)
+  }
+
+  const showCreateIncidentForm = useCallback(() => setCreateIncident(true), [])
+
+  const hideCreateIncidentForm = useCallback(() => setCreateIncident(false), [])
+
+  const onIncidentCreated = useCallback((incidentId: string) => {
+    hideCreateIncidentForm()
+    handleClose()
+    associateAlertsHandler(incidentId)
+  }, [])
+
+  // reset modal state after closing
+  useEffect(() => {
+    if (!isOpen) {
+      hideCreateIncidentForm()
+      setSelectedIncident(null)
+    }
+  }, [isOpen])
 
   return (
     <Modal
@@ -64,17 +90,23 @@ const AlertAssociateIncidentModal = ({
     >
       <div className="relative bg-white p-6 rounded-lg">
         {isLoading ? (
-            <Loading />
-          ) : incidents && incidents.items.length > 0 ? (
+          <Loading />
+        ) : createIncident ? (
+          <CreateOrUpdateIncident
+            incidentToEdit={null}
+            createCallback={onIncidentCreated}
+            exitCallback={hideCreateIncidentForm}
+          />
+        ): incidents && incidents.items.length > 0 ? (
             <div className="h-full justify-center">
               <Select
                 className="my-2.5"
                 placeholder={`Select incident`}
+                value={selectedIncident}
                 onValueChange={(value) => setSelectedIncident(value)}
               >
                 {
                   incidents.items?.map((incident) => {
-
                     return (
                       <SelectItem
                         key={incident.id}
@@ -87,31 +119,50 @@ const AlertAssociateIncidentModal = ({
                 }
               </Select>
               <Divider />
-              <div className="right">
+              <div className="flex items-center justify-between gap-6">
                 <Button
+                  className="flex-1"
                   color="orange"
                   onClick={handleAssociateAlerts}
                   disabled={selectedIncident === null}
                 >
                   Associate {alerts.length} alert{alerts.length > 1 ? "s" : ""}
                 </Button>
-              </div>
 
-            </div>
-          ) : (
-            <div className="flex flex-col items-center justify-center gap-y-8 h-full">
+                <Button 
+                  className="flex-1"
+                  color="green"
+                  onClick={showCreateIncidentForm}
+                >
+                  Create a new incident
+                </Button>
+              </div>
+          </div>
+        ): (
+          <div className="flex flex-col items-center justify-center gap-y-8 h-full">
               <div className="text-center space-y-3">
                 <Title className="text-2xl">No Incidents Yet</Title>
               </div>
-              <Button
-                className="mb-10"
-                color="orange"
-                onClick={() => router.push("/incidents")}
-              >
-                Register Incident
-              </Button>
+
+              <div className="flex items-center justify-between w-full gap-6">
+                <Button
+                  className="flex-1"
+                  color="orange"
+                  onClick={() => router.push("/incidents")}
+                >
+                  Incidents page
+                </Button>
+
+                <Button
+                  className="flex-1"
+                  color="green"
+                  onClick={showCreateIncidentForm}
+                >
+                  Create a new incident
+                </Button>
+              </div>
             </div>
-          )}
+        )}
       </div>
     </Modal>
   );