enhance: add remediation supported features bubble

crowdsec-docs/components.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "tailwind": {
+      "config": "tailwind.config.js",
+      "css": "src/css/custom.css",
+      "baseColor": "neutral",
+      "prefix": "tw-",
+      "cssVariables": false
+    },
+    "rsc": true,
+    "aliases": {
+        "utils": "@/src/utils",
+        "components": "@/src/components",
+        "ui": "@/src/ui",
+        "hooks": "@/src/hooks",
+        "lib": "@/src/lib"
+    },
+    "style": "default"
+  }
+

crowdsec-docs/package.json

@@ -28,12 +28,17 @@
         "@mui/icons-material": "^5.11.16",
         "@mui/material": "^5.13.4",
         "@mui/x-date-pickers": "^6.18.0",
+        "@radix-ui/react-tooltip": "^1.1.2",
+        "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "lucide-react": "^0.441.0",
         "docusaurus-plugin-zooming": "^1.0.0",
         "material-react-table": "^2.0.2",
         "prism-react-renderer": "^2.4.0",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "tailwind-merge": "^2.5.2",
+        "tailwindcss-animate": "^1.0.7"
     },
     "devDependencies": {
         "@docusaurus/module-type-aliases": "^3.7.0",

crowdsec-docs/src/components/RemediationSupportBadges.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+    ToolTipArrow
+} from "@site/src/ui/tooltip"
+
+
+type RemediationSupportBadgesProps = {
+    Prometheus: boolean; // Prometheus is a boolean that controls the color of the Prometheus bubble
+    MTLS: boolean; // MTLS is a boolean that controls the color of the MTLS bubble
+    Mode: boolean; // Mode is a boolean that controls the color of the Mode bubble
+    Metrics: boolean; // Metrics is a boolean that controls the color of the Metrics bubble
+    Appsec?: boolean; // Appsec is a boolean that controls the color of the AppSec bubble
+}
+
+const RemediationSupportBadge = ({ title, description, support }: { title: string, description: string, support: string }) => {
+    //ugly, for test
+    const colorClass = support === 'Unsupported' ? 'tw-bg-red-400' : 'tw-bg-green-400';    
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <div className='tw-border tw-rounded-full tw-flex tw-text-black'>
+                        <span className='tw-bg-slate-400 tw-px-2 tw-rounded-l-lg'>{title}</span>
+                        <span className={clsx('tw-rounded-r-lg tw-px-2', colorClass)}>{support}</span>
+                    </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{description}</p>
+                    <ToolTipArrow className='dark:tw-fill-white'/>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}
+
+export default function RemediationSupportBadges({ MTLS, Metrics, Prometheus, Mode, Appsec }: RemediationSupportBadgesProps): React.JSX.Element {
+    const mtlsSupport = MTLS ? 'Supported' : 'Unsupported';
+    const metricsSupport = Metrics ? 'Supported' : 'Unsupported';
+    const prometheusSupport = Prometheus ? 'Supported' : 'Unsupported';
+    const modeSupport = Mode ? 'Live & Stream' : 'Live only';
+    const appsecSupport = (Appsec !== undefined && Appsec) ? 'Supported' : 'Unsupported';
+
+    return (
+        <div className='tw-flex tw-justify-center tw-flex-wrap tw-mb-4 tw-gap-2'>
+            {Appsec !== undefined && (
+                <RemediationSupportBadge title='AppSec' description='Can forward HTTP requests to the AppSec Component' support={appsecSupport} />
+            )}
+            <RemediationSupportBadge title='Mode' description='Can be configured in different modes, typically live or stream' support={modeSupport} />
+            <RemediationSupportBadge title='Metrics' description='Can send detailed metrics to LAPI' support={metricsSupport} />
+            <RemediationSupportBadge title='MTLS' description='Can do mutual TLS authentication to LAPI' support={mtlsSupport} />
+            <RemediationSupportBadge title='Prometheus' description='Can expose metrics to Prometheus' support={prometheusSupport} />
+        </div>
+    );
+}

crowdsec-docs/src/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@site/src/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const ToolTipArrow = TooltipPrimitive.Arrow
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "tw-z-50 tw-overflow-hidden tw-rounded-md tw-border tw-border-neutral-200 tw-bg-white tw-px-3 tw-py-1.5 tw-text-sm tw-text-neutral-950 tw-shadow-md tw-animate-in tw-fade-in-0 tw-zoom-in-95 data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=closed]:tw-zoom-out-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2 dark:tw-border-neutral-800 dark:tw-bg-neutral-950 dark:tw-text-neutral-50",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, ToolTipArrow }

crowdsec-docs/src/utils/index.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

crowdsec-docs/tailwind.config.js

@@ -67,6 +67,6 @@ module.exports = {
             }),
         },
     },
-    plugins: [],
+    plugins: [require("tailwindcss-animate")],
     prefix: "tw-", // This is the prefix for the tailwind classes to not clash with docusarus classes
 }

crowdsec-docs/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "esModuleInterop": true,
+      "jsx": "react",
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["./*"],
+        "@site/*": ["./*"]
+      }
+    }
+  }
+

crowdsec-docs/unversioned/bouncers/aws-waf.mdx

@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/aws-waf-bouncer-logo.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -18,6 +19,10 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportBadges
+  MTLS
+/>
+
 ## Overview
 
 The `crowdsec-awf-waf-bouncer` automatically adds rules to an AWS WAF ACL and manages IPSets content to apply decisions taken by crowdsec.

crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx

@@ -7,6 +7,7 @@ sidebar_position: 7
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -25,6 +26,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 </p>
 </p>
 
+<RemediationSupportBadges
+  MTLS
+  Prometheus
+/>
+
 
 This Remediation Component exposes CrowdSec's active decisions via provided HTTP(S) endpoints in pre-defined formats. It can be used by network appliances which support consumption of blocklists via HTTP.
 

crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx

@@ -6,6 +6,8 @@ title: CrowdSec Cloudflare Worker
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
+
 
 
 <p align="center">
@@ -23,6 +25,12 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportBadges
+  MTLS
+  Prometheus
+  Metrics
+/>
+
 This **Remediation Component** (aka Bouncer) deploys a **Cloudflare Worker** in front of a **Cloudflare Zone/Website**, which checks if incoming request's IP address/Country/AS is present in a KV store and takes necessary remedial actions.   
 It also periodically updates the KV store with IPs coming from your **CrowdSec Security Engine** OR a **Blocklist as a Service Integration**for Remediation components.
 

crowdsec-docs/unversioned/bouncers/cloudflare.mdx

@@ -6,6 +6,7 @@ title: Cloudflare
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -23,6 +24,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportBadges
+  MTLS
+  Prometheus
+/>
+
 :::danger
 
 This bouncer isn't actively supported anymore, due to changes to Cloudflare's API rate limitations.

crowdsec-docs/unversioned/bouncers/custom.mdx

@@ -7,6 +7,7 @@ sidebar_position: 5
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -22,6 +23,9 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportBadges
+  Prometheus
+/>
 
 CrowdSec Remediation Component written to invoke custom scripts.
 

crowdsec-docs/unversioned/bouncers/fastly.mdx

@@ -6,6 +6,7 @@ title: Fastly
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
   <img src={useBaseUrl('/img/crowdsec_fastly.png')} width="280" height="300" />
@@ -22,6 +23,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportBadges
+/>
 
 # cs-fastly-bouncer
 

crowdsec-docs/unversioned/bouncers/firewall.mdx

@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -22,6 +23,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportBadges
+  MTLS
+  Prometheus
+  Metrics
+/>
 
 CrowdSec Remediation Component written in golang for firewalls.
 

crowdsec-docs/unversioned/bouncers/haproxy.mdx

@@ -6,6 +6,7 @@ title: HAProxy
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_haproxy.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -20,6 +21,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportBadges
+  Mode
+  Appsec={false}
+/>
+
 
 A lua Remediation Component for haproxy.
 

crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx

@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_nginx.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -21,6 +22,10 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportBadges
+  Mode
+  Appsec 
+/>
 
 A lua Remediation Component for Ingress Nginx Controller.
 

crowdsec-docs/unversioned/bouncers/intro.md

@@ -44,6 +44,16 @@ This command must be run on the server where the local API is installed (or at l
 
 If you wish to create your own Remediation Component, look at [this section](/docs/next/local_api/bouncers) of the local API documentation.
 
+## Remediation Component Badges
 
+As CrowdSec has evolved over the years we have added support for various technologies and services. The following badges indicate the level of support for each remediation component.
+
+| Badge | Description |
+| --- | --- |
+| AppSec | Can forward HTTP requests to the AppSec Component [more information](/docs/next/appsec/intro) |
+| Mode | Can be configured into different modes, typically live (send a request to LAPI for each remediation check) or stream (downloads all current decisions to a local cache and checks periodically for new / deleted ones) <br/><br/>**note these are the naming schemes live/stream are used by first party remediation components** |
+| Metrics | Can send detailed metrics to the LAPI [more information](/docs/next/observability/usage_metrics) |
+| MTLS | Supports Mutual TLS authentication to the LAPI [more information](/docs/next/local_api/tls_auth) |
+| Prometheus | Can expose Prometheus metrics |
 
 

crowdsec-docs/unversioned/bouncers/magento.mdx

@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/bouncer/magento/crowdsec_magento_bouncer.png')} alt="CrowdSec" title="CrowdSec" />
@@ -17,6 +18,10 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportBadges
+  Mode
+  MTLS
+/>
 
 ## Introduction
 

crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx

@@ -7,6 +7,7 @@ sidebar_position: 7
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/bouncer/misp_feed_generator/logo.png')} alt="CrowdSec" title="CrowdSec" />
@@ -25,6 +26,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 </p>
 </p>
 
+<RemediationSupportBadges
+/>
 
 This Remediation Component generates MISP Feed from CrowdSec decisions. It exposes this Feed over HTTP/S.
 This can be used to feed CrowdSec decisions to MISP using the "Feeds" functionality of MISP.