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

package/components/routes/advanced/QueryEditor.tsx

@@ -0,0 +1,148 @@
+import type { Monaco } from '@monaco-editor/react';
+import { useMonaco } from '@monaco-editor/react';
+import { Box, useTheme } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import ThemedEditor from 'components/elements/ThemedEditor';
+import type { editor } from 'monaco-editor';
+import { memo, useCallback, useContext, useEffect, useMemo, type FC } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import useEQLCompletionProvider from './eqlCompletionProvider';
+import EQL_TOKEN_PROVIDER from './eqlTokenProvider';
+import useHistoryCompletionProvider from './historyCompletionProvider';
+import useLuceneCompletionProvider from './luceneCompletionProvider';
+import LUCENE_TOKEN_PROVIDER from './luceneTokenProvider';
+import useYamlCompletionProvider from './yamlCompletionProvider';
+
+interface QueryEditorProps {
+  query: string;
+  setQuery: (query: string) => void;
+  onMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+  language?: 'lucene' | 'eql' | 'yaml';
+  fontSize?: number;
+  height?: string;
+  width?: string;
+  editorOptions?: editor.IStandaloneEditorConstructionOptions;
+}
+
+const QueryEditor: FC<QueryEditorProps> = ({
+  query,
+  setQuery,
+  onMount,
+  language = 'lucene',
+  fontSize = 16,
+  height = '100%',
+  width = '100%',
+  editorOptions = {}
+}) => {
+  const theme = useTheme();
+  const monaco = useMonaco();
+  const { config } = useContext(ApiConfigContext);
+  const luceneCompletion = useLuceneCompletionProvider();
+  const yamlCompletion = useYamlCompletionProvider();
+  const eqlCompletion = useEQLCompletionProvider();
+  const historyCompletion = useHistoryCompletionProvider();
+
+  const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch ?? false);
+  const setFzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.setFzfSearch);
+
+  const beforeEditorMount = useCallback((_monaco: Monaco) => {
+    _monaco.languages.register({ id: 'lucene' });
+    _monaco.languages.register({ id: 'eql' });
+  }, []);
+
+  useEffect(() => {
+    if (!monaco) {
+      return;
+    }
+
+    // Set the parsers
+    const monarchLuceneDisposable = monaco.languages.setMonarchTokensProvider('lucene', LUCENE_TOKEN_PROVIDER);
+    const monarchEQLDisposable = monaco.languages.setMonarchTokensProvider('eql', EQL_TOKEN_PROVIDER);
+
+    monaco.editor.getModels().forEach(model => model.setEOL(monaco.editor.EndOfLineSequence.LF));
+
+    if (!fzfSearch) {
+      // Add completion providers
+      const luceneCompletionDisposable = monaco.languages.registerCompletionItemProvider('lucene', luceneCompletion);
+      const yamlCompletionDisposable = monaco.languages.registerCompletionItemProvider('yaml', yamlCompletion);
+      const eqlCompletionDisposable = monaco.languages.registerCompletionItemProvider('eql', eqlCompletion);
+
+      return () => {
+        luceneCompletionDisposable?.dispose();
+        yamlCompletionDisposable?.dispose();
+        eqlCompletionDisposable?.dispose();
+        monarchEQLDisposable?.dispose();
+        monarchLuceneDisposable?.dispose();
+      };
+    } else {
+      const historyCompletionDisposable = monaco.languages.registerCompletionItemProvider('lucene', historyCompletion);
+
+      return () => {
+        historyCompletionDisposable?.dispose();
+        monarchLuceneDisposable?.dispose();
+      };
+    }
+  }, [config.lookups, eqlCompletion, fzfSearch, historyCompletion, luceneCompletion, monaco, yamlCompletion]);
+
+  useEffect(() => {
+    if (!monaco || !language) {
+      return;
+    }
+
+    const disposable = monaco.editor.onDidCreateModel(model => {
+      if (model.getLanguageId() === 'markdown') {
+        return;
+      }
+
+      monaco.editor.setModelLanguage(model, language);
+    });
+
+    monaco.editor.getModels().forEach(model => {
+      if (model.getLanguageId() === 'markdown') {
+        return;
+      }
+
+      monaco.editor.setModelLanguage(model, language);
+    });
+
+    return disposable.dispose;
+  }, [language, monaco]);
+
+  const options: editor.IStandaloneEditorConstructionOptions = useMemo(
+    () => ({
+      readOnly: !setQuery,
+      fontSize,
+      ...editorOptions
+    }),
+    [setQuery, fontSize, editorOptions]
+  );
+
+  const handleKeyPress = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (setFzfSearch && event.ctrlKey && event.key == 'r') {
+        event.preventDefault();
+        event.stopPropagation();
+        setFzfSearch(!fzfSearch);
+      }
+    },
+    [fzfSearch, setFzfSearch]
+  );
+
+  return (
+    <Box sx={{ flex: 1 }} onKeyDownCapture={handleKeyPress}>
+      <ThemedEditor
+        height={height}
+        width={width}
+        theme={theme.palette.mode === 'light' ? 'howler' : 'howler-dark'}
+        value={query}
+        onChange={value => setQuery(value)}
+        beforeMount={beforeEditorMount}
+        onMount={onMount}
+        options={options}
+      />
+    </Box>
+  );
+};
+
+export default memo(QueryEditor);

package/components/routes/advanced/RuleModal.tsx

@@ -0,0 +1,217 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardHeader,
+  CircularProgress,
+  Divider,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  Tab,
+  Tabs,
+  TextField,
+  Typography,
+  useTheme
+} from '@mui/material';
+import api from 'api';
+import { parseEvent } from 'commons/components/utils/keyboard';
+import { ModalContext } from 'components/app/providers/ModalProvider';
+import CustomButton from 'components/elements/addons/buttons/CustomButton';
+import Markdown from 'components/elements/display/Markdown';
+import ThemedEditor from 'components/elements/ThemedEditor';
+import useMyApi from 'components/hooks/useMyApi';
+import useMySnackbar from 'components/hooks/useMySnackbar';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import type { FC } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { RULE_INTERVALS } from 'utils/constants';
+
+const RuleModal: FC<{ onSubmit: () => void; fileData: string; type: 'eql' | 'lucene' | 'yaml' }> = ({
+  onSubmit,
+  fileData,
+  type
+}) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { close } = useContext(ModalContext);
+  const { dispatchApi } = useMyApi();
+  const { showSuccessMessage } = useMySnackbar();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [crontab, setCrontab] = useState<string>(RULE_INTERVALS[3].crontab);
+  const [loading, setLoading] = useState(false);
+  const [tab, setTab] = useState<'query' | 'description'>('description');
+
+  const badAnalyticName = useMemo(() => !/^([A-Z][a-z]* ?)*$/.test(name), [name]);
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      const newAnalytic = await dispatchApi(
+        api.analytic.rules.post({
+          name,
+          description,
+          // Converting the language name to the query type - they all match except sigma
+          rule_type: type.replace('yaml', 'sigma') as Analytic['rule_type'],
+          rule: fileData,
+          rule_crontab: crontab
+        })
+      );
+
+      showSuccessMessage(t('modal.rule.success'), 5000, {
+        action: () => (
+          <Button color="inherit" onClick={() => navigate(`/analytics/${newAnalytic.analytic_id}`)}>
+            {t('open')}
+          </Button>
+        )
+      });
+
+      onSubmit();
+      close();
+    } finally {
+      setLoading(false);
+    }
+  }, [dispatchApi, name, description, type, fileData, crontab, showSuccessMessage, t, onSubmit, close, navigate]);
+
+  const handleKeydown = useCallback(
+    e => {
+      const parsedEvent = parseEvent(e);
+
+      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+        e.stopPropagation();
+        e.preventDefault();
+        handleSubmit();
+      } else if (parsedEvent.isEscape) {
+        e.stopPropagation();
+        e.preventDefault();
+        close();
+      }
+    },
+    [close, handleSubmit]
+  );
+
+  useEffect(() => {
+    if (location.pathname !== '/advanced') {
+      close();
+    }
+  }, [close, location.pathname]);
+
+  return (
+    <Stack spacing={2} p={2} alignItems="start" sx={{ minWidth: '60vw', height: '80vh', overflow: 'hidden' }}>
+      <Typography variant="h4">{t('modal.rule.title')}</Typography>
+      <Typography>{t('modal.rule.description')}</Typography>
+      <Stack direction="row" spacing={1} sx={{ width: '100%' }}>
+        <TextField
+          label={t('modal.rule.name') + (badAnalyticName ? ` - ${t('modal.rule.name.warn')}` : '')}
+          value={name}
+          fullWidth
+          color={badAnalyticName ? 'warning' : null}
+          multiline
+          maxRows={6}
+          onChange={e => setName(e.target.value)}
+          onKeyDown={handleKeydown}
+        />
+        {/* TODO: allow custom crontabs */}
+        <FormControl sx={{ minWidth: '250px' }}>
+          <InputLabel>{t('rule.interval')}</InputLabel>
+          <Select
+            label={t('rule.interval')}
+            onChange={event => setCrontab(event.target.value)}
+            value={crontab}
+            MenuProps={{ style: { zIndex: 1500 } }}
+          >
+            {RULE_INTERVALS.map(interval => (
+              <MenuItem key={interval.key} value={interval.crontab}>
+                {t(interval.key)}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Stack>
+      <Tabs value={tab} onChange={(__, value) => setTab(value)}>
+        <Tab label={t('description')} value="description" />
+        <Tab label={t('query')} value="query" />
+      </Tabs>
+      {tab === 'description' && (
+        <Box
+          display="grid"
+          alignSelf="stretch"
+          sx={{ pt: 1, flex: 1, overflow: 'hidden', gridTemplateColumns: '1fr 1fr', gap: theme.spacing(1) }}
+          justifyContent="stretch"
+        >
+          <Card variant="outlined" sx={{ p: 1 }}>
+            <CardHeader sx={{ py: 1, px: 0 }} title={t('modal.rule.description.title')} />
+            <Divider />
+            <ThemedEditor
+              height="90%"
+              width="100%"
+              theme="howler"
+              language="markdown"
+              value={description}
+              onChange={value => setDescription(value)}
+              options={{
+                minimap: { enabled: false },
+                overviewRulerBorder: false,
+                renderLineHighlight: 'gutter',
+                fontSize: 16,
+                autoClosingBrackets: 'always'
+              }}
+            />
+          </Card>
+          <Card variant="outlined" sx={{ p: 1 }}>
+            <CardHeader sx={{ py: 1, px: 0 }} title={t('modal.rule.markdown.title')} />
+            <Divider />
+            <Markdown md={description || t('modal.rule.markdown.placeholder')} />
+          </Card>
+        </Box>
+      )}
+      {tab === 'query' && (
+        <Card variant="outlined" sx={{ p: 1, overflow: 'auto', width: '100%', height: '100%' }}>
+          <CardHeader sx={{ py: 1, px: 0 }} title={t('modal.rule.file.title')} />
+          <Divider />
+          <ThemedEditor
+            height="90%"
+            width="100%"
+            theme="howler"
+            language={type}
+            value={fileData}
+            options={{
+              minimap: { enabled: false },
+              readOnly: true,
+              overviewRulerBorder: false,
+              renderLineHighlight: 'gutter',
+              fontSize: 16,
+              autoClosingBrackets: 'always'
+            }}
+          />
+        </Card>
+      )}
+      <Stack direction="row" spacing={1} alignSelf="end">
+        <Button color="error" variant="outlined" onClick={close}>
+          {t('cancel')}
+        </Button>
+        <CustomButton
+          startIcon={loading && <CircularProgress color="success" size={18} />}
+          color="success"
+          variant="outlined"
+          onClick={handleSubmit}
+          disabled={!name || !description || !crontab}
+          tooltip={(!name || !description) && t(`modal.rule.disabled.${!name ? 'analytic' : 'description'}`)}
+        >
+          {t('submit')}
+        </CustomButton>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default RuleModal;

package/components/routes/advanced/eqlCompletionProvider.ts

@@ -0,0 +1,94 @@
+import { useMonaco } from '@monaco-editor/react';
+import { FieldContext } from 'components/app/providers/FieldProvider';
+import Fuse from 'fuse.js';
+import type { languages } from 'monaco-editor';
+import { useContext, useMemo } from 'react';
+
+const EVENT_CATEGORIES = [
+  'authentication',
+  'configuration',
+  'database',
+  'driver',
+  'email',
+  'file',
+  'host',
+  'iam',
+  'intrusion_detection',
+  'malware',
+  'network',
+  'package',
+  'process',
+  'registry',
+  'session',
+  'threat',
+  'web',
+  // Also allow any
+  'any'
+];
+
+const useEQLCompletionProvider = (): languages.CompletionItemProvider => {
+  const monaco = useMonaco();
+  const { hitFields } = useContext(FieldContext);
+
+  // We'll use fuse for fuzzy searching through the fields
+  const fuse = useMemo(() => new Fuse(hitFields, { keys: ['key'], threshold: 0.4 }), [hitFields]);
+
+  return {
+    provideCompletionItems: (model, position) => {
+      const line: string = model.getLineContent(position.lineNumber);
+
+      const context = line.slice(0, position.column - 1);
+
+      // Get everything before, and what we care about
+      const before = context.replace(/^(.*?[^a-zA-Z._]?)[a-zA-Z._]+$/, '$1');
+      const portion = context.replace(/^.+?[^a-zA-Z._]([a-zA-Z._]+)$/, '$1');
+
+      const range = {
+        startLineNumber: position.lineNumber,
+        endLineNumber: position.lineNumber,
+        startColumn: before.length + 1,
+        endColumn: before.length + portion.length
+      };
+
+      // We're completing on the event.category field
+      if (/^ *\[? *$/.test(before)) {
+        return {
+          suggestions: EVENT_CATEGORIES.map(cat => ({
+            label: cat,
+            kind: monaco.languages.CompletionItemKind.Property,
+            insertText: cat,
+            range
+          }))
+        };
+      }
+
+      // If we have something to search with, use it, otherwise just suggest everything
+      if (portion) {
+        const fuzzyMatches = fuse.search(portion);
+        return {
+          suggestions: fuzzyMatches.map(({ item }) => ({
+            label: item.key,
+            detail: item.type,
+            documentation: item.description,
+            kind: monaco.languages.CompletionItemKind.Property,
+            insertText: item.key,
+            range
+          }))
+        };
+      } else {
+        return {
+          suggestions: hitFields.map(_field => ({
+            label: _field.key,
+            detail: _field.type,
+            documentation: _field.description,
+            kind: monaco.languages.CompletionItemKind.Property,
+            insertText: _field.key,
+            range
+          }))
+        };
+      }
+    }
+  };
+};
+
+export default useEQLCompletionProvider;

package/components/routes/advanced/eqlTokenProvider.ts

@@ -0,0 +1,110 @@
+/* eslint-disable no-useless-escape */
+import type { languages } from 'monaco-editor';
+
+/**
+ * Monaco language token provider for EQL. Very basic. Contact Matt R <matthew.rafuse@cyber.gc.ca> for more info, and/or read:
+ * https://microsoft.github.io/monaco-editor/monarch.html
+ * https://www.elastic.co/guide/en/elasticsearch/reference/current/eql-syntax.html
+ */
+const TOKEN_PROVIDER: languages.IMonarchLanguage = {
+  defaultToken: 'invalid',
+  includeLF: true,
+
+  operators: /[<:>+\-*/%=\|~]|<=|==|!=|>=/,
+
+  timespans: /[0-9]+[dhms]|ms|micros|nanos/,
+
+  keywords: ['where', 'like', 'regex', 'in', 'in~', 'not', 'descendant', 'child', 'event', 'of', 'head', 'tail'],
+
+  booleans: ['and', 'or'],
+
+  function: /[a-zA-Z]+(?=~?\()/,
+
+  regexpctl: /[(){}\[\]\$\^|\-*+?\.]/,
+  regexpesc: /\\(?:[bBdDfnrstvwWn0\\\/]|@regexpctl|c[A-Z]|x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4})/,
+
+  tokenizer: {
+    root: [
+      // TODO: Match this to valid field names in ES
+      ['@function', { token: 'identifier' }],
+      [
+        /[a-zA-Z_*]+/,
+        {
+          cases: {
+            '@keywords': 'operator',
+            '@booleans': 'boolean',
+            '@default': 'key'
+          }
+        }
+      ],
+      ['@operators', { token: 'operator' }],
+      [/\./, { token: 'dot' }],
+
+      // parens
+      [/[\[\(]/, { token: 'bracket', bracket: '@open', next: '@parens_root' }],
+
+      // whitespace
+      [/[ \t\r\n]+/, { token: 'whitespace' }],
+
+      { include: 'common' }
+    ],
+
+    boolean: [[/true|false|and|or/, 'boolean']],
+
+    common: [
+      // regular expression: ensure it is terminated before beginning (otherwise it is an opeator)
+      [
+        /\/(?=([^\\\/]|\\.)+\/([gimsuy]*)(\s*)(\.|;|\/|,|\)|\]|\}|$))/,
+        { token: 'regexp', bracket: '@open', next: '@regexp' }
+      ],
+
+      // strings
+      [/"([^"\\]|\\.)*$/, { token: 'string.invalid' }], // non-teminated string
+      [/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],
+
+      // comments
+      [/#.*\n/, { token: 'comment' }],
+
+      // numbers
+      ['@timespans', 'number.hex'],
+      [/\d*\.\d+([eE][-+]?\d+)?/, 'number.float'],
+      [/0[xX][0-9a-fA-F]+/, 'number.hex'],
+      [/\d+/, 'number'],
+
+      // commas
+      [/,/, 'comma']
+    ],
+
+    parens_root: [{ include: '@root' }, [/[\]\)]/, { token: 'bracket', next: '@pop' }]],
+
+    string: [
+      [/[^"']+/, { token: 'string' }],
+      [/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }]
+    ],
+
+    regexp: [
+      [/(\{)(\d+(?:,\d*)?)(\})/, ['regexp.escape.control', 'regexp.escape.control', 'regexp.escape.control']],
+      [
+        /(\[)(\^?)(?=(?:[^\]\\\/]|\\.)+)/,
+        ['regexp.escape.control', { token: 'regexp.escape.control', next: '@regexrange' }]
+      ],
+      [/(\()(\?:|\?=|\?!)/, ['regexp.escape.control', 'regexp.escape.control']],
+      [/[()]/, 'regexp.escape.control'],
+      [/@regexpctl/, 'regexp.escape.control'],
+      [/[^\\\/]/, 'regexp'],
+      [/@regexpesc/, 'regexp.escape'],
+      [/\\\./, 'regexp.invalid'],
+      [/(\/)([gimsuy]*)/, [{ token: 'regexp', bracket: '@close', next: '@pop' }, 'keyword.other']]
+    ],
+
+    regexrange: [
+      [/-/, 'regexp.escape.control'],
+      [/\^/, 'regexp.invalid'],
+      [/@regexpesc/, 'regexp.escape'],
+      [/[^\]]/, 'regexp'],
+      [/\]/, { token: 'regexp.escape.control', next: '@pop', bracket: '@close' }]
+    ]
+  }
+};
+
+export default TOKEN_PROVIDER;

package/components/routes/advanced/historyCompletionProvider.ts

@@ -0,0 +1,61 @@
+import { useMonaco } from '@monaco-editor/react';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import Fuse from 'fuse.js';
+import type { languages } from 'monaco-editor';
+import { useMemo } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import { twitterShort } from 'utils/utils';
+
+const useHistoryCompletionProvider = (): languages.CompletionItemProvider => {
+  const monaco = useMonaco();
+  const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch);
+  const queryHistory = useContextSelector(HitSearchContext, ctx => ctx?.queryHistory ?? {});
+
+  // Using fuse for fuzzy searching
+  const fuse = useMemo(() => new Fuse(Object.keys(queryHistory), { keys: ['key'], threshold: 0.4 }), [queryHistory]);
+
+  return {
+    provideCompletionItems: async (model, position) => {
+      if (!fzfSearch) {
+        return { suggestions: [] };
+      }
+
+      const line: string = model.getLineContent(position.lineNumber);
+
+      const context = line.slice(0, position.column - 1);
+
+      // Get what comes before, and the field we're intersted in autocompleting
+      const before = context.replace(/^(.*?[^a-zA-Z._]?)[a-zA-Z._*]*$/, '$1');
+      const portion = context.replace(/^.+?[^a-zA-Z._]([a-zA-Z._*]*)$/, '$1');
+
+      const range = {
+        startLineNumber: position.lineNumber,
+        endLineNumber: position.lineNumber,
+        startColumn: before.length + 1,
+        endColumn: before.length + portion.length
+      };
+
+      const currentWord = model.getWordAtPosition(position);
+      const query = currentWord ? currentWord.word : '';
+
+      const fuzzyResults = fuse.search(query);
+
+      // Map the fuzzy search results to Monaco completion items
+      const suggestions = fuzzyResults.map(result => {
+        return {
+          label: result.item, // The query string from previous searches
+          kind: monaco.languages.CompletionItemKind.Reference, // Simple reference type
+          insertText: result.item, // Insert the plain text as it is
+          detail: twitterShort(queryHistory[result.item]), // Optional additional detail
+          range
+        };
+      });
+
+      return {
+        suggestions
+      };
+    }
+  };
+};
+
+export default useHistoryCompletionProvider;