Merge branch 'main' into Matvey-Kuk/moving-background-tasks-outside-of-the-server

Author: Matvey-Kuk

docs/images/appdynamics_1.png

@@ -15,18 +15,100 @@ The AppDynamics provider requires the following authentication parameter:
 - `Host`: This is the hostname of the AppDynamics instance you wish to connect to. It identifies the AppDynamics server that the API will interact with.
 
 ## Connecting with the Provider
-1. Ensure you have a AppDynamics account with the necessary [permissions](https://docs.appdynamics.com/accounts/en/cisco-appdynamics-on-premises-user-management/roles-and-permissions). The basic permissions required are `Account Owner` or `Administrator`. Alternatively you can create an account (instructions)[https://docs.appdynamics.com/accounts/en/global-account-administration/access-management/manage-user-accounts]
+1. Ensure you have a AppDynamics account with the necessary [permissions](https://docs.appdynamics.com/accounts/en/cisco-appdynamics-on-premises-user-management/roles-and-permissions). The basic permissions required are `Account Owner` or `Administrator`. Alternatively you can create an account [instructions](https://docs.appdynamics.com/accounts/en/global-account-administration/access-management/manage-user-accounts)
 
-### Basic Auth authentication
+## Provider configuration
 
-Obtain AppDynamics Username and Password:
 1. Find your account name [here](https://accounts.appdynamics.com/overview).
+2. Get the appId of the Appdynamics instance in which you wish to install the webhook into.
+3. Determine the Host [here](https://accounts.appdynamics.com/overview).
 
-OR create Access Token:
-1. Follow instructions [here](https://docs.appdynamics.com/appd/23.x/latest/en/extend-appdynamics/appdynamics-apis/api-clients)
+### Basic Auth authentication
 
-1. Determine the Host [here](https://accounts.appdynamics.com/overview).
-2. Get the appId of the Appdynamics instance in which you wish to install the webhook into.
+1. Obtain AppDynamics **Username** and **Password**
+2. Go to **Basic Auth** tab under **Authentication** section
+3. Enter **Username** and **Password**
+
+<Frame>
+  <img src="/images/appdynamics_9.png" width="1000" alt="Keep add AppDynamics Username and Password"/>
+</Frame>
+
+### Access Token authentication
+
+1. Log in to the **Controller UI** as an **Account Owner** or other roles with the **Administer users**, **groups**, **roles** permission.
+2. Go to **Administration**
+
+<Frame>
+  <img src="/images/appdynamics_1.png" width="1000" alt="AppDynamics Administration"/>
+</Frame>
+
+3. Go to **API Client** tab
+
+<Frame>
+  <img src="/images/appdynamics_2.png" width="1000" alt="AppDynamics API Client tab"/>
+</Frame>
+
+4. Click **+ Create**
+
+<Frame>
+  <img src="/images/appdynamics_3.png" width="1000" alt="Create new AppDynamics API Client"/>
+</Frame>
+
+5. Fill Client **Name** and **Description**
+6. Click **Generate Secret**
+
+<Frame>
+  <img src="/images/appdynamics_4.png" width="1000" alt="AppDynamics generate API Client Secret"/>
+</Frame>
+
+<Tip>
+  This API Client secret is not an authentication token yet
+</Tip>
+
+7. Add **Account Owner** and/or **Administrator** roles
+
+<Frame>
+  <img src="/images/appdynamics_5.png" width="1000" alt="AppDynamics add API Client roles"/>
+</Frame>
+
+8. Click **Save**
+
+<Frame>
+  <img src="/images/appdynamics_6.png" width="1000" alt="AppDynamics save API Client"/>
+</Frame>
+
+9. Click **Generate Temporary Token**
+
+<Frame>
+  <img src="/images/appdynamics_7.png" width="1000" alt="AppDynamics Generate API Client Temporary Access Token"/>
+</Frame>
+
+<Tip>
+  This token is not persistent, but since Keep uses it just once to install Webhook, we will use it without oAuth
+</Tip>
+
+10. Click **Save** one again
+<Warning>
+  This is important. Otherwise generated token will not be saved and authentication will fail
+</Warning>
+11. Copy generated token
+
+<Frame>
+  <img src="/images/appdynamics_8.png" width="1000" alt="AppDynamics copy API Client Temporary Access Token"/>
+</Frame>
+
+12. Go to **Access Token** tab under **Authentication** section
+
+<Frame>
+  <img src="/images/appdynamics_10.png" width="1000" alt="Keep add AppDynamics Access Token"/>
+</Frame>
+
+13. Enter Access Token
+
+## Connecting provider
+
+1. Ensure **Install webhook** is checked
+2. Click **Connect**
 
 ## Webhook Integration Modifications
 

docs/images/appdynamics_10.png

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

docs/images/appdynamics_2.png

@@ -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;
-}
+}

docs/images/appdynamics_3.png

@@ -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>

docs/images/appdynamics_4.png

@@ -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";

docs/images/appdynamics_5.png

@@ -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";
 

docs/images/appdynamics_6.png

@@ -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";

docs/images/appdynamics_7.png

@@ -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;
+}