Skip to content

Commit b18d0ac

Browse files
LaurenceJJonesrr404jdv
authored
enhance: add remediation supported features bubble (#624)
* enhance: add remediation supported features bubble * fixed conflicts (except packages.json.lock) * enhance: add remediation component badges section in intro * updated capabilities of a few bouncers * enhance: remove unused var * changed the support system slightly to have a Mode-bubble variation * mini fix/test2 --------- Co-authored-by: JDEV <[email protected]> Co-authored-by: jdv <[email protected]>
1 parent 2e94600 commit b18d0ac

26 files changed

+739
-684
lines changed

‎crowdsec-docs/components.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"tailwind": {
4+
"config": "tailwind.config.js",
5+
"css": "src/css/custom.css",
6+
"baseColor": "neutral",
7+
"prefix": "tw-",
8+
"cssVariables": false
9+
},
10+
"rsc": true,
11+
"aliases": {
12+
"utils": "@/src/utils",
13+
"components": "@/src/components",
14+
"ui": "@/src/ui",
15+
"hooks": "@/src/hooks",
16+
"lib": "@/src/lib"
17+
},
18+
"style": "default"
19+
}
20+

‎crowdsec-docs/package-lock.json‎

Lines changed: 501 additions & 681 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎crowdsec-docs/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,17 @@
2828
"@mui/icons-material": "^5.11.16",
2929
"@mui/material": "^5.13.4",
3030
"@mui/x-date-pickers": "^6.18.0",
31+
"@radix-ui/react-tooltip": "^1.1.2",
32+
"class-variance-authority": "^0.7.0",
3133
"clsx": "^2.1.1",
34+
"lucide-react": "^0.441.0",
3235
"docusaurus-plugin-zooming": "^1.0.0",
3336
"material-react-table": "^2.0.2",
3437
"prism-react-renderer": "^2.4.0",
3538
"react": "^18.3.1",
36-
"react-dom": "^18.3.1"
39+
"react-dom": "^18.3.1",
40+
"tailwind-merge": "^2.5.2",
41+
"tailwindcss-animate": "^1.0.7"
3742
},
3843
"devDependencies": {
3944
"@docusaurus/module-type-aliases": "^3.7.0",

‎crowdsec-docs/src/components/RemediationSupportBadges.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import { clsx } from 'clsx';
3+
import {
4+
Tooltip,
5+
TooltipContent,
6+
TooltipProvider,
7+
TooltipTrigger,
8+
ToolTipArrow
9+
} from "@site/src/ui/tooltip"
10+
11+
12+
type RemediationSupportBadgesProps = {
13+
Prometheus: boolean; // Prometheus is a boolean that controls the color of the Prometheus bubble
14+
MTLS: boolean; // MTLS is a boolean that controls the color of the MTLS bubble
15+
Mode: boolean; // Mode is a boolean that controls the color of the Mode bubble
16+
Metrics: boolean; // Metrics is a boolean that controls the color of the Metrics bubble
17+
Appsec?: boolean; // Appsec is a boolean that controls the color of the AppSec bubble
18+
}
19+
20+
const RemediationSupportBadge = ({ title, description, support }: { title: string, description: string, support: string }) => {
21+
//ugly, for test
22+
const colorClass = support === 'Unsupported' ? 'tw-bg-red-400' : 'tw-bg-green-400';
23+
return (
24+
<TooltipProvider>
25+
<Tooltip>
26+
<TooltipTrigger asChild>
27+
<div className='tw-border tw-rounded-full tw-flex tw-text-black'>
28+
<span className='tw-bg-slate-400 tw-px-2 tw-rounded-l-lg'>{title}</span>
29+
<span className={clsx('tw-rounded-r-lg tw-px-2', colorClass)}>{support}</span>
30+
</div>
31+
</TooltipTrigger>
32+
<TooltipContent>
33+
<p>{description}</p>
34+
<ToolTipArrow className='dark:tw-fill-white'/>
35+
</TooltipContent>
36+
</Tooltip>
37+
</TooltipProvider>
38+
);
39+
}
40+
41+
export default function RemediationSupportBadges({ MTLS, Metrics, Prometheus, Mode, Appsec }: RemediationSupportBadgesProps): React.JSX.Element {
42+
const mtlsSupport = MTLS ? 'Supported' : 'Unsupported';
43+
const metricsSupport = Metrics ? 'Supported' : 'Unsupported';
44+
const prometheusSupport = Prometheus ? 'Supported' : 'Unsupported';
45+
const modeSupport = Mode ? 'Live & Stream' : 'Live only';
46+
const appsecSupport = (Appsec !== undefined && Appsec) ? 'Supported' : 'Unsupported';
47+
48+
return (
49+
<div className='tw-flex tw-justify-center tw-flex-wrap tw-mb-4 tw-gap-2'>
50+
{Appsec !== undefined && (
51+
<RemediationSupportBadge title='AppSec' description='Can forward HTTP requests to the AppSec Component' support={appsecSupport} />
52+
)}
53+
<RemediationSupportBadge title='Mode' description='Can be configured in different modes, typically live or stream' support={modeSupport} />
54+
<RemediationSupportBadge title='Metrics' description='Can send detailed metrics to LAPI' support={metricsSupport} />
55+
<RemediationSupportBadge title='MTLS' description='Can do mutual TLS authentication to LAPI' support={mtlsSupport} />
56+
<RemediationSupportBadge title='Prometheus' description='Can expose metrics to Prometheus' support={prometheusSupport} />
57+
</div>
58+
);
59+
}

‎crowdsec-docs/src/ui/tooltip.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from "react"
2+
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
3+
4+
import { cn } from "@site/src/utils"
5+
6+
const TooltipProvider = TooltipPrimitive.Provider
7+
8+
const Tooltip = TooltipPrimitive.Root
9+
10+
const TooltipTrigger = TooltipPrimitive.Trigger
11+
12+
const ToolTipArrow = TooltipPrimitive.Arrow
13+
14+
const TooltipContent = React.forwardRef<
15+
React.ElementRef<typeof TooltipPrimitive.Content>,
16+
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17+
>(({ className, sideOffset = 4, ...props }, ref) => (
18+
<TooltipPrimitive.Content
19+
ref={ref}
20+
sideOffset={sideOffset}
21+
className={cn(
22+
"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",
23+
className
24+
)}
25+
{...props}
26+
/>
27+
))
28+
TooltipContent.displayName = TooltipPrimitive.Content.displayName
29+
30+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, ToolTipArrow }

‎crowdsec-docs/src/utils/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { clsx, type ClassValue } from "clsx"
2+
import { twMerge } from "tailwind-merge"
3+
4+
export function cn(...inputs: ClassValue[]) {
5+
return twMerge(clsx(inputs))
6+
}

‎crowdsec-docs/tailwind.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,6 @@ module.exports = {
6767
}),
6868
},
6969
},
70-
plugins: [],
70+
plugins: [require("tailwindcss-animate")],
7171
prefix: "tw-", // This is the prefix for the tailwind classes to not clash with docusarus classes
7272
}

‎crowdsec-docs/tsconfig.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"compilerOptions": {
3+
"esModuleInterop": true,
4+
"jsx": "react",
5+
"baseUrl": ".",
6+
"paths": {
7+
"@/*": ["./*"],
8+
"@site/*": ["./*"]
9+
}
10+
}
11+
}
12+

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ sidebar_position: 1
77
import Tabs from '@theme/Tabs';
88
import TabItem from '@theme/TabItem';
99
import useBaseUrl from '@docusaurus/useBaseUrl';
10+
import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
1011

1112
<p align="center">
1213
<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';
1819
&#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
1920
</p>
2021

22+
<RemediationSupportBadges
23+
MTLS
24+
/>
25+
2126
## Overview
2227

2328
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‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ sidebar_position: 7
77
import Tabs from '@theme/Tabs';
88
import TabItem from '@theme/TabItem';
99
import useBaseUrl from '@docusaurus/useBaseUrl';
10+
import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
1011

1112

1213
<p align="center">
@@ -25,6 +26,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
2526
</p>
2627
</p>
2728

29+
<RemediationSupportBadges
30+
MTLS
31+
Prometheus
32+
/>
33+
2834

2935
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.
3036

0 commit comments

Comments
 (0)