feat: make providers page easier to navigate

keep-ui/app/(keep)/providers/components/providers-categories/index.ts

@@ -0,0 +1 @@
+export { ProvidersCategories } from "./providers-categories";

keep-ui/app/(keep)/providers/components/providers-categories/providers-categories.tsx

@@ -0,0 +1,53 @@
+import { TProviderCategory } from "@/app/(keep)/providers/providers";
+import { Badge } from "@tremor/react";
+import { useFilterContext } from "../../filter-context";
+
+export const ProvidersCategories = () => {
+  const { providersSelectedCategories, setProvidersSelectedCategories } =
+    useFilterContext();
+
+  const categories: TProviderCategory[] = [
+    "Monitoring",
+    "Incident Management",
+    "Cloud Infrastructure",
+    "Ticketing",
+    "Developer Tools",
+    "Database",
+    "Identity and Access Management",
+    "Security",
+    "Collaboration",
+    "CRM",
+    "Queues",
+    "Coming Soon",
+    "Others",
+  ];
+
+  const toggleCategory = (category: TProviderCategory) => {
+    setProvidersSelectedCategories((prev) =>
+      prev.includes(category)
+        ? prev.filter((c) => c !== category)
+        : [...prev, category]
+    );
+  };
+
+  return (
+    <div className="w-full flex flex-wrap justify-start gap-2 mt-2.5">
+      {categories.map((category) => (
+        <Badge
+          color={
+            providersSelectedCategories.includes(category) ? "orange" : "slate"
+          }
+          className={`rounded-full ${
+            providersSelectedCategories.includes(category)
+              ? "shadow-inner"
+              : "hover:shadow-inner"
+          } cursor-pointer`}
+          key={category}
+          onClick={() => toggleCategory(category)}
+        >
+          {category}
+        </Badge>
+      ))}
+    </div>
+  );
+};

keep-ui/app/(keep)/providers/components/providers-filter-by-label/providers-filter-by-label.tsx

@@ -18,8 +18,8 @@ export const ProvidersFilterByLabel: FC = (props) => {
     <MultiSelect
       onValueChange={headerSelect}
       value={providersSelectedTags}
-      placeholder="Filter by label..."
-      className="w-full ml-2.5"
+      placeholder="All Labels"
+      className="w-64 ml-2.5"
       icon={TagIcon}
     >
       {options.map(([value, label]) => (

keep-ui/app/(keep)/providers/components/providers-search/providers-search.tsx

@@ -16,6 +16,7 @@ export const ProvidersSearch: FC = () => {
       id="search-providers"
       icon={MagnifyingGlassIcon}
       placeholder="Filter providers..."
+      className="w-full"
       value={providersSearchString}
       onChange={handleChange}
     />

keep-ui/app/(keep)/providers/filter-context/filter-context.tsx

@@ -2,7 +2,7 @@ import { createContext, useState, FC, PropsWithChildren } from "react";
 import { IFilterContext } from "./types";
 import { useSearchParams } from "next/navigation";
 import { PROVIDER_LABELS_KEYS } from "./constants";
-import type { TProviderLabels } from "../providers";
+import type { TProviderCategory, TProviderLabels } from "../providers";
 
 export const FilterContext = createContext<IFilterContext | null>(null);
 
@@ -12,6 +12,9 @@ export const FilerContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const [providersSearchString, setProvidersSearchString] =
     useState<string>("");
 
+  const [providersSelectedCategories, setProvidersSelectedCategories] =
+    useState<TProviderCategory[]>([]);
+
   const [providersSelectedTags, setProvidersSelectedTags] = useState<
     TProviderLabels[]
   >(() => {
@@ -26,8 +29,10 @@ export const FilerContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const contextValue: IFilterContext = {
     providersSearchString,
     providersSelectedTags,
+    providersSelectedCategories,
     setProvidersSelectedTags,
     setProvidersSearchString,
+    setProvidersSelectedCategories,
   };
 
   return (

keep-ui/app/(keep)/providers/filter-context/types.ts

@@ -1,9 +1,11 @@
 import { Dispatch, SetStateAction } from "react";
-import { TProviderLabels } from "../providers";
+import { TProviderCategory, TProviderLabels } from "../providers";
 
 export interface IFilterContext {
   providersSearchString: string;
   providersSelectedTags: TProviderLabels[];
+  providersSelectedCategories: TProviderCategory[];
   setProvidersSearchString: Dispatch<SetStateAction<string>>;
   setProvidersSelectedTags: Dispatch<SetStateAction<TProviderLabels[]>>;
+  setProvidersSelectedCategories: Dispatch<SetStateAction<TProviderCategory[]>>;
 }

keep-ui/app/(keep)/providers/layout.tsx

@@ -3,16 +3,18 @@ import { PropsWithChildren } from "react";
 import { ProvidersFilterByLabel } from "./components/providers-filter-by-label";
 import { ProvidersSearch } from "./components/providers-search";
 import { FilerContextProvider } from "./filter-context";
+import { ProvidersCategories } from "./components/providers-categories";
 
 export default function ProvidersLayout({ children }: PropsWithChildren) {
   return (
     <FilerContextProvider>
       <main className="p-4">
-        <div className="flex w-full justify-end mb-4 ml-2.5">
-          <div className="flex">
+        <div className="flex w-full flex-col items-center mb-4">
+          <div className="flex w-full">
             <ProvidersSearch />
             <ProvidersFilterByLabel />
           </div>
+          <ProvidersCategories />
         </div>
         <div className="flex flex-col">{children}</div>
       </main>

keep-ui/app/(keep)/providers/page.client.tsx

@@ -110,7 +110,11 @@ export default function ProvidersPage({
     session,
     isLocalhost,
   } = useFetchProviders();
-  const { providersSearchString, providersSelectedTags } = useFilterContext();
+  const {
+    providersSearchString,
+    providersSelectedTags,
+    providersSelectedCategories,
+  } = useFilterContext();
   const apiUrl = useApiUrl();
   const router = useRouter();
   useEffect(() => {
@@ -147,6 +151,21 @@ export default function ProvidersPage({
     );
   };
 
+  const searchCategories = (provider: Provider) => {
+    if (providersSelectedCategories.includes("Coming Soon")) {
+      if (provider.coming_soon) {
+        return true;
+      }
+    }
+
+    return (
+      providersSelectedCategories.length === 0 ||
+      provider.categories.some((category) =>
+        providersSelectedCategories.includes(category)
+      )
+    );
+  };
+
   const searchTags = (provider: Provider) => {
     return (
       providersSelectedTags.length === 0 ||
@@ -171,7 +190,10 @@ export default function ProvidersPage({
       )}
       <ProvidersTiles
         providers={providers.filter(
-          (provider) => searchProviders(provider) && searchTags(provider)
+          (provider) =>
+            searchProviders(provider) &&
+            searchTags(provider) &&
+            searchCategories(provider)
         )}
         isLocalhost={isLocalhost}
       />

keep-ui/app/(keep)/providers/provider-tile.tsx

@@ -159,16 +159,17 @@ export default function ProviderTile({ provider, onClick }: Props) {
       />
     );
   };
-
   return (
     <button
       className={
-        "tile-basis text-left min-w-0 py-4 px-4 relative group flex justify-around items-center bg-white rounded-lg shadow hover:grayscale-0  gap-3" +
+        "min-h-36 tile-basis text-left min-w-0 py-4 px-4 relative group flex justify-around items-center bg-white rounded-lg shadow hover:grayscale-0 gap-3" +
         // Add fixed height only if provider card doesn't have much content
         (!provider.installed && !provider.linked ? " h-32" : "") +
-        (!provider.linked ? "cursor-pointer hover:shadow-lg" : "")
+        (!provider.linked ? "cursor-pointer hover:shadow-lg" : "") +
+        (provider.coming_soon ? " opacity-50 cursor-not-allowed" : "")
       }
-      onClick={onClick}
+      onClick={provider.coming_soon ? undefined : onClick}
+      disabled={provider.coming_soon}
     >
       <div className="flex-1 min-w-0">
         {(provider.can_setup_webhook || provider.supports_webhook) &&
@@ -218,6 +219,9 @@ export default function ProviderTile({ provider, onClick }: Props) {
           <div>
             <Title className="capitalize" title={provider.details?.name}>
               {provider.display_name}{" "}
+              {provider.coming_soon && (
+                <span className="text-sm">(Coming Soon)</span>
+              )}
             </Title>
 
             {provider.details && provider.details.name && (
@@ -249,7 +253,7 @@ export default function ProviderTile({ provider, onClick }: Props) {
             height={48}
             alt={provider.type}
             className={`${
-              provider.installed || provider.linked
+              provider.installed || provider.linked || provider.coming_soon
                 ? ""
                 : "grayscale group-hover:grayscale-0"
             }`}

keep-ui/app/(keep)/providers/providers-tiles.tsx

@@ -104,7 +104,7 @@ const ProvidersTiles = ({
       return "Linked Providers";
     }
 
-    return "Connect Provider";
+    return "Available Providers";
   };
 
   const sortedProviders = providers
@@ -115,6 +115,9 @@ const ProvidersTiles = ({
     )
     .sort(
       (a, b) =>
+        // Put coming_soon providers at the end
+        Number(a.coming_soon) - Number(b.coming_soon) ||
+        // Then sort by webhook/oauth capabilities
         Number(b.can_setup_webhook) - Number(a.can_setup_webhook) ||
         Number(b.supports_webhook) - Number(a.supports_webhook) ||
         Number(b.oauth2_url ? true : false) -
@@ -131,7 +134,7 @@ const ProvidersTiles = ({
               icon={QuestionMarkCircleIcon} // Use the appropriate icon for your use case
               className="text-gray-400 hover:text-gray-600"
               size="sm"
-              tooltip="Providers which send alerts without being installed by Keep"
+              tooltip="Providers that send alerts to Keep and are not installed."
             />
           </div>
         )}

keep-ui/app/(keep)/providers/providers.tsx

@@ -51,6 +51,21 @@ interface AlertDistritbuionData {
   number: number;
 }
 
+export type TProviderCategory =
+  | "Monitoring"
+  | "Incident Management"
+  | "Cloud Infrastructure"
+  | "Ticketing"
+  | "Developer Tools"
+  | "Database"
+  | "Identity and Access Management"
+  | "Security"
+  | "Collaboration"
+  | "CRM"
+  | "Queues"
+  | "Coming Soon"
+  | "Others";
+
 export type TProviderLabels =
   | "alert"
   | "incident"
@@ -81,7 +96,6 @@ export interface Provider {
   id: string;
   // the name of the provider
   display_name: string;
-  comingSoon?: boolean;
   can_query: boolean;
   query_params?: string[];
   can_notify: boolean;
@@ -101,6 +115,8 @@ export interface Provider {
   alertsDistribution?: AlertDistritbuionData[];
   alertExample?: { [key: string]: string };
   provisioned?: boolean;
+  categories: TProviderCategory[];
+  coming_soon: boolean;
 }
 
 export type Providers = Provider[];
@@ -119,4 +135,6 @@ export const defaultProvider: Provider = {
   tags: [],
   validatedScopes: {},
   pulling_enabled: true,
+  categories: ["Others"],
+  coming_soon: false,
 };

keep-ui/app/(signin)/layout.tsx

@@ -1,6 +1,6 @@
 export const metadata = {
-  title: "Next.js",
-  description: "Generated by Next.js",
+  title: "Keep",
+  description: "The open-source alert management and AIOps platform",
 };
 
 export default function RootLayout({

keep/api/models/provider.py

@@ -43,8 +43,12 @@ class Provider(BaseModel):
     last_pull_time: datetime | None = None
     docs: str | None = None
     tags: list[
-        Literal["alert", "ticketing", "messaging", "data", "queue", "topology", "incident"]
+        Literal[
+            "alert", "ticketing", "messaging", "data", "queue", "topology", "incident"
+        ]
     ] = []
+    categories: list[str] = ["Others"]
+    coming_soon: bool = False
     alertsDistribution: dict[str, int] | None = None
     alertExample: dict | None = None
     default_fingerprint_fields: list[str] | None = None

keep/providers/aks_provider/aks_provider.py

@@ -72,6 +72,7 @@ class AksProvider(BaseProvider):
     """Enrich alerts using data from AKS."""
 
     PROVIDER_DISPLAY_NAME = "Azure AKS"
+    PROVIDER_CATEGORY = ["Cloud Infrastructure"]
 
     def __init__(
         self, context_manager: ContextManager, provider_id: str, config: ProviderConfig

keep/providers/appdynamics_provider/appdynamics_provider.py

@@ -29,6 +29,7 @@ class AppdynamicsProviderAuthConfig:
     """
     AppDynamics authentication configuration.
     """
+
     appDynamicsAccountName: str = dataclasses.field(
         metadata={
             "required": True,
@@ -87,18 +88,20 @@ def check_password_or_token(cls, values):
         username, password, token = (
             values.get("appDynamicsUsername"),
             values.get("appDynamicsPassword"),
-            values.get("appDynamicsAccessToken")
+            values.get("appDynamicsAccessToken"),
         )
         if not (username and password) and not token:
-            raise ValueError("Either username/password or access token must be provided")
+            raise ValueError(
+                "Either username/password or access token must be provided"
+            )
         return values
 
 
 class AppdynamicsProvider(BaseProvider):
     """Install Webhooks and receive alerts from AppDynamics."""
 
     PROVIDER_DISPLAY_NAME = "AppDynamics"
-
+    PROVIDER_CATEGORY = ["Monitoring"]
     PROVIDER_SCOPES = [
         ProviderScope(
             name="authenticated",
@@ -196,7 +199,9 @@ def validate_scopes(self) -> dict[str, bool | str]:
         administrator = "Missing Administrator Privileges"
         self.logger.info("Validating AppDynamics Scopes")
 
-        user_id = self.get_user_id_by_name(self.authentication_config.appDynamicsAccountName)
+        user_id = self.get_user_id_by_name(
+            self.authentication_config.appDynamicsAccountName
+        )
 
         url = self.__get_url(
             paths=[
@@ -237,13 +242,15 @@ def __get_headers(self):
             }
 
     def __get_auth(self) -> tuple[str, str]:
-        if self.authentication_config.appDynamicsUsername and self.authentication_config.appDynamicsPassword:
+        if (
+            self.authentication_config.appDynamicsUsername
+            and self.authentication_config.appDynamicsPassword
+        ):
             return (
                 f"{self.authentication_config.appDynamicsUsername}@{self.authentication_config.appDynamicsAccountName}",
                 self.authentication_config.appDynamicsPassword,
             )
 
-
     def __create_http_response_template(self, keep_api_url: str, api_key: str):
         keep_api_host, keep_api_path = keep_api_url.rsplit("/", 1)