feat(ui): nextauth5 (#2563)

keep-ui/app/(keep)/[...not-found]/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { notFound } from "next/navigation";
+
+// https://github.com/vercel/next.js/discussions/50034
+export default function NotFoundDummy() {
+  notFound();
+}

keep-ui/app/ai/model.ts → keep-ui/app/(keep)/ai/model.ts

@@ -3,9 +3,9 @@ export interface AIStats {
   incidents_count: number;
   first_alert_datetime?: Date;
   is_mining_enabled: boolean;
-  algorithm_verbose_name: string
+  algorithm_verbose_name: string;
 }
 
 export interface AILogs {
   log: string;
-}
+}

keep-ui/app/alerts/ThemeSelection.tsx → keep-ui/app/(keep)/alerts/ThemeSelection.tsx

@@ -1,43 +1,54 @@
-import React, { useState, Fragment, useRef, FormEvent } from 'react';
-import { Popover } from '@headlessui/react';
-import { Button, Tab, TabGroup, TabList, TabPanels, TabPanel } from "@tremor/react";
-import { IoColorPaletteOutline } from 'react-icons/io5';
+import React, { useState, Fragment, useRef, FormEvent } from "react";
+import { Popover } from "@headlessui/react";
+import {
+  Button,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanels,
+  TabPanel,
+} from "@tremor/react";
+import { IoColorPaletteOutline } from "react-icons/io5";
 import { FloatingArrow, arrow, offset, useFloating } from "@floating-ui/react";
 
 const predefinedThemes = {
   Transparent: {
-    critical: 'bg-white',
-    high: 'bg-white',
-    warning: 'bg-white',
-    low: 'bg-white',
-    info: 'bg-white'
+    critical: "bg-white",
+    high: "bg-white",
+    warning: "bg-white",
+    low: "bg-white",
+    info: "bg-white",
   },
   Keep: {
-    critical: 'bg-orange-400', // Highest opacity for critical
-    high: 'bg-orange-300',
-    warning: 'bg-orange-200',
-    low: 'bg-orange-100',
-    info: 'bg-orange-50' // Lowest opacity for info
+    critical: "bg-orange-400", // Highest opacity for critical
+    high: "bg-orange-300",
+    warning: "bg-orange-200",
+    low: "bg-orange-100",
+    info: "bg-orange-50", // Lowest opacity for info
   },
   Basic: {
-    critical: 'bg-red-200',
-    high: 'bg-orange-200',
-    warning: 'bg-yellow-200',
-    low: 'bg-green-200',
-    info: 'bg-blue-200'
-  }
+    critical: "bg-red-200",
+    high: "bg-orange-200",
+    warning: "bg-yellow-200",
+    low: "bg-green-200",
+    info: "bg-blue-200",
+  },
 };
 
 const themeKeyMapping = {
-  0: 'Transparent',
-  1: 'Keep',
-  2: 'Basic'
+  0: "Transparent",
+  1: "Keep",
+  2: "Basic",
 };
 type ThemeName = keyof typeof predefinedThemes;
 
-export const ThemeSelection = ({ onThemeChange }: { onThemeChange: (theme: any) => void }) => {
+export const ThemeSelection = ({
+  onThemeChange,
+}: {
+  onThemeChange: (theme: any) => void;
+}) => {
   const arrowRef = useRef(null);
-  const [selectedTab, setSelectedTab] = useState<ThemeName>('Transparent');
+  const [selectedTab, setSelectedTab] = useState<ThemeName>("Transparent");
 
   const { refs, floatingStyles, context } = useFloating({
     strategy: "fixed",
@@ -50,22 +61,17 @@ export const ThemeSelection = ({ onThemeChange }: { onThemeChange: (theme: any)
     handleApplyTheme(themeIndex as 0 | 1 | 2);
   };
 
-
-
-
   const handleApplyTheme = (themeKey: keyof typeof themeKeyMapping) => {
     const themeName = themeKeyMapping[themeKey];
     setSelectedTab(themeName as ThemeName);
-};
-
-
+  };
 
   const onApplyTheme = (close: () => void) => {
     // themeName is now assured to be a key of predefinedThemes
     const themeName: ThemeName = selectedTab;
     const newTheme = predefinedThemes[themeName]; // This should now be error-free
     onThemeChange(newTheme);
-    setSelectedTab('Transparent'); // Assuming 'Transparent' is a valid key
+    setSelectedTab("Transparent"); // Assuming 'Transparent' is a valid key
     close(); // Close the popover
   };
 
@@ -85,7 +91,7 @@ export const ThemeSelection = ({ onThemeChange }: { onThemeChange: (theme: any)
           <Popover.Panel
             className="bg-white z-30 p-4 rounded-sm"
             ref={refs.setFloating}
-            style={{ ...floatingStyles, minWidth: '250px' }} // Adjust width here
+            style={{ ...floatingStyles, minWidth: "250px" }} // Adjust width here
           >
             <FloatingArrow
               className="fill-white [&>path:last-of-type]:stroke-white"
@@ -100,19 +106,35 @@ export const ThemeSelection = ({ onThemeChange }: { onThemeChange: (theme: any)
                 <Tab>Basic</Tab>
               </TabList>
               <TabPanels>
-                {Object.keys(predefinedThemes).map(themeName => (
+                {Object.keys(predefinedThemes).map((themeName) => (
                   <TabPanel key={themeName}>
-                    {Object.entries(predefinedThemes[themeName as keyof typeof predefinedThemes]).map(([severity, color]) => (
-                      <div key={severity} className="flex justify-between items-center my-2">
-                        <span>{severity.charAt(0).toUpperCase() + severity.slice(1).toLowerCase()}</span>
-                        <div className={`w-6 h-6 rounded-full border border-gray-400 ${color}`}></div>
+                    {Object.entries(
+                      predefinedThemes[
+                        themeName as keyof typeof predefinedThemes
+                      ]
+                    ).map(([severity, color]) => (
+                      <div
+                        key={severity}
+                        className="flex justify-between items-center my-2"
+                      >
+                        <span>
+                          {severity.charAt(0).toUpperCase() +
+                            severity.slice(1).toLowerCase()}
+                        </span>
+                        <div
+                          className={`w-6 h-6 rounded-full border border-gray-400 ${color}`}
+                        ></div>
                       </div>
                     ))}
                   </TabPanel>
                 ))}
               </TabPanels>
             </TabGroup>
-             <Button className="mt-5" color="orange" onClick={() => onApplyTheme(close)}>
+            <Button
+              className="mt-5"
+              color="orange"
+              onClick={() => onApplyTheme(close)}
+            >
               Apply theme
             </Button>
           </Popover.Panel>

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

@@ -3,7 +3,7 @@ import Select, { components } from "react-select";
 import { Button, TextInput, Text } from "@tremor/react";
 import { PlusIcon } from "@heroicons/react/20/solid";
 import { useForm, Controller, SubmitHandler } from "react-hook-form";
-import { Providers } from "./../providers/providers";
+import { Providers } from "../providers/providers";
 import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { AlertDto } from "./models";

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

@@ -6,8 +6,11 @@ import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydrated
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useIncidents, usePollIncidents } from "../../utils/hooks/useIncidents";
-import Loading from "../loading";
+import {
+  useIncidents,
+  usePollIncidents,
+} from "../../../utils/hooks/useIncidents";
+import Loading from "@/app/(keep)/loading";
 import { AlertDto } from "./models";
 import { getIncidentName } from "@/entities/incidents/lib/utils";
 

keep-ui/app/alerts/alert-create-incident-ai-modal.tsx → keep-ui/app/(keep)/alerts/alert-create-incident-ai-modal.tsx

@@ -3,7 +3,7 @@ import Modal from "@/components/ui/Modal";
 import { Callout, Button, Title, Card } from "@tremor/react";
 import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { toast } from "react-toastify";
-import Loading from "../loading";
+import Loading from "@/app/(keep)/loading";
 import { AlertDto } from "./models";
 import { IncidentDto, IncidentCandidateDto } from "@/entities/incidents/model";
 import { useApiUrl } from "utils/hooks/useConfig";

keep-ui/app/(keep)/alerts/alert-dismiss-modal.css

@@ -0,0 +1,37 @@
+.react-datepicker {
+  font-size: 14px !important;
+  color: #070707 !important;
+}
+
+.react-datepicker__header {
+  background-color: white !important;
+  padding-top: 0px !important;
+  border: none !important;
+}
+
+.react-datepicker__day-name {
+  color: #c7c7c7 !important;
+  font-size: 14px !important;
+}
+
+.react-datepicker__day {
+  color: black !important;
+  font-size: 13px !important;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--keyboard-selected {
+  border-radius: 25px !important;
+  background: orange !important;
+  color: white !important;
+}
+
+.react-datepicker__time-list-item--selected {
+  background: orange !important;
+  color: white !important;
+}
+
+.react-datepicker__day--disabled,
+.react-datepicker__time-list-item--disabled {
+  color: #c7c7c7 !important;
+}

keep-ui/app/alerts/alert-history-charts.tsx → keep-ui/app/(keep)/alerts/alert-history-charts.tsx

@@ -1,5 +1,5 @@
 import { AreaChart } from "@tremor/react";
-import Loading from "app/loading";
+import Loading from "@/app/(keep)/loading";
 import { AlertDto } from "./models";
 import { calculateFatigue } from "utils/fatigue";
 
@@ -36,23 +36,26 @@ export default function AlertHistoryCharts({
     timeUnit = "Hours";
   }
 
-  const rawChartData = [...alerts].reverse().reduce((prev, curr) => {
-    const date = curr.lastReceived;
-    const dateKey = getDateKey(date, timeUnit);
-    if (!prev[dateKey]) {
-      prev[dateKey] = {
-        [curr.status]: 1,
-      };
-    } else {
-      prev[dateKey][curr.status]
-        ? (prev[dateKey][curr.status] += 1)
-        : (prev[dateKey][curr.status] = 1);
-    }
-    if (categoriesByStatus.includes(curr.status) === false) {
-      categoriesByStatus.push(curr.status);
-    }
-    return prev;
-  }, {} as { [date: string]: any });
+  const rawChartData = [...alerts].reverse().reduce(
+    (prev, curr) => {
+      const date = curr.lastReceived;
+      const dateKey = getDateKey(date, timeUnit);
+      if (!prev[dateKey]) {
+        prev[dateKey] = {
+          [curr.status]: 1,
+        };
+      } else {
+        prev[dateKey][curr.status]
+          ? (prev[dateKey][curr.status] += 1)
+          : (prev[dateKey][curr.status] = 1);
+      }
+      if (categoriesByStatus.includes(curr.status) === false) {
+        categoriesByStatus.push(curr.status);
+      }
+      return prev;
+    },
+    {} as { [date: string]: any }
+  );
 
   if (categoriesByStatus.includes("Fatigueness") === false) {
     categoriesByStatus.push("Fatigueness");

keep-ui/app/alerts/alert-menu.tsx → keep-ui/app/(keep)/alerts/alert-menu.tsx

@@ -15,7 +15,7 @@ import { IoNotificationsOffOutline } from "react-icons/io5";
 import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import Link from "next/link";
-import { ProviderMethod } from "app/providers/providers";
+import { ProviderMethod } from "@/app/(keep)/providers/providers";
 import { AlertDto } from "./models";
 import { useFloating } from "@floating-ui/react";
 import { useProviders } from "utils/hooks/useProviders";

keep-ui/app/alerts/alert-method-modal.tsx → keep-ui/app/(keep)/alerts/alert-method-modal.tsx

@@ -4,11 +4,11 @@ import {
   Provider,
   ProviderMethod,
   ProviderMethodParam,
-} from "app/providers/providers";
+} from "@/app/(keep)/providers/providers";
 import { getSession } from "next-auth/react";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
-import Loading from "app/loading";
+import Loading from "@/app/(keep)/loading";
 import {
   Button,
   TextInput,

keep-ui/app/alerts/alert-name.tsx → keep-ui/app/(keep)/alerts/alert-name.tsx

@@ -139,15 +139,15 @@ export default function AlertName({
               relevantWorkflowExecution.workflow_status === "success"
                 ? "green"
                 : relevantWorkflowExecution.workflow_status === "error"
-                  ? "red"
-                  : "gray"
+                ? "red"
+                : "gray"
             }`}
             tooltip={`${
               relevantWorkflowExecution.workflow_status === "success"
                 ? "Last workflow executed successfully"
                 : relevantWorkflowExecution.workflow_status === "error"
-                  ? "Last workflow execution failed"
-                  : undefined
+                ? "Last workflow execution failed"
+                : undefined
             }`}
             onClick={() => handleWorkflowClick(relevantWorkflowExecution)}
             className="ml-1 cursor-pointer"

keep-ui/app/alerts/alert-quality-table.tsx → keep-ui/app/(keep)/alerts/alert-quality-table.tsx

@@ -10,7 +10,7 @@ import React, {
 import { GenericTable } from "@/components/table/GenericTable";
 import { useAlertQualityMetrics } from "utils/hooks/useAlertQuality";
 import { useProviders } from "utils/hooks/useProviders";
-import { Provider, ProvidersResponse } from "app/providers/providers";
+import { Provider, ProvidersResponse } from "@/app/(keep)/providers/providers";
 import { TabGroup, TabList, Tab, Callout } from "@tremor/react";
 import { GenericFilters } from "@/components/filters/GenericFilters";
 import { useSearchParams } from "next/navigation";
@@ -171,7 +171,9 @@ const QualityTable = ({
         id: "alertsCorrelatedToIncidentsPercentage",
         header: "% of Alerts Correlated to Incidents",
         cell: ({ row }) => {
-          return `${row.original.alertsCorrelatedToIncidentsPercentage.toFixed(2)}%`;
+          return `${row.original.alertsCorrelatedToIncidentsPercentage.toFixed(
+            2
+          )}%`;
         },
       }),
     ] as DisplayColumnDef<FinalAlertQuality>[];
@@ -341,7 +343,6 @@ const AlertQuality = ({
     isDashBoard ? (fieldsValue as string | string[]) : ""
   );
 
-
   if (error) {
     return (
       <Callout

keep-ui/app/alerts/alert-sidebar.tsx → keep-ui/app/(keep)/alerts/alert-sidebar.tsx

@@ -7,7 +7,7 @@ import { IoMdClose } from "react-icons/io";
 import AlertTimeline from "./alert-timeline";
 import { useAlerts } from "utils/hooks/useAlerts";
 import { TopologyMap } from "../topology/ui/map";
-import { TopologySearchProvider } from "@/app/topology/TopologySearchContext";
+import { TopologySearchProvider } from "@/app/(keep)/topology/TopologySearchContext";
 
 type AlertSidebarProps = {
   isOpen: boolean;

keep-ui/app/alerts/alert-tab-modal.tsx → keep-ui/app/(keep)/alerts/alert-tab-modal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import Modal from "@/components/ui/Modal";
 import { Button, TextInput } from "@tremor/react";
-import { AlertsRulesBuilder } from "app/alerts/alerts-rules-builder";
+import { AlertsRulesBuilder } from "@/app/(keep)/alerts/alerts-rules-builder";
 import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 
@@ -114,8 +114,8 @@ const AlertTabModal = ({
             !newTabName
               ? "Tab name is required"
               : !newTabFilter
-                ? "Tab filter is required (notice you need to click 'enter' to apply the filter)"
-                : ""
+              ? "Tab filter is required (notice you need to click 'enter' to apply the filter)"
+              : ""
           }
         >
           Add Tab