refactor: use nginx instead of rewrite rules (#2253)

keep-ui/app/ai/ai.tsx

@@ -2,7 +2,7 @@
 import { Card, List, ListItem, Title, Subtitle } from "@tremor/react";
 import { useAIStats, usePollAILogs } from "utils/hooks/useAI";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
 import { useEffect, useState, useRef, FormEvent } from "react";
 import { AILogs } from "./model";
@@ -15,6 +15,7 @@ export default function Ai() {
   const [newText, setNewText] = useState("Mine incidents");
   const [animate, setAnimate] = useState(false);
   const onlyOnce = useRef(false);
+  const apiUrl = useApiUrl();
 
   const mutateAILogs = (logs: AILogs) => {
     setBasicAlgorithmLog(logs.log);
@@ -42,7 +43,6 @@ export default function Ai() {
     e.preventDefault();
     setAnimate(true);
     setNewText("Mining 🚀🚀🚀 ...");
-    const apiUrl = getApiURL();
     const response = await fetch(`${apiUrl}/incidents/mine`, {
       method: "POST",
       headers: {

keep-ui/app/alerts/ViewAlertModal.tsx

@@ -1,27 +1,32 @@
 import { AlertDto } from "./models"; // Adjust the import path as needed
 import Modal from "@/components/ui/Modal"; // Ensure this path matches your project structure
-import {Button, Icon, Switch, Text} from "@tremor/react";
+import { Button, Icon, Switch, Text } from "@tremor/react";
 import { toast } from "react-toastify";
-import { getApiURL } from "../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import "./ViewAlertModal.css";
-import React, {useState} from "react";
+import React, { useState } from "react";
 
 interface ViewAlertModalProps {
   alert: AlertDto | null | undefined;
   handleClose: () => void;
   mutate: () => void;
 }
 
-const objectToJSONLine = (obj: any) =>  {
+const objectToJSONLine = (obj: any) => {
   return JSON.stringify(obj, null, 2).slice(2, -2);
-}
+};
 
-export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({ alert, handleClose, mutate}) => {
+export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({
+  alert,
+  handleClose,
+  mutate,
+}) => {
   const isOpen = !!alert;
   const [showHighlightedOnly, setShowHighlightedOnly] = useState(false);
-  const {data: session} = useSession();
+  const { data: session } = useSession();
+  const apiUrl = useApiUrl();
 
   const unEnrichAlert = async (key: string) => {
     if (confirm(`Are you sure you want to un-enrich ${key}?`)) {
@@ -30,7 +35,7 @@ export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({ alert, handleClo
           enrichments: [key],
           fingerprint: alert!.fingerprint,
         };
-        const response = await fetch(`${getApiURL()}/alerts/unenrich`, {
+        const response = await fetch(`${apiUrl}/alerts/unenrich`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -52,35 +57,46 @@ export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({ alert, handleClo
         toast.error("An unexpected error occurred");
       }
     }
-  }
+  };
 
   const highlightKeys = (json: any, keys: string[]) => {
-
     const lines = Object.keys(json).length;
-    const isLast = (index: number) => index == lines - 1
+    const isLast = (index: number) => index == lines - 1;
 
     return Object.keys(json).map((key: string, index: number) => {
       if (keys.includes(key)) {
-        return <p key={key} className="text-green-600 cursor-pointer line-container" onClick={() => unEnrichAlert(key)}>
-          <span className="un-enrich-icon">
-            <Icon
-              icon={XMarkIcon}
-              tooltip={`Click to un-enrich ${key}`}
-              size="xs"
-              color="red"
-              className="cursor-pointer px-0 py-0"
-              variant="outlined"
-            />
-          </span>
-          {objectToJSONLine({[key]: json[key]})}{isLast(index) ? null : ","}
-        </p>
+        return (
+          <p
+            key={key}
+            className="text-green-600 cursor-pointer line-container"
+            onClick={() => unEnrichAlert(key)}
+          >
+            <span className="un-enrich-icon">
+              <Icon
+                icon={XMarkIcon}
+                tooltip={`Click to un-enrich ${key}`}
+                size="xs"
+                color="red"
+                className="cursor-pointer px-0 py-0"
+                variant="outlined"
+              />
+            </span>
+            {objectToJSONLine({ [key]: json[key] })}
+            {isLast(index) ? null : ","}
+          </p>
+        );
       } else {
         if (!showHighlightedOnly || keys.length == 0) {
-          return <p key={key}>{objectToJSONLine({[key]: json[key]})}{isLast(index) ? null : ","}</p>
+          return (
+            <p key={key}>
+              {objectToJSONLine({ [key]: json[key] })}
+              {isLast(index) ? null : ","}
+            </p>
+          );
         }
       }
-    })
-  }
+    });
+  };
 
   const handleCopy = async () => {
     if (alert) {
@@ -94,23 +110,31 @@ export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({ alert, handleClo
   };
 
   return (
-    <Modal onClose={handleClose} isOpen={isOpen} className="overflow-visible max-w-fit">
+    <Modal
+      onClose={handleClose}
+      isOpen={isOpen}
+      className="overflow-visible max-w-fit"
+    >
       <div className="flex justify-between items-center mb-4 min-w-full">
         <h2 className="text-lg font-semibold">Alert Details</h2>
-        <div className="flex gap-x-2"> {/* Adjust gap as needed */}
+        <div className="flex gap-x-2">
+          {" "}
+          {/* Adjust gap as needed */}
           <div className="placeholder-resizing min-w-48"></div>
           <div className="flex items-center space-x-2">
             <Switch
-            color="orange"
-            id="showHighlightedOnly"
-            checked={showHighlightedOnly}
-            onChange={() => setShowHighlightedOnly(!showHighlightedOnly)}
-          />
-            <label htmlFor="showHighlightedOnly" className="text-sm text-gray-500">
+              color="orange"
+              id="showHighlightedOnly"
+              checked={showHighlightedOnly}
+              onChange={() => setShowHighlightedOnly(!showHighlightedOnly)}
+            />
+            <label
+              htmlFor="showHighlightedOnly"
+              className="text-sm text-gray-500"
+            >
               <Text>Enriched Fields Only</Text>
             </label>
           </div>
-
           <Button onClick={handleCopy} color="orange">
             Copy to Clipboard
           </Button>

keep-ui/app/alerts/alert-actions.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button } from "@tremor/react";
 import { getSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { AlertDto } from "./models";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { toast } from "react-toastify";
@@ -23,14 +23,16 @@ export default function AlertActions({
   alerts,
   clearRowSelection,
   setDismissModalAlert,
-  mutateAlerts
+  mutateAlerts,
 }: Props) {
   const router = useRouter();
   const { useAllPresets } = usePresets();
+  const apiUrl = useApiUrl();
   const { mutate: presetsMutator } = useAllPresets({
     revalidateOnFocus: false,
   });
-  const [isIncidentSelectorOpen, setIsIncidentSelectorOpen] = useState<boolean>(false);
+  const [isIncidentSelectorOpen, setIsIncidentSelectorOpen] =
+    useState<boolean>(false);
 
   const selectedAlerts = alerts.filter((_alert, index) =>
     selectedRowIds.includes(index.toString())
@@ -54,7 +56,6 @@ export default function AlertActions({
       );
       const options = [{ value: formattedCel, label: "CEL" }];
       const session = await getSession();
-      const apiUrl = getApiURL();
       const response = await fetch(`${apiUrl}/preset`, {
         method: "POST",
         headers: {
@@ -82,18 +83,18 @@ export default function AlertActions({
 
   const showIncidentSelector = () => {
     setIsIncidentSelectorOpen(true);
-  }
+  };
   const hideIncidentSelector = () => {
     setIsIncidentSelectorOpen(false);
-  }
+  };
 
   const handleSuccessfulAlertsAssociation = () => {
     hideIncidentSelector();
     clearRowSelection();
     if (mutateAlerts) {
       mutateAlerts();
     }
-  }
+  };
 
   return (
     <div className="w-full flex justify-end items-center">
@@ -130,10 +131,11 @@ export default function AlertActions({
         Associate with incident
       </Button>
       <AlertAssociateIncidentModal
-          isOpen={isIncidentSelectorOpen}
-          alerts={selectedAlerts}
-          handleSuccess={handleSuccessfulAlertsAssociation}
-          handleClose={hideIncidentSelector}/>
+        isOpen={isIncidentSelectorOpen}
+        alerts={selectedAlerts}
+        handleSuccess={handleSuccessfulAlertsAssociation}
+        handleClose={hideIncidentSelector}
+      />
     </div>
   );
 }

keep-ui/app/alerts/alert-assign-ticket-modal.tsx

@@ -5,7 +5,7 @@ import { PlusIcon } from "@heroicons/react/20/solid";
 import { useForm, Controller, SubmitHandler } from "react-hook-form";
 import { Providers } from "./../providers/providers";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";
 
@@ -45,6 +45,7 @@ const AlertAssignTicketModal = ({
   } = useForm<FormData>();
   // get the token
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
 
   // if this modal should not be open, do nothing
   if (!alert) return null;
@@ -61,7 +62,7 @@ const AlertAssignTicketModal = ({
         fingerprint: alert.fingerprint,
       };
 
-      const response = await fetch(`${getApiURL()}/alerts/enrich`, {
+      const response = await fetch(`${apiUrl}/alerts/enrich`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -225,18 +226,14 @@ const AlertAssignTicketModal = ({
             </div>
             <div className="mt-6 flex gap-2">
               <Button color="orange" type="submit">
-                <Text>
-                  Assign Ticket
-                </Text>
+                <Text>Assign Ticket</Text>
               </Button>
               <Button
                 onClick={handleClose}
                 variant="secondary"
                 className="border border-orange-500 text-orange-500"
               >
-                <Text>
-                  Cancel
-                </Text>
+                <Text>Cancel</Text>
               </Button>
             </div>
           </form>

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

@@ -6,7 +6,7 @@ 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 { useApiUrl } from "utils/hooks/useConfig";
 import { useIncidents, usePollIncidents } from "../../utils/hooks/useIncidents";
 import Loading from "../loading";
 import { AlertDto } from "./models";
@@ -34,10 +34,10 @@ const AlertAssociateIncidentModal = ({
   >();
   // get the token
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
   const router = useRouter();
 
   const associateAlertsHandler = async (incidentId: string) => {
-    const apiUrl = getApiURL();
     const response = await fetch(`${apiUrl}/incidents/${incidentId}/alerts`, {
       method: "POST",
       headers: {

keep-ui/app/alerts/alert-change-status-modal.tsx

@@ -8,7 +8,7 @@ import Select, {
 } from "react-select";
 import { useState } from "react";
 import { AlertDto, Status } from "./models";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { toast } from "react-toastify";
 import {
@@ -79,6 +79,7 @@ export default function AlertChangeStatusModal({
   const { useAllPresets } = usePresets();
   const { mutate: presetsMutator } = useAllPresets();
   const { useAllAlerts } = useAlerts();
+  const apiUrl = useApiUrl();
   const { mutate: alertsMutator } = useAllAlerts(presetName, {
     revalidateOnMount: false,
   });
@@ -109,23 +110,26 @@ export default function AlertChangeStatusModal({
     }
 
     try {
-      const response = await fetch(`${getApiURL()}/alerts/enrich?dispose_on_new_alert=true`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${session?.accessToken}`,
-        },
-        body: JSON.stringify({
-          enrichments: {
-            status: selectedStatus,
-            ...(selectedStatus !== Status.Suppressed && {
-              dismissed: false,
-              dismissUntil: "",
-            }),
+      const response = await fetch(
+        `${apiUrl}/alerts/enrich?dispose_on_new_alert=true`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${session?.accessToken}`,
           },
-          fingerprint: alert.fingerprint,
-        }),
-      });
+          body: JSON.stringify({
+            enrichments: {
+              status: selectedStatus,
+              ...(selectedStatus !== Status.Suppressed && {
+                dismissed: false,
+                dismissUntil: "",
+              }),
+            },
+            fingerprint: alert.fingerprint,
+          }),
+        }
+      );
 
       if (response.ok) {
         toast.success("Alert status changed successfully!");