@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/routes/advanced/QueryEditor.tsx

@@ -1,148 +0,0 @@
-import type { Monaco } from '@monaco-editor/react';
-import { useMonaco } from '@monaco-editor/react';
-import { Box, useTheme } from '@mui/material';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import ThemedEditor from '@cccsaurora/howler-ui/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

@@ -1,217 +0,0 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardHeader,
-  CircularProgress,
-  Divider,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Stack,
-  Tab,
-  Tabs,
-  TextField,
-  Typography,
-  useTheme
-} from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
-import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
-import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
-import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import type { Analytic } from '@cccsaurora/howler-ui/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 '@cccsaurora/howler-ui/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

@@ -1,94 +0,0 @@
-import { useMonaco } from '@monaco-editor/react';
-import { FieldContext } from '@cccsaurora/howler-ui/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

@@ -1,110 +0,0 @@
-/* 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

@@ -1,61 +0,0 @@
-import { useMonaco } from '@monaco-editor/react';
-import { HitSearchContext } from '@cccsaurora/howler-ui/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 '@cccsaurora/howler-ui/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;