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

package/components/routes/overviews/markdownExtendedTokenProvider.ts

@@ -0,0 +1,296 @@
+/**
+ * Adapted from https://github.com/microsoft/monaco-editor/blob/main/src/basic-languages/markdown/markdown.ts
+ */
+
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import type { languages } from 'monaco-editor';
+
+export const conf: languages.LanguageConfiguration = {
+  comments: {
+    blockComment: ['<!--', '-->']
+  },
+  colorizedBracketPairs: [],
+  brackets: [
+    ['{', '}'],
+    ['[', ']'],
+    ['(', ')']
+  ],
+  autoClosingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '<', close: '>', notIn: ['string'] }
+  ],
+  surroundingPairs: [
+    { open: '(', close: ')' },
+    { open: '[', close: ']' },
+    { open: '`', close: '`' }
+  ],
+  folding: {
+    markers: {
+      start: new RegExp('^\\s*<!--\\s*#?region\\b.*-->'),
+      end: new RegExp('^\\s*<!--\\s*#?endregion\\b.*-->')
+    }
+  }
+};
+
+export const language = <languages.IMonarchLanguage>{
+  defaultToken: '',
+  tokenPostfix: '.md',
+
+  // escape codes
+  control: /[\\`*_\[\]{}()#+\-\.!]/,
+  noncontrol: /[^\\`*_\[\]{}()#+\-\.!]/,
+  escapes: /\\(?:@control)/,
+
+  // escape codes for javascript/CSS strings
+  jsescapes: /\\(?:[btnfr\\"']|[0-7][0-7]?|[0-3][0-7]{2})/,
+
+  // non matched elements
+  empty: ['area', 'base', 'basefont', 'br', 'col', 'frame', 'hr', 'img', 'input', 'isindex', 'link', 'meta', 'param'],
+
+  // CCCS MODIFICATION START
+  handlebars_operators: [
+    '#if',
+    '/if',
+    '#unless',
+    '/unless',
+    '#each',
+    '/each',
+    '#with',
+    '/with',
+    'lookup',
+    'log',
+    'equals',
+    'and',
+    'or',
+    'not',
+    'join',
+    'fetch',
+    'upper',
+    'lower'
+    // TODO: Handle plugin-based operators as well
+  ],
+  // CCCS MODIFICATION END
+
+  tokenizer: {
+    root: [
+      // markdown tables
+      [/^\s*\|/, '@rematch', '@table_header'],
+
+      // headers (with #)
+      [/^(\s{0,3})(#+)((?:[^\\#]|@escapes)+)((?:#+)?)/, ['white', 'keyword', 'keyword', 'keyword']],
+
+      // headers (with =)
+      [/^\s*(=+|\-+)\s*$/, 'keyword'],
+
+      // headers (with ***)
+      [/^\s*((\*[ ]?)+)\s*$/, 'meta.separator'],
+
+      // quote
+      [/^\s*>+/, 'comment'],
+
+      // list (starting with * or number)
+      [/^\s*([\*\-+:]|\d+\.)\s/, 'keyword'],
+
+      // code block (4 spaces indent)
+      [/^(\t|[ ]{4})[^ ].*$/, 'string'],
+
+      // code block (3 tilde)
+      [/^\s*~~~\s*((?:\w|[\/\-#])+)?\s*$/, { token: 'string', next: '@codeblock' }],
+
+      // github style code blocks (with backticks and language)
+      [/^\s*```\s*((?:\w|[\/\-#])+).*$/, { token: 'string', next: '@codeblockgh', nextEmbedded: '$1' }],
+
+      // github style code blocks (with backticks but no language)
+      [/^\s*```\s*$/, { token: 'string', next: '@codeblock' }],
+
+      // CCCS MODIFICATION
+      [/{{/, { token: 'handlebars', next: '@handlebars' }],
+
+      // markup within lines
+      { include: '@linecontent' }
+    ],
+
+    // CCCS MODIFICATION START
+    handlebars: [
+      [/"[^"]+"/, 'string'],
+      [/[()]/, 'handlebars'],
+      [/[\w\d\.]+/, 'variable'],
+      [
+        /[#/\w]+/,
+        {
+          cases: {
+            '@handlebars_operators': { token: 'operator' },
+            '@default': { token: 'variable' }
+          }
+        }
+      ],
+      [/}}/, { token: 'handlebars', next: '@pop' }]
+    ],
+    // CCCS MODIFICATION END
+
+    table_header: [
+      { include: '@table_common' },
+      [/[^\|]+/, 'keyword.table.header'] // table header
+    ],
+
+    table_body: [{ include: '@table_common' }, { include: '@linecontent' }],
+
+    table_common: [
+      [/\s*[\-:]+\s*/, { token: 'keyword', switchTo: 'table_body' }], // header-divider
+      [/^\s*\|/, 'keyword.table.left'], // opening |
+      [/^\s*[^\|]/, '@rematch', '@pop'], // exiting
+      [/^\s*$/, '@rematch', '@pop'], // exiting
+      [
+        /\|/,
+        {
+          cases: {
+            '@eos': 'keyword.table.right', // closing |
+            '@default': 'keyword.table.middle' // inner |
+          }
+        }
+      ]
+    ],
+
+    codeblock: [
+      [/^\s*~~~\s*$/, { token: 'string', next: '@pop' }],
+      [/^\s*```\s*$/, { token: 'string', next: '@pop' }],
+      [/.*$/, 'variable.source']
+    ],
+
+    // github style code blocks
+    codeblockgh: [
+      [/```\s*$/, { token: 'string', next: '@pop', nextEmbedded: '@pop' }],
+      [/[^`]+/, 'variable.source']
+    ],
+
+    linecontent: [
+      // escapes
+      [/&\w+;/, 'string.escape'],
+      [/@escapes/, 'escape'],
+
+      // various markup
+      [/\b__([^\\_]|@escapes|_(?!_))+__\b/, 'strong'],
+      [/\*\*([^\\*]|@escapes|\*(?!\*))+\*\*/, 'strong'],
+      [/\b_[^_]+_\b/, 'emphasis'],
+      [/\*([^\\*]|@escapes)+\*/, 'emphasis'],
+      [/`/, { token: 'variable', next: '@codecontent' }],
+
+      // links
+      [/\{+[^}]+\}+/, 'string.target'],
+      [/(!?\[)((?:[^\]\\]|@escapes)*)(\]\([^\)]+\))/, ['string.link', '', 'string.link']],
+      [/(!?\[)((?:[^\]\\]|@escapes)*)(\])/, 'string.link'],
+
+      // or html
+      { include: 'html' }
+    ],
+
+    codecontent: [
+      // CCCS MODIFICATION
+      [/{{/, { token: 'handlebars', next: '@handlebars' }],
+      [/([^\\`]|@escapes)+/, 'variable'],
+      [/`/, { token: 'variable', next: '@pop' }]
+    ],
+
+    // Note: it is tempting to rather switch to the real HTML mode instead of building our own here
+    // but currently there is a limitation in Monarch that prevents us from doing it: The opening
+    // '<' would start the HTML mode, however there is no way to jump 1 character back to let the
+    // HTML mode also tokenize the opening angle bracket. Thus, even though we could jump to HTML,
+    // we cannot correctly tokenize it in that mode yet.
+    html: [
+      // html tags
+      [/<(\w+)\/>/, 'tag'],
+      [
+        /<(\w+)(\-|\w)*/,
+        {
+          cases: {
+            '@empty': { token: 'tag', next: '@tag.$1' },
+            '@default': { token: 'tag', next: '@tag.$1' }
+          }
+        }
+      ],
+      [/<\/(\w+)(\-|\w)*\s*>/, { token: 'tag' }],
+
+      [/<!--/, 'comment', '@comment']
+    ],
+
+    comment: [
+      [/[^<\-]+/, 'comment.content'],
+      [/-->/, 'comment', '@pop'],
+      [/<!--/, 'comment.content.invalid'],
+      [/[<\-]/, 'comment.content']
+    ],
+
+    // Almost full HTML tag matching, complete with embedded scripts & styles
+    tag: [
+      [/[ \t\r\n]+/, 'white'],
+      [
+        /(type)(\s*=\s*)(")([^"]+)(")/,
+        [
+          'attribute.name.html',
+          'delimiter.html',
+          'string.html',
+          { token: 'string.html', switchTo: '@tag.$S2.$4' },
+          'string.html'
+        ]
+      ],
+      [
+        /(type)(\s*=\s*)(')([^']+)(')/,
+        [
+          'attribute.name.html',
+          'delimiter.html',
+          'string.html',
+          { token: 'string.html', switchTo: '@tag.$S2.$4' },
+          'string.html'
+        ]
+      ],
+      [/(\w+)(\s*=\s*)("[^"]*"|'[^']*')/, ['attribute.name.html', 'delimiter.html', 'string.html']],
+      [/\w+/, 'attribute.name.html'],
+      [/\/>/, 'tag', '@pop'],
+      [
+        />/,
+        {
+          cases: {
+            '$S2==style': {
+              token: 'tag',
+              switchTo: 'embeddedStyle',
+              nextEmbedded: 'text/css'
+            },
+            '$S2==script': {
+              cases: {
+                $S3: {
+                  token: 'tag',
+                  switchTo: 'embeddedScript',
+                  nextEmbedded: '$S3'
+                },
+                '@default': {
+                  token: 'tag',
+                  switchTo: 'embeddedScript',
+                  nextEmbedded: 'text/javascript'
+                }
+              }
+            },
+            '@default': { token: 'tag', next: '@pop' }
+          }
+        }
+      ]
+    ],
+
+    embeddedStyle: [
+      [/[^<]+/, ''],
+      [/<\/style\s*>/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+      [/</, '']
+    ],
+
+    embeddedScript: [
+      [/[^<]+/, ''],
+      [/<\/script\s*>/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+      [/</, '']
+    ]
+  }
+};

package/components/routes/overviews/startingTemplate.ts

@@ -0,0 +1,40 @@
+import { useHelpers } from 'components/elements/display/handlebars/helpers';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import TEMPLATE_EN from './template/en.md';
+import TEMPLATE_FR from './template/fr.md';
+
+const TEMPLATES = {
+  en: TEMPLATE_EN,
+  fr: TEMPLATE_FR
+};
+
+export const useStartingTemplate = () => {
+  const helpers = useHelpers();
+  const { i18n } = useTranslation();
+
+  const helperText = useMemo(
+    () =>
+      helpers
+        .map(helper =>
+          `
+### \`${helper.keyword}\`
+
+${helper.documentation[i18n.language]}
+
+---
+`.trim()
+        )
+        .join('\n'),
+    [helpers, i18n.language]
+  );
+
+  return useMemo(
+    () => `
+${TEMPLATES[i18n.language] ?? TEMPLATES.en}
+
+${helperText}
+`,
+    [helperText, i18n.language]
+  );
+};

package/components/routes/overviews/template/en.md

@@ -0,0 +1,167 @@
+# Creating an Overview
+
+Overviews can be used to modify the way data is presented on alerts that match the overview's settings. Overviews are, by design, easy to create and quite flexible.
+
+## Getting Started
+
+The basic building blocks of overviews are:
+
+1. Markdown
+2. Handlebars
+
+We will quickly explain these.
+
+### Markdown
+
+Quoting from the excellent [markdownguide.org](https://www.markdownguide.org/getting-started/):
+
+> Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by [John Gruber](https://daringfireball.net/projects/markdown/) in 2004, Markdown is now one of the world's most popular markup languages.
+>
+> Using Markdown is different than using a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn't like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.
+>
+> For example, to denote a heading, you add a number sign before it (e.g., `# Heading One`). Or to make a phrase bold, you add two asterisks before and after it (e.g., `**this text is bold**`). It may take a while to get used to seeing Markdown syntax in your text, especially if you're accustomed to WYSIWYG applications.
+
+---
+
+### Handlebars
+
+Quoting from [handlebarsjs.com](https://handlebarsjs.com/guide/):
+
+> Handlebars is a simple templating language.
+>
+> It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.
+>
+>```html
+> <p>{{curly "firstname"}} {{curly "lastname"}}</p>
+>```
+>
+> A handlebars expression is a double curly bracket, some contents, followed by a set of closing double curly brackets. When the template is executed, these expressions are replaced with values from an input object.
+
+---
+
+For our cases, we use handlebars to replace specific parts of markdown with the values included in a given howler hit. For example:
+
+```markdown
+This analytic is **{{curly "howler.analytic"}}**
+```
+
+becomes:
+
+> This analytic is **{{howler.analytic}}**.
+
+For more information on handlebars, check out:
+
+- [What is Handlebars?](https://handlebarsjs.com/guide/#what-is-handlebars)
+- [Handlebars Expressions](https://handlebarsjs.com/guide/expressions.html)
+
+## Combining Markdown and Handlebars
+
+You can use handlebars for template replacement throughout your markdown. Below is an example table using handlebars and markdown:
+
+```markdown
+
+| Source IP | Destination IP |
+| --- | --- |
+| {{curly "source.ip"}} |{{curly "destination.ip"}} |
+```
+
+renders as:
+
+| Source IP | Destination IP |
+| --- | --- |
+| {{source.ip}} |{{destination.ip}} |
+
+## Advanced Handlebars
+
+Howler integrates a number of helper functions for you to work with.
+
+### Control Expressions
+
+For use as subexpressions, we expose a number of conditional checks:
+
+**Equality:**
+
+Given `howler.status` is {{howler.status}}:
+
+```markdown
+{{curly '#if (equals howler.status "open")'}}
+Hit is open!
+{{curly "/if"}}
+{{curly '#if (equals howler.status "resolved")'}}
+Hit is resolved!
+{{curly "/if"}}
+```
+
+{{#if (equals howler.status "open")}}
+Hit is open!
+{{/if}}
+{{#if (equals howler.status "resolved")}}
+Hit is resolved!
+{{/if}}
+
+**AND/OR/NOT:**
+
+Given `howler.status` is {{howler.status}}, and `howler.escalation` is {{howler.escalation}}:
+
+```markdown
+{{curly '#if (and (equals howler.status "open") (equals howler.escalation "alert"))'}}
+This is correct!
+{{curly "/if"}}
+{{curly '#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))'}}
+This is wrong!
+{{curly "/if"}}
+```
+
+{{#if (and (equals howler.status "open") (equals howler.escalation "alert"))}}
+This is correct!
+{{/if}}
+{{#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))}}
+This is wrong!
+{{/if}}
+
+```markdown
+{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}
+Always shows!
+{{curly "/if"}}
+```
+
+{{#if (or howler.is_bundle (not howler.is_bundle))}}
+Always shows!
+{{/if}}
+
+---
+
+### String Operations
+
+**String Concatenation:**
+
+```markdown
+{{curly 'join "string one " "string two"'}}
+```
+
+{{join "string one " "string two"}}
+
+**Uppercase/Lowercase:**
+
+```markdown
+{{curly 'upper "make this uppercase"'}}
+{{curly 'lower "MAKE THIS LOWERCASE"'}}
+```
+
+{{upper "make this uppercase"}}
+
+{{lower "MAKE THIS LOWERCASE"}}
+
+---
+
+### Fetching Data
+
+You can also make basic fetch requests for, and parse, JSON data from external sources:
+
+```markdown
+{{curly 'fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"'}}
+```
+
+{{fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"}}
+
+## Full Helper List

package/components/routes/overviews/template/fr.md

@@ -0,0 +1,167 @@
+# Créer un aperçu
+
+Les aperçus peuvent être utilisés pour modifier la façon dont les données sont présentées sur les alertes qui correspondent aux paramètres de l'aperçu. Les aperçus sont, par conception, faciles à créer et assez flexibles.
+
+## Premiers pas
+
+Les éléments de base des aperçus sont :
+
+1. Markdown
+2. Handlebars
+
+Nous allons rapidement expliquer ces éléments.
+
+### Markdown
+
+Citation de l'excellent [markdownguide.org](https://www.markdownguide.org/getting-started/) :
+
+> Markdown est un langage de balisage léger que vous pouvez utiliser pour ajouter des éléments de formatage aux documents texte en texte brut. Créé par [John Gruber](https://daringfireball.net/projects/markdown/) en 2004, Markdown est maintenant l'un des langages de balisage les plus populaires au monde.
+>
+> L'utilisation de Markdown est différente de l'utilisation d'un éditeur [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG). Dans une application comme Microsoft Word, vous cliquez sur des boutons pour formater les mots et les phrases, et les changements sont visibles immédiatement. Markdown n'est pas comme cela. Lorsque vous créez un fichier formaté en Markdown, vous ajoutez une syntaxe Markdown au texte pour indiquer quels mots et phrases doivent apparaître différemment.
+>
+> Par exemple, pour désigner un titre, vous ajoutez un signe dièse avant celui-ci (par ex., `# Titre Un`). Ou pour mettre une phrase en gras, vous ajoutez deux astérisques avant et après (par ex., `**ce texte est en gras**`). Il peut falloir un certain temps pour s'habituer à voir la syntaxe Markdown dans votre texte, surtout si vous êtes habitué aux applications WYSIWYG.
+
+---
+
+### Handlebars
+
+Citation de [handlebarsjs.com](https://handlebarsjs.com/guide/) :
+
+> Handlebars est un langage de template simple.
+>
+> Il utilise un template et un objet d'entrée pour générer du HTML ou d'autres formats de texte. Les templates Handlebars ressemblent à du texte normal avec des expressions Handlebars intégrées.
+>
+>```html
+> <p>{{curly "firstname"}} {{curly "lastname"}}</p>
+>```
+>
+> Une expression handlebars est une double accolade, du contenu, suivi d'un ensemble d'accolades fermantes doubles. Lorsque le template est exécuté, ces expressions sont remplacées par des valeurs d'un objet d'entrée.
+
+---
+
+Dans nos cas, nous utilisons handlebars pour remplacer des parties spécifiques du markdown par les valeurs incluses dans un résultat howler donné. Par exemple :
+
+```markdown
+Cette analytique est **{{curly "howler.analytic"}}**
+```
+
+devient :
+
+> Cette analytique est **{{howler.analytic}}**.
+
+Pour plus d'informations sur handlebars, consultez :
+
+- [Qu'est-ce que Handlebars ?](https://handlebarsjs.com/guide/#what-is-handlebars)
+- [Expressions Handlebars](https://handlebarsjs.com/guide/expressions.html)
+
+## Combiner Markdown et Handlebars
+
+Vous pouvez utiliser handlebars pour le remplacement de template dans tout votre markdown. Voici un exemple de tableau utilisant handlebars et markdown :
+
+```markdown
+
+| IP Source | IP Destination |
+| --- | --- |
+| {{curly "source.ip"}} |{{curly "destination.ip"}} |
+```
+
+s'affiche comme :
+
+| IP Source | IP Destination |
+| --- | --- |
+| {{source.ip}} |{{destination.ip}} |
+
+## Handlebars avancés
+
+Howler intègre un certain nombre de fonctions d'aide avec lesquelles vous pouvez travailler.
+
+### Expressions de contrôle
+
+Pour utilisation comme sous-expressions, nous exposons un certain nombre de vérifications conditionnelles :
+
+**Égalité :**
+
+Étant donné que `howler.status` est {{howler.status}} :
+
+```markdown
+{{curly '#if (equals howler.status "open")'}}
+Le résultat est ouvert !
+{{curly "/if"}}
+{{curly '#if (equals howler.status "resolved")'}}
+Le résultat est résolu !
+{{curly "/if"}}
+```
+
+{{#if (equals howler.status "open")}}
+Le résultat est ouvert !
+{{/if}}
+{{#if (equals howler.status "resolved")}}
+Le résultat est résolu !
+{{/if}}
+
+**ET/OU/NON :**
+
+Étant donné que `howler.status` est {{howler.status}}, et `howler.escalation` est {{howler.escalation}} :
+
+```markdown
+{{curly '#if (and (equals howler.status "open") (equals howler.escalation "alert"))'}}
+C'est correct !
+{{curly "/if"}}
+{{curly '#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))'}}
+C'est incorrect !
+{{curly "/if"}}
+```
+
+{{#if (and (equals howler.status "open") (equals howler.escalation "alert"))}}
+C'est correct !
+{{/if}}
+{{#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))}}
+C'est incorrect !
+{{/if}}
+
+```markdown
+{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}
+S'affiche toujours !
+{{curly "/if"}}
+```
+
+{{#if (or howler.is_bundle (not howler.is_bundle))}}
+S'affiche toujours !
+{{/if}}
+
+---
+
+### Opérations sur les chaînes
+
+**Concaténation de chaînes :**
+
+```markdown
+{{curly 'join "chaîne une " "chaîne deux"'}}
+```
+
+{{join "chaîne une " "chaîne deux"}}
+
+**Majuscules/Minuscules :**
+
+```markdown
+{{curly 'upper "mettre ceci en majuscules"'}}
+{{curly 'lower "METTRE CECI EN MINUSCULES"'}}
+```
+
+{{upper "mettre ceci en majuscules"}}
+
+{{lower "METTRE CECI EN MINUSCULES"}}
+
+---
+
+### Récupération de données
+
+Vous pouvez également faire des requêtes fetch de base pour récupérer et analyser des données JSON de sources externes :
+
+```markdown
+{{curly 'fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"'}}
+```
+
+{{fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"}}
+
+## Liste complète des assistants

package/components/routes/settings/AdminSection.tsx

@@ -0,0 +1,18 @@
+import howlerPluginStore from 'plugins/store';
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import SettingsSection from './SettingsSection';
+
+const AdminSection: FC = () => {
+  const { t } = useTranslation();
+  const pluginStore = usePluginStore();
+
+  return (
+    <SettingsSection title={t('page.settings.admin.title')} colSpan={2}>
+      {howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'admin'))}
+    </SettingsSection>
+  );
+};
+
+export default AdminSection;