Jdv interactive se install v0

crowdsec-docs/src/components/InteractiveCheckbox.js

@@ -0,0 +1,190 @@
+import React, { useState, useEffect, createContext, useContext } from 'react';
+
+// Global context to manage checkbox states across all instances
+const CheckboxContext = createContext();
+
+// Provider component to wrap your MDX content
+export const CheckboxProvider = ({ children }) => {
+  const [checkboxStates, setCheckboxStates] = useState({});
+  const [manualChecks, setManualChecks] = useState({});
+
+  const updateCheckbox = (id, isManuallyChecked) => {
+    setManualChecks(prev => ({
+      ...prev,
+      [id]: isManuallyChecked
+    }));
+  };
+
+  const isCheckboxChecked = (id, references = []) => {
+    // Manual check has priority
+    if (manualChecks[id]) {
+      return { checked: true, type: 'manual' };
+    }
+
+    // Check if all references are checked (either manually or through their references)
+    if (references.length > 0) {
+      const allReferencesChecked = references.every(refId => {
+        if (manualChecks[refId]) return true;
+        // Recursively check if reference has its own references
+        return checkboxStates[refId]?.checked;
+      });
+
+      if (allReferencesChecked) {
+        return { checked: true, type: 'reference' };
+      }
+    }
+
+    return { checked: false, type: 'none' };
+  };
+
+  useEffect(() => {
+    // Update all checkbox states when manual checks change
+    const newStates = {};
+    Object.keys(checkboxStates).forEach(id => {
+      const checkbox = checkboxStates[id];
+      newStates[id] = {
+        ...checkbox,
+        ...isCheckboxChecked(id, checkbox.references)
+      };
+    });
+    setCheckboxStates(newStates);
+  }, [manualChecks]);
+
+  const registerCheckbox = (id, references = []) => {
+    setCheckboxStates(prev => ({
+      ...prev,
+      [id]: {
+        references,
+        ...isCheckboxChecked(id, references)
+      }
+    }));
+  };
+
+  return (
+    <CheckboxContext.Provider value={{
+      checkboxStates,
+      manualChecks,
+      updateCheckbox,
+      registerCheckbox,
+      isCheckboxChecked
+    }}>
+      {children}
+    </CheckboxContext.Provider>
+  );
+};
+
+// The main checkbox component
+export const InteractiveCheckbox = ({ 
+  id, 
+  references = [], 
+  label = '', 
+  className = '' 
+}) => {
+  const context = useContext(CheckboxContext);
+
+  // Fallback if context is not available (useful for development/SSR)
+  if (!context) {
+    console.warn('InteractiveCheckbox must be used within a CheckboxProvider');
+    return (
+      <div className={`inline-flex items-center gap-2 ${className}`}>
+        <div
+          style={{
+            width: '20px',
+            height: '20px',
+            border: '2px solid #d1d5db',
+            borderRadius: '3px',
+            backgroundColor: 'transparent',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: 'all 0.2s ease'
+          }}
+        />
+        {label && <span>{label}</span>}
+      </div>
+    );
+  }
+
+  const { 
+    checkboxStates, 
+    manualChecks, 
+    updateCheckbox, 
+    registerCheckbox, 
+    isCheckboxChecked 
+  } = context;
+
+  useEffect(() => {
+    if (registerCheckbox) {
+      registerCheckbox(id, references);
+    }
+  }, [id, references, registerCheckbox]);
+
+  const handleClick = () => {
+    if (updateCheckbox) {
+      updateCheckbox(id, !manualChecks[id]);
+    }
+  };
+
+  const checkboxState = isCheckboxChecked ? isCheckboxChecked(id, references) : { checked: false, type: 'none' };
+  const isChecked = checkboxState.checked;
+  const checkType = checkboxState.type;
+
+  // Determine the color based on check type
+  const getCheckmarkColor = () => {
+    if (checkType === 'manual') return '#22c55e'; // green
+    if (checkType === 'reference') return '#3b82f6'; // blue
+    return '#d1d5db'; // gray (unchecked)
+  };
+
+  const getBackgroundColor = () => {
+    if (isChecked) return getCheckmarkColor();
+    return 'transparent';
+  };
+
+  return (
+    <div className={`inline-flex items-center gap-2 ${className}`}>
+      <div
+        onClick={handleClick}
+        style={{
+          width: '20px',
+          height: '20px',
+          border: `2px solid ${isChecked ? getCheckmarkColor() : '#d1d5db'}`,
+          borderRadius: '3px',
+          backgroundColor: getBackgroundColor(),
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'all 0.2s ease'
+        }}
+      >
+        {isChecked && (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="white"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M2 6l2.5 2.5L10 3" />
+          </svg>
+        )}
+      </div>
+      {label && (
+        <label
+          onClick={handleClick}
+          style={{ cursor: 'pointer', userSelect: 'none' }}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+// Export both components as default for easier importing
+export default InteractiveCheckbox;

crowdsec-docs/unversioned/user_guides/interactive_se_install/01_install.mdx

@@ -0,0 +1,154 @@
+---
+id: se_install_01
+title: Security Engine Installation
+pagination_next: user_guides/interactive_se_install/se_install_02
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+import { CheckboxProvider, InteractiveCheckbox } from '@site/src/components/InteractiveCheckbox.js';
+
+# Interactive Security Engine Installation Guide
+
+Welcome! This interactive guide will help you set up your CrowdSec Security Engine and validate each step to ensure proper operation.
+We'll guide you through detecting and remediating malicious behavior in your services' logs, regardless of your chosen implementation (on host, Docker, Kubernetes)
+
+:::info
+Note that to go further later you'll be able to enable Application Security and benefit from our ever growing collection of Virtual Patching rules.  We'll mention the appropriate dependencies as we go along.
+Lastly, note that we'll cover a setup that focuses on an autonomous security engine parsing the logs of any services from local or remote servers. 
+In appendix we'll cover the possibility to have distributed security engines on each servers, centralizing their alerts on a central security engine.
+:::
+
+## Install CrowdSec
+
+The first step is to install the CrowdSec Security Engine somewhere you'll have access to the logs of services you want to protect.
+You can choose to install it directly on the host, in a Docker container, or in a Kubernetes cluster.  
+
+For a first experience, we recommend installing it on a host machine, as it will allow you to easily access the logs of your services and test the remediation capabilities.
+But if you're comfortable with Docker it also is a great way to get started and run CrowdSec in a containerized environment.  
+
+### Instructions
+
+/* We'll have to see how precise and embeded we want the various guides to be with this page
+    If we want full guides in here we'd better be able to embed files or pieces of files rather than copy paste
+    */
+<Tabs
+  defaultValue="host"
+  groupId="install-implementation"
+  values={[
+    {label: 'Host', value: 'host'},
+    {label: 'Docker', value: 'docker'},
+    {label: 'Kubernetes', value: 'kubernetes'},
+  ]}
+>
+    <TabItem value="host">
+        <p>Here are the various hosts you can install CrowdSec on:</p>
+        // mention guide for linux, Windows, macOS, FreeBSD, pfSense, OPNSense with links to the existing docs
+        <ul>
+        <li><a href="/u/getting_started/installation/linux.md">Linux</a></li>
+        <li><a href="/u/getting_started/installation/windows.md">Windows</a></li>
+        <li><a href="/u/getting_started/installation/macos.md">macOS</a></li>
+        <li><a href="/u/getting_started/installation/freebsd.md">FreeBSD</a></li>
+        <li><a href="/u/getting_started/installation/pfsense.md">pfSense</a></li>
+        <li><a href="/u/getting_started/installation/opnsense.md">OPNSense</a></li>
+        </ul>
+    </TabItem>
+    <TabItem value="docker">
+        // mention the current guide u/getting_started/installation/docker and this page having all the env variable https://hub.docker.com/r/crowdsecurity/crowdsec
+        <p>To install CrowdSec in a Docker container, you can follow the instructions in our <a href="/u/getting_started/installation/docker.md">Docker Installation Guide</a>.</p>
+        <p>For more information on the available environment variables, you can refer to the <a href="https://hub.docker.com/r/crowdsecurity/crowdsec">Docker Hub page</a>.</p>
+    </TabItem>
+    <TabItem value="kubernetes">
+        // mention the current guide u/getting_started/installation/kubernetes and this page having all the env variable https://artifacthub.io/packages/helm/ingress-nginx/ingress-nginx
+        <p>To install CrowdSec in a Kubernetes cluster, you can follow the instructions in our <a href="/u/getting_started/installation/kubernetes.md">Kubernetes Installation Guide</a>.</p>
+        <p>For more information on the available environment variables, you can refer to the <a href="https://artifacthub.io/packages/helm/crowdsec/crowdsec">Artifact Hub page</a>.</p>
+    </TabItem>
+</Tabs>
+
+### Verification
+
+Let's check that CrowdSec is running and able to retrieve the community blocklist !
+
+#### Enroll your Security Engine into CrowdSec Console 
+For advanced monitoring and trouble shooting the CrowdSec Console is a great tool to visualize your Security Engine's activity and alerts.
+<CheckboxProvider>
+<InteractiveCheckbox id="ConsoleEnroll" label=" Enroll into the console " />
+
+- [link to doc]
+- You'll see a confirmation pop up in the console for enrollment if not you might have conectivity issue to the central API [link to troubleshooting section]
+- You'll see the last heartbeat and the status of your Security Engine in the console
+- You'll be able to check various configurations for the upcoming steps of the installation
+- You'll be warned when a new version of CrowdSec is available
+
+#### CrowdSec installation health
+
+<InteractiveCheckbox id="CrowdsecRunning" label="Check that the CrowdSec service is running"  references={["ConsoleEnroll"]} />
+</CheckboxProvider>
+```bash
+systemctl status crowdsec
+```
+- You should see the service status as "active (running)".
+- The port configuration can be setup in config.yaml file or by setting the environment variables depending on your implementation
+
+> [ ] Check that your Local API (LAPI) is properly running: 
+
+```bash
+sudo cscli machines list
+```
+- You should see a list of machines, including the one you just installed CrowdSec on.
+- For an autonomous install the Security Engine is running and connecting to it's own LAPI
+- You should see a recent last heartbeat and a checkmark in status.
+
+> [ ] Check the metrics can be queried (optionnal for cscli metrics and prometheus):
+
+```bash
+sudo cscli metrics
+```
+- CrowdSec serves the metrics via a prometheus endpoint, check that it's able to run properly
+- You should see various tables, most still empty except the Local API Machines Metrics
+
+> [ ] Setup hub-update // ?@seb case we need this ?
+
+- ...
+
+#### CrowdSec connectivity health
+
+> [ ] Check your security engine can connect to the Central API
+
+```bash
+sudo cscli capi status
+```
+- You should see: "You can successfully interact with Central API (CAPI)"
+- Optionally additional status
+    - Sharing signals is enabled //+link to doc where to turn this on/off ?
+    - Pulling community blocklist is enabled //+link to doc where to turn this on/off ?
+    - Pulling blocklists from the console is enabled //+link to doc where to turn this on/off ?
+
+### 🚨 Troubleshooting
+<details>
+    <summary>There could be ports conflicts with other services</summary>
+
+    The Local API is running on port 8080 by default, and the Metrics server is running on port 6060 by default.  
+    If you have other services running on these ports, you can change the ports in the configuration file `/etc/crowdsec/config.yaml` or by setting the environment variables `CROWDSEC_API_PORT` and `CROWDSEC_METRICS_PORT` when running CrowdSec in a container.
+</details>
+<details>
+    <summary>No connectivity to Central API</summary>
+
+    Check that you have access to internet at least api.crowdsec.net
+    Check that your online api credentials exist /etc/crowdsec/config/online_api_credentials.yaml (default path)
+        Eventually reset them with the following command sudo cscli capi register
+</details>
+<details>
+    <summary>Enrollment in Console not working</summary>
+
+    Make sure you are looking in the proper organization in the console: the enrollment key is linked to your organization.  
+      If you have multiple organizations, you can switch using the organization selector in the top left corner of the console.
+    If you already checked that there are no connectivity issues, you can try to re-enroll using the --overwrite flag, effectively forcing the engine to link to your organization.
+</details>
+<details>
+    <summary>Can't see the latest version of the package</summary>
+
+   Update your repository and install again.
+    If latest version not available, Might depend on the plateform you're installing it on (be patient, it will come) 
+</details>