@cccsaurora/howler-ui 2.14.0-dev.257 → 2.14.0-dev.263

package/components/routes/help/HitSchemaDocumentation.js

@@ -0,0 +1,159 @@
+import { jsxs, jsx, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Clear } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, TableRow, TableCell, Stack, Typography, Chip, Alert, AlertTitle, Box, TextField, InputAdornment, IconButton, Table, TableBody, TableHead } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import Markdown from "../../elements/display/Markdown.js";
+import { memo, useContext, useState, useMemo, useCallback } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { useSearchParams } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+import Throttler from "../../../utils/Throttler.js";
+import { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+const SCHEMA_EN = "# Hit Schema\n\nA howler hit can contain a large number of unique fields, each with a particular definition, in order to make hits across analytics mutually intelligible. Below is a table containing all the given hit fields, as well as their type and a short description of what they are used for. While the vast majority of the fields are based on the Elastic Common Schema (see [this guide on ECS](https://www.elastic.co/guide/en/ecs/8.5/index.html) for documentation), there are also custom fields depending on the plugins enabled in Howler.\n\n## Howler Fields - Best Practices\n\nIn order to allow for some consistency between various analytics, there are a number of fields with recommended (but not required) styles. These include:\n\n- `howler.analytic`: Denotes the overarching analytic that generated the hit. For example, if the name of your analytic is Bad Guy Finder, you can set this field to Bad Guy Finder. Examples of use:\n  - Bad Guy Finder (correct)\n  - BadGuyFinder (acceptable, but spaces are preferred)\n  - bad.guy.finder (incorrect, don't use periods)\n  - bad_guy_finder (incorrect, don't use underscores)\n  - in general, you can use [this regex](https://regexr.com/7ikco) to validate your proposed analytic name\n\n- `howler.detection`: Denotes the specific algorithm or portion of the analytic that generated the hit. For example, if your analytic has three ways of detecting hits that should be looked at (Impossible Travel, Incorrect Login Information, XSS Attack Detection), then the manner in which the hit you're creating was detected should be set. Examples of use:\n  - Impossible Travel (correct)\n  - ImpossibleTravel (acceptable, but spaces are preferred)\n  - impossible.travel (incorrect, don't use periods)\n  - impossible_travel (incorrect, don't use underscores)\n";
+const SCHEMA_FR = "# Schéma du hit\n\nUn hit howler peut contenir un grand nombre de champs uniques, chacun avec une définition particulière, afin de rendre les hits mutuellement intelligibles d'une analyse à l'autre. Vous trouverez ci-dessous un tableau contenant tous les champs de résultats donnés, ainsi que leur type et une brève description de leur utilisation. Alors que la grande majorité des champs sont basés sur le schéma commun Elastic (voir [ici](https://www.elastic.co/guide/en/ecs/8.5/index.html) pour la documentation), il existe également des champs personnalisés pour Howler, et aussi des champs supplémentaires configurés par divers plugins Howler.\n\n## Champs Howler - Bonnes pratiques\n\nAfin d'assurer une certaine cohérence entre les différents analytiques, il existe un certain nombre de champs dont le style est recommandé (mais pas obligatoire). Il s'agit notamment des champs suivants:\n\n- `howler.analytic` : Indique l'analyse globale qui a généré le résultat. Par exemple, si le nom de votre analyse est Bad Guy Finder, vous pouvez définir ce champ à Bad Guy Finder. Exemples d'utilisation :\n  - Bad Guy Finder (correct)\n  - BadGuyFinder (acceptable, mais les espaces sont préférables)\n  - bad.guy.finder (incorrect, ne pas utiliser de points)\n  - bad_guy_finder (incorrect, n'utilisez pas de caractères de soulignement)\n  - en général, vous pouvez utiliser [cette regex](https://regexr.com/7ikco) pour valider le nom analytique que vous proposez\n\n- `howler.detection` : Indique l'algorithme spécifique ou la partie de l'analyse qui a généré le hit. Par exemple, si votre analyse a trois façons de détecter les hits qui devraient être examinés (Voyage impossible, Informations de connexion incorrectes, Détection d'attaque XSS), alors la façon dont le hit que vous créez a été détecté devrait être définie. Exemples d'utilisation :\n  - Impossible Travel (correct)\n  - ImpossibleTravel (acceptable, mais les espaces sont préférables)\n  - impossible.travel (incorrect, ne pas utiliser de points)\n  - impossible_travel (incorrect, ne pas utiliser de caractères de soulignement)\n";
+const THROTTLER = new Throttler(300);
+const TableHeader = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+    /* @__PURE__ */ jsx(TableCell, { width: "100", children: t("help.hit.schema.table.name") }),
+    /* @__PURE__ */ jsx(TableCell, { children: t("help.hit.schema.table.type") }),
+    /* @__PURE__ */ jsx(TableCell, { children: t("help.hit.schema.table.description") })
+  ] }) });
+};
+const RowEntry = memo(({ field }) => {
+  var _a;
+  const { t } = useTranslation();
+  const { config } = useContext(ApiConfigContext);
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(TableRow, { children: [
+    /* @__PURE__ */ jsx(TableCell, { width: "350", style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx(Typography, { children: field }),
+      config.indexes.hit[field].list && /* @__PURE__ */ jsx(Chip, { color: "warning", size: "small", label: t("list") }),
+      config.indexes.hit[field].deprecated && /* @__PURE__ */ jsx(Chip, { color: "error", size: "small", label: t("deprecated") })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableCell, { width: "75", children: /* @__PURE__ */ jsx(Typography, { children: config.indexes.hit[`${field}.key_a`] ? "dict" : config.indexes.hit[field].type }) }),
+    /* @__PURE__ */ jsxs(TableCell, { sx: { maxWidth: "500px" }, children: [
+      /* @__PURE__ */ jsx(Markdown, { md: config.indexes.hit[field].description ?? t("help.hit.schema.description.missing") }),
+      config.indexes.hit[field].regex && /* @__PURE__ */ jsx("a", { href: `https://regexr.com/?expression=${encodeURIComponent(config.indexes.hit[field].regex)}`, children: /* @__PURE__ */ jsx(Typography, { children: t("help.hit.schema.regex") }) }),
+      ((_a = config.indexes.hit[field].values) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs(Typography, { children: [
+          t("help.hit.schema.values"),
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", children: config.indexes.hit[field].values.map((val) => /* @__PURE__ */ jsx(
+          "code",
+          {
+            style: {
+              padding: theme.spacing(0.5),
+              border: "thin solid",
+              borderColor: theme.palette.divider,
+              borderRadius: theme.shape.borderRadius
+            },
+            children: val
+          },
+          val
+        )) })
+      ] }),
+      config.indexes.hit[field].deprecated_description && /* @__PURE__ */ jsxs(Alert, { variant: "outlined", color: "error", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: t("deprecation.instructions") }),
+        /* @__PURE__ */ jsx(Markdown, { md: config.indexes.hit[field].deprecated_description })
+      ] })
+    ] })
+  ] });
+});
+const HitSchemaDocumentation = () => {
+  const { i18n, t } = useTranslation();
+  const { config } = useContext(ApiConfigContext);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [phrase, setPhrase] = useState(searchParams.get("phrase") || "");
+  const md = useMemo(() => {
+    return i18n.language === "en" ? SCHEMA_EN : SCHEMA_FR;
+  }, [i18n.language]);
+  const onSearchChange = useCallback(
+    (e) => {
+      setPhrase(e.target.value);
+      THROTTLER.debounce(() => {
+        if (e.target.value) {
+          searchParams.set("phrase", e.target.value);
+        } else {
+          searchParams.delete("phrase");
+        }
+        setSearchParams(searchParams);
+      });
+    },
+    [searchParams, setSearchParams]
+  );
+  const onClear = useCallback(() => {
+    setPhrase("");
+    searchParams.delete("phrase");
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+  const filterSearch = useCallback(
+    (field) => {
+      var _a;
+      if (!phrase) {
+        return true;
+      }
+      const _phrase = phrase.toLowerCase();
+      if (field.includes(_phrase)) {
+        return true;
+      }
+      const indexData = config.indexes.hit[field];
+      if (indexData.type.includes(_phrase) || ((_a = indexData.description) == null ? void 0 : _a.toLowerCase().includes(_phrase))) {
+        return true;
+      }
+      return false;
+    },
+    [config.indexes.hit, phrase]
+  );
+  const howlerFields = useMemo(
+    () => Object.keys(config.indexes.hit).filter((field) => field.startsWith("howler") && !field.endsWith("key_a")).filter(filterSearch),
+    [config.indexes.hit, filterSearch]
+  );
+  const assemblylineFields = useMemo(
+    () => Object.keys(config.indexes.hit).filter((field) => field.startsWith("assemblyline") && !field.endsWith("key_a")).filter(filterSearch),
+    [config.indexes.hit, filterSearch]
+  );
+  const ecsFields = useMemo(
+    () => Object.keys(config.indexes.hit).filter((field) => !field.startsWith("howler") && !field.startsWith("assemblyline") && !field.endsWith("key_a")).filter(filterSearch),
+    [config.indexes.hit, filterSearch]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+    /* @__PURE__ */ jsx(Markdown, { md }),
+    /* @__PURE__ */ jsx(Box, { sx: { py: 2 } }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        value: phrase,
+        onChange: onSearchChange,
+        label: t("help.hit.schema.search.prompt"),
+        InputProps: {
+          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { disabled: !phrase, onClick: onClear, children: /* @__PURE__ */ jsx(Clear, {}) }) })
+        }
+      }
+    ),
+    howlerFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", pt: 3, children: t("help.hit.schema.table.howler") }),
+      /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+        /* @__PURE__ */ jsx(TableHeader, {}),
+        /* @__PURE__ */ jsx(TableBody, { children: howlerFields.map((field) => /* @__PURE__ */ jsx(RowEntry, { field }, field)) })
+      ] })
+    ] }),
+    assemblylineFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", pt: 3, children: t("help.hit.schema.table.assemblyline") }),
+      /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+        /* @__PURE__ */ jsx(TableHeader, {}),
+        /* @__PURE__ */ jsx(TableBody, { children: assemblylineFields.map((field) => /* @__PURE__ */ jsx(RowEntry, { field }, field)) })
+      ] })
+    ] }),
+    ecsFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", pt: 3, children: t("help.hit.schema.table.ecs") }),
+      /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+        /* @__PURE__ */ jsx(TableHeader, {}),
+        /* @__PURE__ */ jsx(TableBody, { children: ecsFields.map((field) => /* @__PURE__ */ jsx(RowEntry, { field }, field)) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  HitSchemaDocumentation as default
+};

package/components/routes/help/NotebookDocumentation.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const NotebookDocumentation: FC;
+export default NotebookDocumentation;

package/components/routes/help/NotebookDocumentation.js

@@ -0,0 +1,19 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import PageCenter from "../../../commons/components/pages/PageCenter.js";
+import Markdown from "../../elements/display/Markdown.js";
+import { useScrollRestoration } from "../../hooks/useScrollRestoration.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+const NOTEBOOK_EN = '# Notebook Integration\n\nHowler provides the option to add notebooks to analytics to aid in triaging hits and alerts. It allows users to quickly spin up a notebook within a jupyter environment with either analytic and/or hit information.\n\nHowler will look for variables to replace within the first code cell of a notebook, giving the flexibility of providing context within the first cells using markdown.\n\nHere an example of how howler will replace the variables within your notebook:\n\n```notebook tab="Template"\n{\n  "cells": [\n    {\n      "cell_type": "code",\n      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",\n      "outputs": [],\n      "source": [\n        "howlerHitId = \\"{{hit.howler.id}}\\"\\n",\n        "howlerAnalyticId = \\"{{analytic.analytic_id}}\\""\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",\n      "outputs": [],\n      "source": [\n        "from howler_client import get_client\\n\\n",\n        "howler = get_client(\\"$CURRENT_URL\\")\\n",\n        "hit = howler.hit(howlerHitId)"\n      ]\n    }\n  ],\n  "nbformat": 4,\n  "nbformat_minor": 5\n}\n```\n\n```notebook tab="Processed"\n{\n  "cells": [\n    {\n      "cell_type": "code",\n      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",\n      "outputs": [],\n      "source": [\n        "howlerHitId = \\"7dxHCat0Y2Sj48qyU7ZkVV\\"\\n",\n        "howlerAnalyticId = \\"2SXKl6Cq4rOxWLps2SFHyB\\""\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",\n      "outputs": [],\n      "source": [\n        "from howler_client import get_client\\n\\n",\n        "howler = get_client(\\"$CURRENT_URL\\")\\n",\n        "hit = howler.hit(howlerHitId)"\n      ]\n    }\n  ],\n  "nbformat": 4,\n  "nbformat_minor": 5\n}\n```\n\nor with some markdown in the first cell:\n\n```notebook tab="Template"\n{\n  "cells": [\n    {\n      "cell_type": "markdown",\n      "id": "e17cbaa8-9849-462f-9bd2-bf30943f76b3",\n      "source": [\n        "### Example Notebook"\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",\n      "outputs": [],\n      "source": [\n        "howlerHitId = \\"{{hit.howler.id}}\\"\\n",\n        "howlerAnalyticId = \\"{{analytic.analytic_id}}\\""\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",\n      "outputs": [],\n      "source": [\n        "from howler_client import get_client\\n\\n",\n        "howler = get_client(\\"$CURRENT_URL\\")\\n",\n        "hit = howler.hit(howlerHitId)"\n      ]\n    }\n  ],\n  "nbformat": 4,\n  "nbformat_minor": 5\n}\n```\n\n```notebook tab="Processed"\n{\n  "cells": [\n    {\n      "cell_type": "markdown",\n      "id": "e17cbaa8-9849-462f-9bd2-bf30943f76b3",\n      "source": [\n        "### Example Notebook"\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",\n      "outputs": [],\n      "source": [\n        "howlerHitId = \\"7dxHCat0Y2Sj48qyU7ZkVV\\"\\n",\n        "howlerAnalyticId = \\"2SXKl6Cq4rOxWLps2SFHyB\\""\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",\n      "outputs": [],\n      "source": [\n        "from howler_client import get_client\\n\\n",\n        "howler = get_client(\\"$CURRENT_URL\\")\\n",\n        "hit = howler.hit(howlerHitId)"\n      ]\n    }\n  ],\n  "nbformat": 4,\n  "nbformat_minor": 5\n}\n```\n\nCurrently, howler will only try to replace hit and analytic objects.\n\n# Requirements for the notebook integration to work\n\n- A working NBGallery setup is required.\n  - If the user can send a notebook from nbgallery to their jupyter environment, it will also work using the open in jupyhub button on Howler.\n- Just like with NBGallery, the user needs to make sure their Jupyter Environment is currently running, otherwise Howler will fail to open the notebook.\n\nHowler will append the id of the Hit/Alert when sending a notebook to Jupyter, making it easy to track for analysis. It is possible to open a notebook from within an analytic page, in this case, no hit id will be appended to the file name of the notebook and Howler won\'t be able to replace hit informations in the templated notebook since no hit was provided.\n\n# Adding a notebook to an analytic\n\nTo add a notebook to an analytic, it\'s only necessary to provide the NBGallery link of the notebook. The link shoud look like this. The notebook shouldn\'t be private, otherwise, only the user that uploaded it will be able to use it on Howler.\n\n```\n$NBGALLERY_URL/notebooks/5-example\n```\n\n```alert\nIt is advised to clear any outputs from a notebook before adding it on NBGallery to avoid leaking sensitive data.\n```\n';
+const NOTEBOOK_FR = '# Intégration de carnets\n\nHowler offre la possibilité d\'ajouter des carnets aux analyses afin de faciliter le triage des hits et des alertes. Il permet aux utilisateurs de créer rapidement un carnet dans un environnement Jupyter avec des informations analytiques et/ou des informations sur les hits.\n\nHowler cherchera des variables à remplacer dans la première cellule de code d\'un notebook, ce qui permettra de fournir un contexte dans les premières cellules à l\'aide de markdown.\n\nVoici un exemple de la façon dont Howler remplacera les variables dans votre carnet :\n\n```notebook tab="Modèle"\n{\n  "cells": [\n    {\n      "cell_type": "code",\n      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",\n      "outputs": [],\n      "source": [\n        "HowlerHitId = \\"{{hit.howler.id}}\\"\\n",\n        "HowlerAnalyticId = \\"{{analytic.analytic_id}}\\""\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",\n      "outputs": [],\n      "source": [\n        "from howler_client import get_client\\n\\n",\n        "howler = get_client(\\"$CURRENT_URL\\")\\n",\n        "hit = howler.hit(howlerHitId)"\n      ]\n    }\n  ],\n  "nbformat": 4,\n  "nbformat_minor": 5\n}\n```\n\n```notebook tab="Traité"\n{\n  "cells": [\n    {\n      "cell_type": "code",\n      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",\n      "outputs": [],\n      "source": [\n        "HowlerHitId = \\"7dxHCat0Y2Sj48qyU7ZkVV\\"\\n",\n        "HowlerAnalyticId = \\"2SXKl6Cq4rOxWLps2SFHyB\\""\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",\n      "outputs": [],\n      "source": [\n        "from howler_client import get_client\\n\\n",\n        "howler = get_client(\\"$CURRENT_URL\\")\\n",\n        "hit = howler.hit(howlerHitId)"\n      ]\n    }\n  ],\n  "nbformat": 4,\n  "nbformat_minor": 5\n}\n```\n\nou avec du markdown dans la première cellule :\n\n```notebook tab="Modèle"\n{\n  "cells": [\n    {\n      "cell_type": "markdown",\n      "id": "e17cbaa8-9849-462f-9bd2-bf30943f76b3",\n      "source": [\n        "### Exemple de carnet"\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",\n      "outputs": [],\n      "source": [\n        "HowlerHitId = \\"{{hit.howler.id}}\\"\\n",\n        "HowlerAnalyticId = \\"{{analytic.analytic_id}}\\""\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",\n      "outputs": [],\n      "source": [\n        "from howler_client import get_client\\n\\n",\n        "howler = get_client(\\"$CURRENT_URL\\")\\n",\n        "hit = howler.hit(howlerHitId)"\n      ]\n    }\n  ],\n  "nbformat": 4,\n  "nbformat_minor": 5\n}\n```\n\n```notebook tab="Traité"\n{\n  "cells": [\n    {\n      "cell_type": "markdown",\n      "id": "e17cbaa8-9849-462f-9bd2-bf30943f76b3",\n      "source": [\n        "### Exemple de carnet"\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",\n      "outputs": [],\n      "source": [\n        "HowlerHitId = \\"7dxHCat0Y2Sj48qyU7ZkVV\\"\\n",\n        "HowlerAnalyticId = \\"2SXKl6Cq4rOxWLps2SFHyB\\""\n      ]\n    },\n    {\n      "cell_type": "code",\n      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",\n      "outputs": [],\n      "source": [\n        "from howler_client import get_client\\n\\n",\n        "howler = get_client(\\"$CURRENT_URL\\")\\n",\n        "hit = howler.hit(howlerHitId)"\n      ]\n    }\n  ],\n  "nbformat": 4,\n  "nbformat_minor": 5\n}\n```\n\nPrésentement, Howler n\'essaiera de remplacer que les objets de hit et d\'analytic.\n\n# Conditions requises pour que l\'intégration de carnets fonctionne\n\n- Une configuration NBGallery fonctionnelle est nécessaire.\n  - Si l\'utilisateur peut envoyer un carnet depuis NBGallery vers son environnement Jupyter, il fonctionnera aussi en utilisant le bouton open in jupyhub sur Howler.\n- Comme pour NBGallery, l\'utilisateur doit s\'assurer que son environnement Jupyter est en cours d\'exécution, sinon Howler ne parviendra pas à envoyer le carnet.\n\nHowler ajoutera l\'identifiant du Hit/Alert lorsqu\'il enverra un carnet à Jupyter, ce qui facilitera son suivi pour l\'analyse. Il est possible d\'ouvrir un carnet à partir d\'une page analytique. Dans ce cas, aucun identifiant de résultat ne sera ajouté au nom de fichier du carnet et Howler ne sera pas en mesure de remplacer les informations de hit dans le carnet modèle puisqu\'aucun hit n\'a été fourni.\n\n# Ajout d\'un carnet à une analyse\n\nPour ajouter un carnet à une analyse, il suffit de fournir le lien NBGallery du carnet. Le lien ressemblera à l\'exemple ci-dessous. Le carnet ne doit pas être privé, sinon seul l\'utilisateur qui l\'a ajouté pourra l\'utiliser sur Howler.\n\n```\n$NBGALLERY_URL/notebooks/5-example\n```\n\n```alert\nIl est conseillé d\'effacer toutes les sorties d\'un carnet avant de l\'ajouter sur NBGallery afin d\'éviter la fuite de données sensibles.\n```\n';
+const NotebookDocumentation = () => {
+  const { i18n } = useTranslation();
+  useScrollRestoration();
+  const markdown = (i18n.language === "en" ? NOTEBOOK_EN : NOTEBOOK_FR).replaceAll(
+    "$NBGALLERY_URL",
+    window.location.host.startsWith("localhost") ? "https://nbgallery.dev.analysis.cyber.gc.ca" : window.location.origin.replace(/howler(-stg)/, "nbgallery")
+  ).replaceAll("$CURRENT_URL", window.location.origin);
+  return /* @__PURE__ */ jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: /* @__PURE__ */ jsx(Markdown, { md: markdown }) });
+};
+export {
+  NotebookDocumentation as default
+};

package/components/routes/help/OverviewDocumentation.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const OverviewDocumentation: FC;
+export default OverviewDocumentation;

package/components/routes/help/OverviewDocumentation.js

@@ -0,0 +1,15 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import PageCenter from "../../../commons/components/pages/PageCenter.js";
+import HandlebarsMarkdown from "../../elements/display/HandlebarsMarkdown.js";
+import { useScrollRestoration } from "../../hooks/useScrollRestoration.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import ErrorBoundary from "../ErrorBoundary.js";
+import { useStartingTemplate } from "../overviews/startingTemplate.js";
+const OverviewDocumentation = () => {
+  useScrollRestoration();
+  const template = useStartingTemplate();
+  return /* @__PURE__ */ jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(HandlebarsMarkdown, { md: template }) }) });
+};
+export {
+  OverviewDocumentation as default
+};

package/components/routes/help/RetentionDocumentation.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const RetentionDocumentation: FC;
+export default RetentionDocumentation;

package/components/routes/help/RetentionDocumentation.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import PageCenter from "../../../commons/components/pages/PageCenter.js";
+import Markdown from "../../elements/display/Markdown.js";
+import { useScrollRestoration } from "../../hooks/useScrollRestoration.js";
+import { useContext, useState, useMemo, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { Skeleton } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { a as api } from "../../../index-BPPnUdfP.js";
+import { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+import HitCard from "../../elements/hit/HitCard.js";
+import { HitLayout } from "../../elements/hit/HitLayout.js";
+const AUTH_EN = "# Retention in Howler\n\nIn order to comply with organizational policies, Howler is configured to purge stale alerts after a specific amount of time. On this instance, that duration is `duration`.\n\nHowler calculates whether it is time for the removal of an alert by the `event.created` date - once this surpasses the confgured deadline, a nightly automated job will remove the alert.\n\nIn order to communicate this to the user, see the example alert below:\n\n`alert`\n\nIn the top right, hovering over the timestamp will outline how long users have before the alert is removed. In order to ensure compliance with policy, ensure that `event.created` matches the date the underlying data was collected, allowing howler to ensure data is purged in time.\n\n```alert\nThis will soon change - there will be a dedicated field to set that will override this approach.\n```\n";
+const AUTH_FR = "# Rétention dans Howler\n\nAfin de se conformer au règlement, Howler est configuré pour purger les alertes périmées après une période de temps spécifique. Dans cette instance, cette durée est `duration`.\n\nHowler calcule s'il est temps de supprimer une alerte en fonction de la date `event.created` - une fois que celle-ci dépasse la date limite configurée, un travail automatisé nocturne supprimera l'alerte.\n\nAfin de communiquer cela à l'utilisateur, voir l'exemple d'alerte ci-dessous :\n\n`alert`\n\nEn haut à droite, le survol de l'horodatage indique le temps dont dispose l'utilisateur avant que l'alerte ne soit supprimée. Afin de se conformer au règlement, assurez-vous que `event.created` correspond à la date à laquelle les données sous-jacentes ont été collectées, ce qui permet à howler de s'assurer que les données sont purgées à temps.\n\n```alert\nCela va bientôt changer - il y aura un champ dédié à définir qui remplacera cette approche.\n```\n";
+const RetentionDocumentation = () => {
+  const { i18n } = useTranslation();
+  const { config } = useContext(ApiConfigContext);
+  useScrollRestoration();
+  const [hitId, setHitId] = useState();
+  const md = useMemo(
+    () => (i18n.language === "en" ? AUTH_EN : AUTH_FR).replace(/\$CURRENT_URL/g, window.location.origin),
+    [i18n.language]
+  );
+  useEffect(() => {
+    api.search.hit.post({
+      query: "howler.id:*",
+      sort: "event.created asc",
+      rows: 1,
+      fl: "howler.id"
+    }).then((val) => setHitId(val.items[0].howler.id));
+  });
+  return /* @__PURE__ */ jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: /* @__PURE__ */ jsx(
+    Markdown,
+    {
+      md,
+      components: {
+        duration: /* @__PURE__ */ jsxs("span", { children: [
+          config.configuration.system.retention.limit_amount,
+          " ",
+          config.configuration.system.retention.limit_unit
+        ] }),
+        alert: hitId ? /* @__PURE__ */ jsx(HitCard, { layout: HitLayout.DENSE, id: hitId }) : /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: "250px" })
+      }
+    }
+  ) });
+};
+export {
+  RetentionDocumentation as default
+};

package/components/routes/help/SearchDocumentation.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const SearchDocumentation: FC;
+export default SearchDocumentation;