feat: support linked providers for non existing providers (keephq#1162)

pehlicd · May 6, 2024 · 3f85727 · 3f85727
1 parent 21392f7
commit 3f85727
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 65 deletions.
diff --git a/keep-ui/app/providers/provider-tile.tsx b/keep-ui/app/providers/provider-tile.tsx
@@ -1,6 +1,13 @@
-import { Badge, Button, Icon, SparkAreaChart, Subtitle, Text, Title } from "@tremor/react";
+import {
+  Badge,
+  Button,
+  Icon,
+  SparkAreaChart,
+  Subtitle,
+  Text,
+  Title,
+} from "@tremor/react";
 import { Provider } from "./providers";
-import Image from "next/image";
 import {
   BellAlertIcon,
   ChatBubbleBottomCenterIcon,
@@ -10,6 +17,7 @@ import {
 } from "@heroicons/react/20/solid";
 import "./provider-tile.css";
 import moment from "moment";
+import ImageWithFallback from "@/components/ImageWithFallback";
 
 interface Props {
   provider: Provider;
@@ -66,18 +74,18 @@ const addOneToDistribution = (distribution: any[]) => {
     number: data.number + 1,
   }));
   return dist;
-}
+};
 
 const getEmptyDistribution = () => {
   let emptyDistribution = [];
   for (let i = 0; i < 24; i++) {
     emptyDistribution.push({
       hour: i.toString(),
-      number: 0.2
+      number: 0.2,
     });
   }
   return emptyDistribution;
-}
+};
 
 export default function ProviderTile({ provider, onClick }: Props) {
   return (
@@ -87,7 +95,8 @@ export default function ProviderTile({ provider, onClick }: Props) {
     >
       <div className="w-48">
         {(provider.can_setup_webhook || provider.supports_webhook) &&
-          !provider.installed && !provider.linked && (
+          !provider.installed &&
+          !provider.linked && (
             <Icon
               icon={WebhookIcon}
               className="absolute top-[-15px] right-[-15px] grayscale hover:grayscale-0 group-hover:grayscale-0"
@@ -118,70 +127,68 @@ export default function ProviderTile({ provider, onClick }: Props) {
           <Text color={"green"} className="flex text-xs">
             Linked
           </Text>
-        ) : null
-        }
+        ) : null}
         <div className="flex flex-col">
           <div>
-          <Title
-  className={`${!provider.linked ? 'group-hover:hidden' : ''} capitalize`}
-  title={provider.details?.name}
->
-  {provider.display_name}{" "}
-</Title>
+            <Title
+              className={`${
+                !provider.linked ? "group-hover:hidden" : ""
+              } capitalize`}
+              title={provider.details?.name}
+            >
+              {provider.display_name}{" "}
+            </Title>
 
             {provider.details && provider.details.name && (
               <Subtitle className="group-hover:hidden">
                 id: {provider.details.name}
               </Subtitle>
             )}
-            {
-              provider.last_alert_received ? (
-                <Text
-                  className={`${!provider.linked ? 'group-hover:hidden' : ''}`}
-                >
-                  Last alert: {moment(provider.last_alert_received).fromNow()}
-                </Text>
-              ) :
-              (
-                <p></p>
-              )
-            }
-            {
-              provider.linked && provider.id ? (
-                <Text>
-                  Id: {provider.id}
-                </Text>
-              ): (
-                <br></br>
-              )
-            }
-            {
-  (provider.installed || provider.linked) && provider.alertsDistribution && provider.alertsDistribution.length > 0 ? (
-    <SparkAreaChart
-      data={addOneToDistribution(provider.alertsDistribution)}
-      categories={['number']}
-      index={'hour'}
-      colors={['orange']}
-      showGradient={true}
-      autoMinValue={true}
-      className={`${!provider.linked ? 'group-hover:hidden' : ''} mt-2 h-8 w-20 sm:h-10 sm:w-36`}
-    />
-  ) : (provider.installed || provider.linked) ? (
-    <SparkAreaChart
-      data={getEmptyDistribution()}
-      categories={['number']}
-      index={'hour'}
-      colors={['orange']}
-      className={`${!provider.linked ? 'group-hover:hidden' : ''} mt-2 h-8 w-20 sm:h-10 sm:w-36`}
-      autoMinValue={true}
-      maxValue={1}
-    />
-  ) : null
-}
-
+            {provider.last_alert_received ? (
+              <Text
+                className={`${!provider.linked ? "group-hover:hidden" : ""}`}
+              >
+                Last alert: {moment(provider.last_alert_received).fromNow()}
+              </Text>
+            ) : (
+              <p></p>
+            )}
+            {provider.linked && provider.id ? (
+              <Text>Id: {provider.id}</Text>
+            ) : (
+              <br></br>
+            )}
+            {(provider.installed || provider.linked) &&
+            provider.alertsDistribution &&
+            provider.alertsDistribution.length > 0 ? (
+              <SparkAreaChart
+                data={addOneToDistribution(provider.alertsDistribution)}
+                categories={["number"]}
+                index={"hour"}
+                colors={["orange"]}
+                showGradient={true}
+                autoMinValue={true}
+                className={`${
+                  !provider.linked ? "group-hover:hidden" : ""
+                } mt-2 h-8 w-20 sm:h-10 sm:w-36`}
+              />
+            ) : provider.installed || provider.linked ? (
+              <SparkAreaChart
+                data={getEmptyDistribution()}
+                categories={["number"]}
+                index={"hour"}
+                colors={["orange"]}
+                className={`${
+                  !provider.linked ? "group-hover:hidden" : ""
+                } mt-2 h-8 w-20 sm:h-10 sm:w-36`}
+                autoMinValue={true}
+                maxValue={1}
+              />
+            ) : null}
           </div>
           <div className="labels flex group-hover:hidden">
-            {!provider.installed && !provider.linked &&
+            {!provider.installed &&
+              !provider.linked &&
               provider.tags.map((tag) => {
                 const icon =
                   tag === "alert"
@@ -218,13 +225,16 @@ export default function ProviderTile({ provider, onClick }: Props) {
           )}
         </div>
       </div>
-      <Image
+      <ImageWithFallback
         src={`/icons/${provider.type}-icon.png`}
+        fallbackSrc={`/icons/keep-icon.png`}
         width={48}
         height={48}
         alt={provider.type}
         className={`${
-          (provider.installed || provider.linked) ? "" : "grayscale group-hover:grayscale-0"
+          provider.installed || provider.linked
+            ? ""
+            : "grayscale group-hover:grayscale-0"
         }`}
       />
     </div>

diff --git a/keep-ui/components/ImageWithFallback.tsx b/keep-ui/components/ImageWithFallback.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import Image from "next/image";
+
+const ImageWithFallback = (props: any) => {
+  const { src, fallbackSrc, alt, width, height, className, ...rest } = props;
+  const [imgSrc, setImgSrc] = useState(src);
+
+  return (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    <Image
+      {...rest}
+      src={imgSrc}
+      width={width}
+      height={height}
+      alt={alt}
+      className={className}
+      onError={() => {
+        setImgSrc(fallbackSrc);
+      }}
+    />
+  );
+};
+
+export default ImageWithFallback;
diff --git a/keep/providers/providers_factory.py b/keep/providers/providers_factory.py
@@ -483,10 +483,14 @@ def get_linked_providers(tenant_id: str) -> list[Provider]:
                 None,
             )
             if not provider:
-                logger.warning(
-                    f"Linked provider {provider_type} does not exist anymore?"
+                # It means it's a custom provider
+                provider = Provider(
+                    display_name=provider_type,
+                    type=provider_type,
+                    can_notify=False,
+                    can_query=False,
+                    tags=["alert"],
                 )
-                continue
             provider = provider.copy()
             provider.linked = True
             provider.id = provider_id