Merge remote-tracking branch 'upstream/main' into provider-input-vali…

…dation
keephq · Nov 24, 2024 · bfb706e · bfb706e
2 parents adc20b3 + 411f640
commit bfb706e
Show file tree

Hide file tree

Showing 180 changed files with 2,414 additions and 1,011 deletions.
diff --git a/.github/workflows/test-docs.yml b/.github/workflows/test-docs.yml
@@ -2,11 +2,11 @@ name: Test docs
 on:
   push:
     paths:
-      - 'keep/poviders/**'
+      - 'keep/providers/**'
       - 'docs/**'
   pull_request:
     paths:
-      - 'keep/poviders/**'
+      - 'keep/providers/**'
       - 'docs/**'
   workflow_dispatch:
 concurrency:

diff --git a/README.md b/README.md
@@ -12,11 +12,11 @@
 
 <div align="center">
     <a href='http://makeapullrequest.com'>
-      <img alt='PRs Welcome' src='https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=shields'/>
-    </a>
+      <img alt='PRs Welcome' src='https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=shields'/></a>
     <a href="https://slack.keephq.dev">
       <img src="https://img.shields.io/badge/Join-important.svg?color=4A154B&label=Slack&logo=slack&labelColor=334155&logoColor=f5f5f5" alt="Join Slack" /></a>
-      <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/keephq/keep"/>
+    <a href="https://github.com/keephq/keep/commits/main">
+      <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/keephq/keep"/></a>
     <a href="https://codecov.io/gh/keephq/keep" >
         <img src="https://codecov.io/gh/keephq/keep/branch/main/graph/badge.svg?token=2VT6XYMRGS"/>
     </a>

diff --git a/docs/deployment/authentication/azuread-auth.mdx b/docs/deployment/authentication/azuread-auth.mdx
@@ -8,7 +8,7 @@ This feature is a part of Keep Enterprise.
 Talk to us to get access: https://www.keephq.dev/meet-keep
 </Tip>
 
-Keep supports enterprise authentication through Azure Active Directory (Azure AD), enabling organizations to use their existing Microsoft identity platform for secure access management.
+Keep supports enterprise authentication through Azure Entre ID (formerly known as Azure AD), enabling organizations to use their existing Microsoft identity platform for secure access management.
 
 ## When to Use
 
@@ -49,9 +49,9 @@ We use "Web" platform instead of "Single Page Application (SPA)" because Keep's
 </Info>
 
 <Tip>
-For localhost, the redirect would be http://localhost:3000/api/auth/callback/azure-ad
+For localhost, the redirect would be http://localhost:3000/api/auth/callback/microsoft-entra-id
 
-For production, it should be something like http://your_keep_frontend_domain/api/auth/callback/azure-ad
+For production, it should be something like http://your_keep_frontend_domain/api/auth/callback/microsoft-entra-id
 
 </Tip>
 

diff --git a/docs/images/azuread_3.png b/docs/images/azuread_3.png
diff --git a/docs/providers/documentation/gke-provider.mdx b/docs/providers/documentation/gke-provider.mdx
@@ -1,7 +1,7 @@
 ---
-title: "GKE"
-sidebarTitle: "GKE Provider"
-description: "GKE provider allows managing Google Kubernetes Engine clusters and related resources."
+title: "Google Kubernetes Engine"
+sidebarTitle: "Google Kubernetes Engine Provider"
+description: "Google Kubernetes Engine provider allows managing Google Kubernetes Engine clusters and related resources."
 ---
 
 ## Inputs

diff --git a/docs/providers/documentation/teams-provider.mdx b/docs/providers/documentation/teams-provider.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Teams Provider"
-sidebarTitle: "Teams Provider"
-description: "Teams Provider is a provider that allows to notify alerts to Microsoft Teams chats."
+title: "Microsoft Teams Provider"
+sidebarTitle: "Microsoft Teams Provider"
+description: "Microsoft Teams Provider is a provider that allows to notify alerts to Microsoft Teams chats."
 ---
 
 ## Inputs

diff --git a/docs/providers/overview.mdx b/docs/providers/overview.mdx
@@ -45,7 +45,7 @@ By leveraging Keep Providers, users are able to deeply integrate Keep with the t
 />
 
 <Card
-  title="GKE"
+  title="Google Kubernetes Engine"
   href="/providers/documentation/gke-provider"
   icon={
     <img src="https://img.logo.dev/gke.com?token=pk_dfXfZBoKQMGDTIgqu7LvYg" />
@@ -653,7 +653,7 @@ By leveraging Keep Providers, users are able to deeply integrate Keep with the t
 ></Card>
 
 <Card
-  title="Teams"
+  title="Microsoft Teams"
   href="/providers/documentation/teams-provider"
   icon={
     <img src="https://img.logo.dev/teams.com?token=pk_dfXfZBoKQMGDTIgqu7LvYg" />

diff --git a/keep-ui/app/(keep)/alerts/alert-assignee.tsx b/keep-ui/app/(keep)/alerts/alert-assignee.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { NameInitialsAvatar } from "react-name-initials-avatar";
-import { useUsers } from "utils/hooks/useUsers";
+import { useUsers } from "@/entities/users/model/useUsers";
 
 interface Props {
   assignee: string | undefined;

diff --git a/keep-ui/app/(keep)/alerts/alert-severity-border.tsx b/keep-ui/app/(keep)/alerts/alert-severity-border.tsx
@@ -1,27 +1,59 @@
 import clsx from "clsx";
 import { Severity } from "./models";
 
+const getSeverityBgClassName = (severity?: Severity) => {
+  switch (severity) {
+    case "critical":
+      return "bg-red-500";
+    case "high":
+    case "error":
+      return "bg-orange-500";
+    case "warning":
+      return "bg-yellow-500";
+    case "info":
+      return "bg-blue-500";
+    default:
+      return "bg-emerald-500";
+  }
+};
+
+const getSeverityLabelClassName = (severity?: Severity) => {
+  switch (severity) {
+    case "critical":
+      return "bg-red-100";
+    case "high":
+    case "error":
+      return "bg-orange-100";
+    case "warning":
+      return "bg-yellow-100";
+    case "info":
+      return "bg-blue-100";
+    default:
+      return "bg-emerald-100";
+  }
+};
+
+const getSeverityTextClassName = (severity?: Severity) => {
+  switch (severity) {
+    case "critical":
+      return "text-red-500";
+    case "high":
+    case "error":
+      return "text-orange-500";
+    case "warning":
+      return "text-amber-900";
+    case "info":
+      return "text-blue-500";
+    default:
+      return "text-emerald-500";
+  }
+};
+
 export function AlertSeverityBorder({
   severity,
 }: {
   severity: Severity | undefined;
 }) {
-  const getSeverityBgClassName = (severity?: Severity) => {
-    switch (severity) {
-      case "critical":
-        return "bg-red-500";
-      case "high":
-      case "error":
-        return "bg-orange-500";
-      case "warning":
-        return "bg-yellow-500";
-      case "info":
-        return "bg-blue-500";
-      default:
-        return "bg-emerald-500";
-    }
-  };
-
   return (
     <div
       className={clsx(
@@ -32,3 +64,29 @@ export function AlertSeverityBorder({
     />
   );
 }
+
+export function AlertSeverityBorderIcon({ severity }: { severity: Severity }) {
+  return (
+    <div
+      className={clsx("w-1 h-4 rounded-lg", getSeverityBgClassName(severity))}
+    />
+  );
+}
+
+export function AlertSeverityLabel({ severity }: { severity: Severity }) {
+  return (
+    <span
+      className={clsx(
+        "flex items-center gap-1 text-sm font-medium py-0.5 px-2 overflow-hidden relative",
+        getSeverityLabelClassName(severity)
+      )}
+    >
+      <div
+        className={clsx("w-1 h-4 rounded-lg", getSeverityBgClassName(severity))}
+      />
+      <span className={clsx("capitalize", getSeverityTextClassName(severity))}>
+        {severity}
+      </span>
+    </span>
+  );
+}
diff --git a/keep-ui/app/(keep)/alerts/alert-sidebar.tsx b/keep-ui/app/(keep)/alerts/alert-sidebar.tsx
@@ -2,12 +2,20 @@ import { Fragment } from "react";
 import Image from "next/image";
 import { Dialog, Transition } from "@headlessui/react";
 import { AlertDto } from "./models";
-import { Button, Title, Card, Badge } from "@tremor/react";
+import { Button, Title, Badge } from "@tremor/react";
 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/(keep)/topology/TopologySearchContext";
+import {
+  AlertSeverityBorderIcon,
+  AlertSeverityLabel,
+} from "./alert-severity-border";
+import { FieldHeader } from "@/shared/ui/FieldHeader";
+import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
+import { Tooltip } from "@/shared/ui/Tooltip";
+import { Link } from "@/components/ui";
 
 type AlertSidebarProps = {
   isOpen: boolean;
@@ -57,11 +65,14 @@ const AlertSidebar = ({ isOpen, toggle, alert }: AlertSidebarProps) => {
                 {/*Will add soon*/}
                 {/*<AlertMenu alert={alert} presetName="feed" isInSidebar={true} />*/}
                 {/*<Divider></Divider>*/}
-                <Dialog.Title className="text-3xl font-bold" as={Title}>
-                  Alert Details
-                  <Badge className="ml-4" color="orange">
-                    Beta
-                  </Badge>
+                <Dialog.Title
+                  className="text-xl font-bold flex flex-col gap-2 items-start"
+                  as={Title}
+                >
+                  {alert?.severity && (
+                    <AlertSeverityLabel severity={alert.severity} />
+                  )}
+                  {alert?.name ? alert.name : "Alert Details"}
                 </Dialog.Title>
               </div>
               <div>
@@ -72,43 +83,63 @@ const AlertSidebar = ({ isOpen, toggle, alert }: AlertSidebarProps) => {
             </div>
             {alert && (
               <div className="space-y-4">
-                <Card>
-                  <div className="mt-4 space-y-2">
-                    <p>
-                      <strong>Name:</strong> {alert.name}
-                    </p>
-                    <p>
-                      <strong>Service:</strong> {alert.service}
-                    </p>
-                    <p>
-                      <strong>Severity:</strong> {alert.severity}
-                    </p>
-                    <p>
-                      <Image
-                        src={`/icons/${alert.source![0]}-icon.png`}
-                        alt={alert.source![0]}
-                        width={24}
-                        height={24}
-                        className="inline-block w-6 h-6"
-                      />
-                    </p>
-                    <p>
-                      <strong>Description:</strong> {alert.description}
-                    </p>
-                    <p>
-                      <strong>Fingerprint:</strong> {alert.fingerprint}
-                    </p>
-                  </div>
-                </Card>
-                <Card className="flex-grow">
-                  <AlertTimeline
-                    key={auditData ? auditData.length : 1}
-                    alert={alert}
-                    auditData={auditData || []}
-                    isLoading={isLoading}
-                    onRefresh={handleRefresh}
-                  />
-                </Card>
+                <div className="space-y-2">
+                  <p>
+                    <FieldHeader>Name</FieldHeader>
+                    {alert.name}
+                  </p>
+                  <p>
+                    <FieldHeader>Service</FieldHeader>
+                    <Badge size="sm" color="gray">
+                      {alert.service}
+                    </Badge>
+                  </p>
+                  <p>
+                    <FieldHeader>Source</FieldHeader>
+                    <Image
+                      src={`/icons/${alert.source![0]}-icon.png`}
+                      alt={alert.source![0]}
+                      width={24}
+                      height={24}
+                      className="inline-block w-6 h-6"
+                    />
+                  </p>
+                  <p>
+                    <FieldHeader>Description</FieldHeader>
+                    {alert.description}
+                  </p>
+                  <p>
+                    <FieldHeader className="flex items-center gap-1">
+                      Fingerprint
+                      <Tooltip
+                        content={
+                          <>
+                            Fingerprints are unique identifiers associated with
+                            alert instances in Keep. Every provider declares the
+                            fields fingerprints are calculated upon.{" "}
+                            <Link
+                              href="https://docs.keephq.dev/providers/fingerprints#fingerprints"
+                              className="text-white"
+                            >
+                              Docs
+                            </Link>
+                          </>
+                        }
+                        className="z-50"
+                      >
+                        <QuestionMarkCircleIcon className="w-4 h-4" />
+                      </Tooltip>
+                    </FieldHeader>
+                    {alert.fingerprint}
+                  </p>
+                </div>
+                <AlertTimeline
+                  key={auditData ? auditData.length : 1}
+                  alert={alert}
+                  auditData={auditData || []}
+                  isLoading={isLoading}
+                  onRefresh={handleRefresh}
+                />
                 <Title>Related Services</Title>
                 <TopologySearchProvider>
                   <TopologyMap

diff --git a/keep-ui/app/(keep)/alerts/alert-table-alert-facets.tsx b/keep-ui/app/(keep)/alerts/alert-table-alert-facets.tsx
@@ -1,9 +1,5 @@
-import React, { useCallback, useEffect } from "react";
-import {
-  AlertFacetsProps,
-  FacetValue,
-  FacetFilters,
-} from "./alert-table-facet-types";
+import React, { useCallback } from "react";
+import { AlertFacetsProps, FacetValue } from "./alert-table-facet-types";
 import { Facet } from "./alert-table-facet";
 import {
   getFilteredAlertsForFacet,
@@ -148,7 +144,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           if (a.label === "n/a") return 1;
           if (b.label === "n/a") return -1;
           const orderDiff =
-            getSeverityOrder(a.label) - getSeverityOrder(b.label);
+            getSeverityOrder(b.label) - getSeverityOrder(a.label);
           if (orderDiff !== 0) return orderDiff;
           return b.count - a.count;
         });
@@ -253,7 +249,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           showSkeleton={showSkeleton}
         />
         <Facet
-          name="Incident Related"
+          name="Incident"
           facetKey="incident"
           values={getFacetValues("incident")}
           onSelect={(value, exclusive, isAllOnly) =>