fix: initial try to save incidents 🦸🏼

keep-ui/app/incidents/[id]/incident-alert-menu.tsx

@@ -1,10 +1,10 @@
-import { Icon } from "@tremor/react";
 import { AlertDto } from "app/alerts/models";
 import { useSession } from "next-auth/react";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { useIncidentAlerts } from "utils/hooks/useIncidents";
-import { LinkSlashIcon } from "@heroicons/react/24/outline";
+import { Icon } from "@tremor/react";
+import LinkSlashIcon from "@heroicons/react/24/outline/LinkSlashIcon";
 
 interface Props {
   incidentId: string;

keep-ui/app/incidents/incident-table-component.tsx

@@ -51,8 +51,8 @@ const SortableHeaderCell = ({ header, children }: SortableHeaderCellProps) => {
                 column.getNextSortingOrder() === "asc"
                   ? "Sort ascending"
                   : column.getNextSortingOrder() === "desc"
-                    ? "Sort descending"
-                    : "Clear sort"
+                  ? "Sort descending"
+                  : "Clear sort"
               }
               icon={
                 column.getIsSorted()
@@ -77,10 +77,10 @@ export const IncidentTableComponent = (props: Props) => {
   return (
     <Table>
       <TableHead>
-        {table.getHeaderGroups().map((headerGroup) => (
+        {table.getHeaderGroups().map((headerGroup, index) => (
           <TableRow
             className="border-b border-tremor-border dark:border-dark-tremor-border"
-            key={headerGroup.id}
+            key={`header-${index}`}
           >
             {headerGroup.headers.map((header) => {
               return (

keep-ui/utils/hooks/usePusher.ts

@@ -13,21 +13,16 @@ export const useWebsocket = () => {
   const { data: session } = useSession();
   let channelName = `private-${session?.tenantId}`;
 
-  console.log("useWebsocket: Initializing with config:", configData);
-  console.log("useWebsocket: Session:", session);
-
   if (
     PUSHER === null &&
     configData !== undefined &&
     session !== undefined &&
     configData.PUSHER_DISABLED === false
   ) {
     channelName = `private-${session?.tenantId}`;
-    console.log("useWebsocket: Creating new Pusher instance");
     try {
       const isRelativeHost =
         configData.PUSHER_HOST && !configData.PUSHER_HOST.includes("://");
-      console.log("useWebsocket: isRelativeHost:", isRelativeHost);
       PUSHER = new Pusher(configData.PUSHER_APP_KEY, {
         wsHost: isRelativeHost
           ? window.location.hostname
@@ -50,74 +45,36 @@ export const useWebsocket = () => {
           },
         },
       });
-      console.log("useWebsocket: Pusher instance created successfully");
-
-      PUSHER.connection.bind("connected", () => {
-        console.log("useWebsocket: Pusher connected successfully");
-      });
 
-      PUSHER.connection.bind("error", (err: any) => {
-        console.error("useWebsocket: Pusher connection error:", err);
-      });
-
-      PUSHER.subscribe(channelName)
-        .bind("pusher:subscription_succeeded", () => {
-          console.log(
-            `useWebsocket: Successfully subscribed to ${channelName}`
-          );
-        })
-        .bind("pusher:subscription_error", (err: any) => {
-          console.error(
-            `useWebsocket: Subscription error for ${channelName}:`,
-            err
-          );
-        });
+      PUSHER.subscribe(channelName);
     } catch (error) {
       console.error("useWebsocket: Error creating Pusher instance:", error);
     }
   }
 
   const subscribe = useCallback(() => {
-    console.log(`useWebsocket: Subscribing to ${channelName}`);
     return PUSHER?.subscribe(channelName);
   }, [channelName]);
 
   const unsubscribe = useCallback(() => {
-    console.log(`useWebsocket: Unsubscribing from ${channelName}`);
     return PUSHER?.unsubscribe(channelName);
   }, [channelName]);
 
   const bind = useCallback(
     (event: any, callback: any) => {
-      console.log(`useWebsocket: Binding to event ${event} on ${channelName}`);
       return PUSHER?.channel(channelName)?.bind(event, callback);
     },
     [channelName]
   );
 
   const unbind = useCallback(
     (event: any, callback: any) => {
-      console.log(
-        `useWebsocket: Unbinding from event ${event} on ${channelName}`
-      );
       return PUSHER?.channel(channelName)?.unbind(event, callback);
     },
     [channelName]
   );
 
-  const trigger = useCallback(
-    (event: any, data: any) => {
-      console.log(
-        `useWebsocket: Triggering event ${event} on ${channelName} with data:`,
-        data
-      );
-      return PUSHER?.channel(channelName).trigger(event, data);
-    },
-    [channelName]
-  );
-
   const channel = useCallback(() => {
-    console.log(`useWebsocket: Getting channel ${channelName}`);
     return PUSHER?.channel(channelName);
   }, [channelName]);
 
@@ -126,7 +83,6 @@ export const useWebsocket = () => {
     unsubscribe,
     bind,
     unbind,
-    trigger,
     channel,
   };
 };
@@ -136,40 +92,25 @@ export const useAlertPolling = () => {
   const [pollAlerts, setPollAlerts] = useState(0);
   const lastPollTimeRef = useRef(0);
 
-  console.log("useAlertPolling: Initializing");
-
   const handleIncoming = useCallback((incoming: any) => {
-    console.log("useAlertPolling: Received incoming data:", incoming);
     const currentTime = Date.now();
     const timeSinceLastPoll = currentTime - lastPollTimeRef.current;
 
-    console.log(
-      `useAlertPolling: Time since last poll: ${timeSinceLastPoll}ms`
-    );
-
     if (timeSinceLastPoll < POLLING_INTERVAL) {
-      console.log("useAlertPolling: Ignoring poll due to short interval");
       setPollAlerts(0);
     } else {
-      console.log("useAlertPolling: Updating poll alerts");
       lastPollTimeRef.current = currentTime;
       const newPollValue = Math.floor(Math.random() * 10000);
-      console.log(`useAlertPolling: New poll value: ${newPollValue}`);
       setPollAlerts(newPollValue);
     }
   }, []);
 
   useEffect(() => {
-    console.log("useAlertPolling: Setting up event listener for 'poll-alerts'");
     bind("poll-alerts", handleIncoming);
     return () => {
-      console.log(
-        "useAlertPolling: Cleaning up event listener for 'poll-alerts'"
-      );
       unbind("poll-alerts", handleIncoming);
     };
   }, [bind, unbind, handleIncoming]);
 
-  console.log("useAlertPolling: Current poll alerts value:", pollAlerts);
   return { data: pollAlerts };
 };