@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

package/components/routes/help/markdown/fr/notebook.md

@@ -0,0 +1,157 @@
+# Intégration de carnets
+
+Howler 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.
+
+Howler 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.
+
+Voici un exemple de la façon dont Howler remplacera les variables dans votre carnet :
+
+```notebook tab="Modèle"
+{
+  "cells": [
+    {
+      "cell_type": "code",
+      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",
+      "outputs": [],
+      "source": [
+        "HowlerHitId = \"{{hit.howler.id}}\"\n",
+        "HowlerAnalyticId = \"{{analytic.analytic_id}}\""
+      ]
+    },
+    {
+      "cell_type": "code",
+      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",
+      "outputs": [],
+      "source": [
+        "from howler_client import get_client\n\n",
+        "howler = get_client(\"$CURRENT_URL\")\n",
+        "hit = howler.hit(howlerHitId)"
+      ]
+    }
+  ],
+  "nbformat": 4,
+  "nbformat_minor": 5
+}
+```
+
+```notebook tab="Traité"
+{
+  "cells": [
+    {
+      "cell_type": "code",
+      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",
+      "outputs": [],
+      "source": [
+        "HowlerHitId = \"7dxHCat0Y2Sj48qyU7ZkVV\"\n",
+        "HowlerAnalyticId = \"2SXKl6Cq4rOxWLps2SFHyB\""
+      ]
+    },
+    {
+      "cell_type": "code",
+      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",
+      "outputs": [],
+      "source": [
+        "from howler_client import get_client\n\n",
+        "howler = get_client(\"$CURRENT_URL\")\n",
+        "hit = howler.hit(howlerHitId)"
+      ]
+    }
+  ],
+  "nbformat": 4,
+  "nbformat_minor": 5
+}
+```
+
+ou avec du markdown dans la première cellule :
+
+```notebook tab="Modèle"
+{
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "id": "e17cbaa8-9849-462f-9bd2-bf30943f76b3",
+      "source": [
+        "### Exemple de carnet"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",
+      "outputs": [],
+      "source": [
+        "HowlerHitId = \"{{hit.howler.id}}\"\n",
+        "HowlerAnalyticId = \"{{analytic.analytic_id}}\""
+      ]
+    },
+    {
+      "cell_type": "code",
+      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",
+      "outputs": [],
+      "source": [
+        "from howler_client import get_client\n\n",
+        "howler = get_client(\"$CURRENT_URL\")\n",
+        "hit = howler.hit(howlerHitId)"
+      ]
+    }
+  ],
+  "nbformat": 4,
+  "nbformat_minor": 5
+}
+```
+
+```notebook tab="Traité"
+{
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "id": "e17cbaa8-9849-462f-9bd2-bf30943f76b3",
+      "source": [
+        "### Exemple de carnet"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "id": "fe6f810f-2459-4ad7-92ac-1e925ce892d4",
+      "outputs": [],
+      "source": [
+        "HowlerHitId = \"7dxHCat0Y2Sj48qyU7ZkVV\"\n",
+        "HowlerAnalyticId = \"2SXKl6Cq4rOxWLps2SFHyB\""
+      ]
+    },
+    {
+      "cell_type": "code",
+      "id": "586470ef-c8e6-45b1-bd17-17ccd083eef1",
+      "outputs": [],
+      "source": [
+        "from howler_client import get_client\n\n",
+        "howler = get_client(\"$CURRENT_URL\")\n",
+        "hit = howler.hit(howlerHitId)"
+      ]
+    }
+  ],
+  "nbformat": 4,
+  "nbformat_minor": 5
+}
+```
+
+Présentement, Howler n'essaiera de remplacer que les objets de hit et d'analytic.
+
+# Conditions requises pour que l'intégration de carnets fonctionne
+
+- Une configuration NBGallery fonctionnelle est nécessaire.
+  - 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.
+- 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.
+
+Howler 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.
+
+# Ajout d'un carnet à une analyse
+
+Pour 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.
+
+```
+$NBGALLERY_URL/notebooks/5-example
+```
+
+```alert
+Il 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.
+```

package/components/routes/help/markdown/fr/retention.md

@@ -0,0 +1,15 @@
+# Rétention dans Howler
+
+Afin 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`.
+
+Howler 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.
+
+Afin de communiquer cela à l'utilisateur, voir l'exemple d'alerte ci-dessous :
+
+`alert`
+
+En 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.
+
+```alert
+Cela va bientôt changer - il y aura un champ dédié à définir qui remplacera cette approche.
+```

package/components/routes/help/markdown/fr/schema.md

@@ -0,0 +1,20 @@
+# Schéma du hit
+
+Un 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.
+
+## Champs Howler - Bonnes pratiques
+
+Afin 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:
+
+- `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 :
+  - Bad Guy Finder (correct)
+  - BadGuyFinder (acceptable, mais les espaces sont préférables)
+  - bad.guy.finder (incorrect, ne pas utiliser de points)
+  - bad_guy_finder (incorrect, n'utilisez pas de caractères de soulignement)
+  - en général, vous pouvez utiliser [cette regex](https://regexr.com/7ikco) pour valider le nom analytique que vous proposez
+
+- `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 :
+  - Impossible Travel (correct)
+  - ImpossibleTravel (acceptable, mais les espaces sont préférables)
+  - impossible.travel (incorrect, ne pas utiliser de points)
+  - impossible_travel (incorrect, ne pas utiliser de caractères de soulignement)

package/components/routes/help/markdown/fr/templates.md

@@ -0,0 +1,23 @@
+# Modèles de Howler
+
+Howler est, fondamentalement, une application qui permet aux analystes de trier les hits et les alertes. Afin de s'assurer que les analystes puissent le faire aussi efficacement que possible, nous voulons avoir la possibilité de présenter les données pertinentes pour une alerte donnée aux analystes d'une manière facile et compréhensible.
+
+À cette fin, Howler permet aux analystes et aux ingénieurs de détection de créer des **modèles**, qui permettent à diverses analyses et à leurs détections de présenter des champs et des données pertinents pour le triage des alertes générées par cette analyse/détection. Par exemple, considérons deux alertes différentes, générées par deux détections différentes :
+
+```json
+$ALERT_1
+```
+
+```json
+$ALERT_2
+```
+
+Notez que si les deux cartes partagent des champs similaires, elles diffèrent également. Nous voulons que chacune de ces cartes d'alerte présente des données différentes - pour cela, nous pouvons utiliser des modèles. Cela nous permet d'afficher les deux occurrences dans la même liste, mais avec des champs différents :
+
+===SPLIT===
+
+Comme nous pouvons le voir, en spécifiant un modèle pour chacune des détections, des données différentes seront présentées à l'analyste.Pour ce faire, vous pouvez utiliser le créateur de modèles [ici]($CURRENT_URL/templates/view?type=personal).
+
+```alert
+Notez que vous devez avoir ingéré des hits pour la paire analyse/détection donnée pour qu'elle apparaisse en tant qu'option dans l'interface utilisateur de création de modèle !
+```

package/components/routes/help/markdown/fr/views.md

@@ -0,0 +1,11 @@
+# Vues
+
+Les vues sont une fonctionnalité de Howler qui permet aux utilisateurs de créer des requêtes personnalisées par défaut à travers lesquelles ils peuvent organiser et trier les hits. Dans ce document, nous décrirons comment créer et interagir avec des vues.
+
+## Utilisation d'une vue
+
+Vous pouvez utiliser les vues en accédant au gestionnaire de vues sous [Manage > Views](/views). En cliquant sur une vue, vous l'ouvrirez dans la page de recherche. Vous pouvez également utiliser l'icône `recherche` pour ouvrir la vue dans la page de recherche. Vous pouvez également modifier les vues qui vous appartiennent et les marquer comme favorites. Cela les affichera dans le menu déroulant `t(route.views.saved)` dans la barre latérale. En haut à droite, vous pouvez également choisir votre `t(route.views.manager.default)`, qui sera sélectionné par défaut lors de l'ouverture de la page d'alertes.
+
+## Créer des vues
+
+Pour créer une vue, vous pouvez utiliser la page de création de vue, située [ici](/views/create). Cette page vous permet de modifier votre vue, de spécifier un `t(hit.search.sort.fields)` et un `t(hit.search.span)`, et de sauvegarder la vue avec un nom particulier. Vous pouvez marquer une vue comme globale ou personnelle, en fonction des personnes que vous souhaitez voir et utiliser.

package/components/routes/hits/search/BundleParentMenu.tsx

@@ -0,0 +1,73 @@
+import { AccountTree } from '@mui/icons-material';
+import { IconButton, Paper, Popover, Skeleton, Stack, Tooltip } from '@mui/material';
+import api from 'api';
+import HowlerCard from 'components/elements/display/HowlerCard';
+import HitBanner from 'components/elements/hit/HitBanner';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import type { Hit } from 'models/entities/generated/Hit';
+import type { FC } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+const BundleParentMenu: FC<{ bundle: Hit }> = ({ bundle }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [parentAnchor, setParentAnchor] = useState<HTMLElement>(null);
+
+  const [parentHits, setParentHits] = useState<Hit[]>([]);
+
+  const onSelect = useCallback(
+    (bundleId: string) => {
+      navigate(`/bundles/${bundleId}?span=date.range.all&query=howler.id%3A*`);
+      setParentAnchor(null);
+    },
+    [navigate]
+  );
+
+  useEffect(() => {
+    if (!parentAnchor) {
+      return;
+    }
+
+    api.search.hit
+      .post({ query: `howler.id:(${bundle.howler.bundles.join(' OR ')})` })
+      .then(response => setParentHits(response.items));
+  }, [bundle.howler.bundles, parentAnchor]);
+
+  return (
+    <>
+      <Tooltip title={t('hit.bundle.parents.show')}>
+        <IconButton size="small" onClick={event => setParentAnchor(event.currentTarget)}>
+          <AccountTree fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Popover
+        open={!!parentAnchor}
+        anchorEl={parentAnchor}
+        anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        onClose={() => setParentAnchor(null)}
+      >
+        <Paper sx={{ p: 1, minWidth: '750px' }}>
+          <Stack spacing={1}>
+            {parentHits.length < 1
+              ? bundle.howler.bundles.map(id => <Skeleton key={id} variant="rounded" height="100px" />)
+              : parentHits.map(parent => (
+                  <HowlerCard
+                    key={parent.howler.id}
+                    sx={{ p: 1, cursor: 'pointer' }}
+                    onClick={() => onSelect(parent.howler.id)}
+                  >
+                    <HitBanner hit={parent} layout={HitLayout.DENSE} />
+                  </HowlerCard>
+                ))}
+          </Stack>
+        </Paper>
+      </Popover>
+    </>
+  );
+};
+
+export default BundleParentMenu;

package/components/routes/hits/search/BundleScroller.tsx

@@ -0,0 +1,8 @@
+import { useScrollRestoration } from 'components/hooks/useScrollRestoration';
+import type { FC, PropsWithChildren } from 'react';
+
+export const BundleScroller: FC<PropsWithChildren> = ({ children }) => {
+  useScrollRestoration('hitscrollbar');
+
+  return <>{children}</>;
+};

package/components/routes/hits/search/CustomSort.tsx

@@ -0,0 +1,94 @@
+import { ArrowDownward, ArrowUpward, Cancel } from '@mui/icons-material';
+import { Autocomplete, Chip, Grid, MenuItem, Select, Stack, TextField } from '@mui/material';
+import { FieldContext } from 'components/app/providers/FieldProvider';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { uniqBy } from 'lodash-es';
+import type { FC } from 'react';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+
+const CustomSort: FC = () => {
+  const { t } = useTranslation();
+  const [field, setField] = useState('');
+  const [sort, setSort] = useState<'asc' | 'desc' | ''>('');
+  const { hitFields, getHitFields } = useContext(FieldContext);
+
+  const sortEntries = useContextSelector(ParameterContext, ctx => ctx.sort?.split(','));
+  const setSavedSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
+
+  const sortFields = useMemo(
+    () => sortEntries.map(entry => entry.split(' ').slice(0, 2) as [string, string]),
+    [sortEntries]
+  );
+
+  useEffect(() => {
+    getHitFields();
+  }, [getHitFields]);
+
+  useEffect(() => {
+    if (!sort) {
+      setSort('desc');
+    }
+  }, [sort]);
+
+  useEffect(() => {
+    if (!field) {
+      return;
+    }
+
+    setSavedSort(uniqBy([...sortEntries, `${field} ${sort}`], entry => entry.replace(/ .+/, '')).join(','));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [field]);
+
+  return (
+    <Stack spacing={1} maxWidth="450px">
+      <Stack direction="row" spacing={1}>
+        <Autocomplete
+          fullWidth
+          sx={{ minWidth: '225px' }}
+          size="small"
+          value={field}
+          options={hitFields.map(_field => _field.key)}
+          getOptionDisabled={option => sortEntries.map(entry => entry.replace(/ .+/, '')).includes(option)}
+          renderInput={_params => <TextField {..._params} label={t('hit.search.sort.fields')} />}
+          onChange={(_, value) => setField(value)}
+          disableClearable
+        />
+        <Select
+          size="small"
+          sx={{ minWidth: '150px' }}
+          value={sort}
+          onChange={e => setSort(e.target.value as 'asc' | 'desc')}
+        >
+          <MenuItem value="asc">{t('asc')}</MenuItem>
+          <MenuItem value="desc">{t('desc')}</MenuItem>
+        </Select>
+      </Stack>
+      <Grid container spacing={1} sx={theme => ({ marginLeft: `${theme.spacing(-1)} !important` })}>
+        {sortFields.map(([key, direction]) => (
+          <Grid item key={key}>
+            <Chip
+              variant="outlined"
+              label={key}
+              icon={direction === 'asc' ? <ArrowUpward /> : <ArrowDownward />}
+              deleteIcon={<Cancel />}
+              onClick={() =>
+                setSavedSort(
+                  sortEntries
+                    .map(entry =>
+                      entry?.replace(`${key} ${direction}`, `${key} ${direction === 'asc' ? 'desc' : 'asc'}`)
+                    )
+                    .join(',')
+                )
+              }
+              onDelete={() => setSavedSort(sortEntries.filter(entry => entry && entry.split(' ')[0] != key).join(','))}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </Stack>
+  );
+};
+
+export default memo(CustomSort);