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

package/components/routes/advanced/QueryBuilder.tsx

@@ -1,584 +0,0 @@
-/* eslint-disable no-useless-escape */
-import { useMonaco } from '@monaco-editor/react';
-import { OpenInNew, PlayArrowOutlined, SsidChart } from '@mui/icons-material';
-import {
-  Alert,
-  AlertTitle,
-  Autocomplete,
-  Box,
-  Card,
-  Checkbox,
-  Chip,
-  CircularProgress,
-  FormControlLabel,
-  IconButton,
-  ListItemText,
-  Slider,
-  Stack,
-  TextField,
-  Tooltip,
-  Typography,
-  useMediaQuery,
-  useTheme
-} from '@mui/material';
-import Popper, { type PopperProps } from '@mui/material/Popper';
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerEQLSearchResponse, HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import type { HowlerFacetSearchResponse } from '@cccsaurora/howler-ui/api/search/facet';
-import type { HowlerGroupedSearchResponse } from '@cccsaurora/howler-ui/api/search/grouped';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
-import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
-import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
-import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
-import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
-import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import dayjs from 'dayjs';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type FC,
-  type KeyboardEventHandler
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { sanitizeMultilineLucene } from '@cccsaurora/howler-ui/utils/stringUtils';
-import { v4 as uuid } from 'uuid';
-import QueryEditor from './QueryEditor';
-import RuleModal from './RuleModal';
-
-const QUERY_TYPES = ['eql', 'lucene', 'yaml'];
-
-const STEPS = [1, 5, 25, 50, 100, 250, 500, 1000, 2500, 10000];
-
-const DEFAULT_VALUES = {
-  eql: `sequence with maxspan=30m
-  [ process where process.name == "regsvr32.exe" ]
-  [ file where length(process.command_line) > 400 ]
-`,
-  lucene: `# Match any howler.id value
-howler.id:*
-AND
-# Hits must be open
-howler.status:open
-`,
-  yaml: `title: Example Howler Sigma Rule
-id: ${uuid()}
-status: test
-description: A basic example of using sigma rule notation to query howler
-references:
-    - https://github.com/SigmaHQ/sigma
-author: You
-date: ${dayjs().format('YYYY/MM/DD')}
-modified: ${dayjs().format('YYYY/MM/DD')}
-tags:
-    - attack.command_and_control
-logsource:
-    category: nbs
-detection:
-    selection1:
-        howler.analytic|startswith:
-            - '6Tail'
-            - 'Assembly'
-    selection2:
-        howler.status:
-          - open
-          - in-progress
-    condition: 1 of selection*
-falsepositives:
-    - Unknown
-level: informational
-`
-};
-
-const LUCENE_QUERY_OPTIONS: ('default' | 'facet' | 'groupby')[] = ['default', 'facet', 'groupby'];
-
-type SearchResponse<T> =
-  | HowlerSearchResponse<T>
-  | HowlerEQLSearchResponse<T>
-  | { [index: string]: HowlerFacetSearchResponse }
-  | HowlerGroupedSearchResponse<T>;
-
-const CustomPopper = (props: PopperProps) => {
-  return <Popper {...props} style={{ width: 'fit-content' }} placement="bottom-start" />;
-};
-
-const QueryBuilder: FC = () => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const smallButtons = useMediaQuery('(max-width:1150px)');
-  const compactLayout = useMediaQuery('(max-width:870px)');
-  const monaco = useMonaco();
-  const { hitFields, getHitFields } = useContext(FieldContext);
-  const { showModal } = useContext(ModalContext);
-  const { showWarningMessage } = useMySnackbar();
-
-  const [type, setType] = useState<'eql' | 'lucene' | 'yaml'>('lucene');
-  const [loading, setLoading] = useState(false);
-  const [query, setQuery] = useState(DEFAULT_VALUES.lucene);
-  const [queryType, setQueryType] = useState(LUCENE_QUERY_OPTIONS[0]);
-  const [groupByField, setGroupByField] = useState<string>(null);
-  const [allFields, setAllFields] = useState(true);
-  const [fields, setFields] = useState<string[]>(['howler.id']);
-  const [response, setResponse] = useState<SearchResponse<Hit>>(null);
-  const [error, setError] = useState<string>(null);
-  const [rows, setRows] = useState(1);
-  const [x, setX] = useState(0);
-
-  const wrapper = useRef<HTMLDivElement>();
-
-  const fieldOptions = useMemo(() => hitFields.map(_field => _field.key), [hitFields]);
-
-  const execute = useCallback(async () => {
-    setLoading(true);
-
-    try {
-      const searchProperties = {
-        fl: allFields ? null : fields.join(','),
-        rows: STEPS[rows]
-      };
-
-      let result: SearchResponse<Hit>;
-      if (type === 'lucene') {
-        if (queryType === 'facet') {
-          result = await api.search.facet.hit.post({
-            query: sanitizeMultilineLucene(query),
-            rows: STEPS[rows],
-            fields
-          });
-        } else if (queryType === 'groupby') {
-          result = await api.search.grouped.hit.post(groupByField, {
-            query: sanitizeMultilineLucene(query),
-            ...searchProperties
-          });
-        } else {
-          result = await api.search.hit.post({
-            query: sanitizeMultilineLucene(query),
-            ...searchProperties
-          });
-        }
-      } else if (type === 'eql') {
-        result = await api.search.hit.eql.post({
-          eql_query: sanitizeMultilineLucene(query),
-          ...searchProperties
-        });
-      } else {
-        result = await api.search.hit.sigma.post({
-          sigma: query,
-          ...searchProperties
-        });
-      }
-
-      setResponse(result);
-      setError(null);
-    } catch (e) {
-      setError(e.message ?? e.toString());
-    } finally {
-      setLoading(false);
-    }
-  }, [allFields, fields, groupByField, query, queryType, rows, type]);
-
-  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
-    event => {
-      const parsedEvent = parseEvent(event);
-
-      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
-        execute();
-      }
-    },
-    [execute]
-  );
-
-  const onMouseMove = useCallback((event: MouseEvent) => {
-    const wrapperRect = wrapper.current?.getBoundingClientRect();
-
-    const offset = event.clientX - (wrapperRect.left + wrapperRect.width / 2);
-
-    setX(offset);
-  }, []);
-
-  const onMouseUp = useCallback(() => {
-    window.removeEventListener('mousemove', onMouseMove);
-    window.removeEventListener('mouseup', onMouseUp);
-  }, [onMouseMove]);
-
-  const onMouseDown = useCallback(() => {
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('mouseup', onMouseUp);
-  }, [onMouseMove, onMouseUp]);
-
-  const onCreateRule = useCallback(async () => {
-    if (!response) {
-      showWarningMessage(t('route.advanced.create.rule.disabled'));
-      return;
-    }
-
-    await new Promise<void>(res =>
-      showModal(<RuleModal onSubmit={res} fileData={query} type={type} />, {
-        maxWidth: '85vw',
-        maxHeight: '85vh'
-      })
-    );
-  }, [query, response, showModal, showWarningMessage, t, type]);
-
-  const searchDisabled = useMemo(
-    () => type === 'lucene' && queryType === 'groupby' && !groupByField,
-    [groupByField, queryType, type]
-  );
-
-  useEffect(() => {
-    if (type !== 'lucene' && queryType !== 'default') {
-      setQueryType('default');
-    }
-  }, [queryType, type]);
-
-  useEffect(() => {
-    if (!monaco) {
-      return;
-    }
-
-    const queryDisposable = monaco.editor.addEditorAction({
-      id: 'execute-query',
-      label: t('route.advanced.execute.query'),
-      contextMenuGroupId: 'howler',
-      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
-      run: execute
-    });
-
-    const ruleDisposable = monaco.editor.addEditorAction({
-      id: 'save-query',
-      label: t('route.advanced.create.rule'),
-      contextMenuGroupId: 'howler',
-      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
-      run: onCreateRule
-    });
-
-    return () => {
-      queryDisposable.dispose();
-      ruleDisposable.dispose();
-    };
-  }, [execute, monaco, onCreateRule, t]);
-
-  useEffect(() => {
-    getHitFields();
-  }, [getHitFields]);
-
-  useEffect(() => {
-    setResponse(null);
-
-    if (!monaco) {
-      return;
-    }
-
-    monaco.editor.getModels().forEach(model => {
-      model.setValue(DEFAULT_VALUES[type]);
-    });
-  }, [type, monaco]);
-
-  return (
-    <PageCenter width="100%" maxWidth="100%" margin={0} textAlign="left">
-      <Stack ref={wrapper}>
-        <Stack
-          direction="row"
-          spacing={1}
-          sx={{
-            px: 2,
-            pt: 1,
-            pb: 1,
-            // Fix TuiButton Issue
-            '& > span': {
-              display: 'flex',
-              alignSelf: 'stretch'
-            }
-          }}
-        >
-          {smallButtons ? (
-            <Tooltip title={t('route.actions.execute')}>
-              <IconButton
-                size="small"
-                sx={{ alignSelf: 'start' }}
-                color="success"
-                onClick={execute}
-                disabled={searchDisabled}
-              >
-                {loading ? (
-                  <CircularProgress size={18} color="success" />
-                ) : (
-                  <PlayArrowOutlined color={searchDisabled ? 'disabled' : 'success'} />
-                )}
-              </IconButton>
-            </Tooltip>
-          ) : (
-            <CustomButton
-              size="small"
-              variant="outlined"
-              startIcon={
-                loading ? (
-                  <CircularProgress size={18} color="success" />
-                ) : (
-                  <PlayArrowOutlined
-                    color={searchDisabled ? 'disabled' : 'success'}
-                    sx={{ '& path': { stroke: 'currentcolor', strokeWidth: '1px' } }}
-                  />
-                )
-              }
-              color="success"
-              onClick={execute}
-              disabled={searchDisabled}
-            >
-              {t('route.actions.execute')}
-            </CustomButton>
-          )}
-          <Stack direction={compactLayout ? 'column' : 'row'} spacing={1}>
-            <Autocomplete
-              value={type}
-              onChange={(__, value) => setType(value as 'eql' | 'lucene' | 'yaml')}
-              options={QUERY_TYPES}
-              getOptionLabel={option => t(`route.advanced.query.${option}`)}
-              renderOption={(props, option) => (
-                <ListItemText
-                  {...(props as any)}
-                  sx={{ flexDirection: 'column', alignItems: 'start !important' }}
-                  primary={t(`route.advanced.query.${option}`)}
-                  secondary={t(`route.advanced.query.${option}.description`)}
-                />
-              )}
-              renderInput={params => (
-                <TextField {...params} size="small" label={t('route.advanced.type')} sx={{ minWidth: '250px' }} />
-              )}
-              sx={[
-                !compactLayout && {
-                  height: '100%',
-                  '& .MuiFormControl-root': { height: '100%', '& > div': { height: '100%' } }
-                }
-              ]}
-              slotProps={{ paper: { sx: { minWidth: '600px' } } }}
-            />
-            <Card variant="outlined" sx={{ flex: 1, maxWidth: '350px', minWidth: '210px' }}>
-              <Stack spacing={0.5} sx={{ px: 1, alignItems: 'start' }}>
-                <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap' }}>
-                  {t('route.advanced.rows')}: {STEPS[rows]}
-                </Typography>
-                <Slider
-                  size="small"
-                  valueLabelDisplay="off"
-                  value={rows}
-                  onChange={(_, value) => setRows(value as number)}
-                  min={0}
-                  max={9}
-                  step={1}
-                  marks
-                  track={false}
-                  sx={{ py: 0.5 }}
-                />
-              </Stack>
-            </Card>
-          </Stack>
-          {type === 'lucene' && (
-            <Autocomplete
-              size="small"
-              getOptionLabel={opt => t(`route.advanced.query.type.${opt}`)}
-              options={LUCENE_QUERY_OPTIONS}
-              value={queryType}
-              onChange={(_event, value) => setQueryType(value)}
-              renderInput={params => (
-                <TextField {...params} label={t('route.advanced.query.type')} sx={{ minWidth: '200px' }} />
-              )}
-            />
-          )}
-          {queryType === 'groupby' && (
-            <Autocomplete
-              size="small"
-              options={fieldOptions}
-              value={groupByField}
-              onChange={(__, value) => setGroupByField(value)}
-              renderInput={params => <TextField {...params} label={t('route.advanced.pivot.field')} />}
-              sx={{ minWidth: '200px', '& label': { zIndex: 1200 } }}
-              onKeyDown={onKeyDown}
-              PopperComponent={CustomPopper}
-            />
-          )}
-          {allFields && queryType !== 'facet' ? (
-            <FormControlLabel
-              control={<Checkbox size="small" checked={allFields} onChange={(__, checked) => setAllFields(checked)} />}
-              label={t('route.advanced.fields.all')}
-              sx={{ '& > span': { color: 'text.secondary' }, alignSelf: 'start' }}
-            />
-          ) : (
-            <Autocomplete
-              fullWidth
-              renderTags={values =>
-                values.length <= 3 ? (
-                  <Stack direction="row" spacing={0.5}>
-                    {values.map(_value => (
-                      <Chip size="small" key={_value} label={_value} />
-                    ))}
-                  </Stack>
-                ) : (
-                  <Tooltip
-                    title={
-                      <Stack spacing={1}>
-                        {values.map(_value => (
-                          <span key={_value}>{_value}</span>
-                        ))}
-                      </Stack>
-                    }
-                  >
-                    <Chip size="small" label={values.length} />
-                  </Tooltip>
-                )
-              }
-              multiple
-              size="small"
-              options={fieldOptions}
-              value={fields}
-              onChange={(__, values) => (values.length > 0 ? setFields(values) : setAllFields(true))}
-              renderInput={params => <TextField {...params} label={t('route.advanced.fields')} />}
-              sx={{ maxWidth: '500px', width: '20vw', minWidth: '200px', '& label': { zIndex: 1200 } }}
-              onKeyDown={onKeyDown}
-              PopperComponent={CustomPopper}
-            />
-          )}
-          <FlexOne />
-          {type === 'lucene' &&
-            (smallButtons ? (
-              <Tooltip title={t('route.advanced.open')}>
-                <IconButton
-                  color="primary"
-                  sx={{ alignSelf: 'center' }}
-                  component={Link}
-                  disabled={!response}
-                  to={`/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}`}
-                >
-                  <OpenInNew fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            ) : (
-              <CustomButton
-                size="small"
-                variant="outlined"
-                startIcon={<OpenInNew />}
-                component={Link}
-                disabled={!response}
-                // TuiButton doesn't accept this prop even through the underlying component does, so we do a hack
-                {...({ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` } as any)}
-              >
-                {t('route.advanced.open')}
-              </CustomButton>
-            ))}
-          {smallButtons ? (
-            <Tooltip title={response ? t('route.advanced.create.rule') : t('route.advanced.create.rule.disabled')}>
-              <IconButton
-                size="small"
-                sx={{ alignSelf: 'center' }}
-                color="info"
-                onClick={onCreateRule}
-                disabled={!response}
-              >
-                <SsidChart />
-              </IconButton>
-            </Tooltip>
-          ) : (
-            <CustomButton
-              size="small"
-              variant="outlined"
-              color="info"
-              startIcon={<SsidChart />}
-              onClick={onCreateRule}
-              disabled={!response}
-              // TuiButton doesn't accept this prop even through the underlying component does, so we do a hack
-              {...({ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` } as any)}
-              tooltip={!response && t('route.advanced.create.rule.disabled')}
-            >
-              {t('route.advanced.create.rule')}
-            </CustomButton>
-          )}
-        </Stack>
-        <Box
-          width="100%"
-          height="calc(100vh - 112px)"
-          sx={{ position: 'relative', overflow: 'hidden', borderTop: `thin solid ${theme.palette.divider}` }}
-        >
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              bottom: 0,
-              right: `calc(50% + 7px - ${x}px)`,
-              pt: 1,
-              display: 'flex'
-            }}
-          >
-            <QueryEditor query={query} setQuery={setQuery} language={type} height="100%" />
-          </Box>
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              bottom: 0,
-              left: 'calc(50% - 5px)',
-              width: '10px',
-              backgroundColor: theme.palette.divider,
-              cursor: 'col-resize',
-              transform: `translateX(${x}px)`,
-              zIndex: 1000,
-              borderRadius: theme.shape.borderRadius
-            }}
-            onMouseDown={onMouseDown}
-          />
-          <Box
-            sx={{
-              position: 'absolute',
-              top: 0,
-              left: `calc(50% + 7px + ${x}px)`,
-              bottom: 0,
-              right: 0,
-              display: 'flex',
-              alignItems: 'stretch',
-              justifyContent: 'stretch',
-              px: 1,
-              pt: 1,
-              mt: -1,
-              '& > *': { width: '100%' },
-              '& .react-json-view': {
-                backgroundColor: `${theme.palette.background.paper} !important`
-              }
-            }}
-          >
-            {response ? (
-              <JSONViewer data={response ?? {}} collapse={allFields} />
-            ) : (
-              <Stack alignItems="center" p={2}>
-                <Typography variant="h3" sx={{ mt: 4, color: 'text.secondary', opacity: 0.7 }}>
-                  {t('route.advanced.result.title')}
-                </Typography>
-                <Typography variant="h5" sx={{ mt: 2, color: 'text.secondary', opacity: 0.7 }}>
-                  {t('route.advanced.result.description')}
-                </Typography>
-              </Stack>
-            )}
-          </Box>
-          {error && (
-            <Alert
-              sx={{ position: 'absolute', bottom: 0, left: 0, right: '50%', m: 1, mr: 13, maxHeight: '40vh' }}
-              variant="outlined"
-              color="error"
-            >
-              <AlertTitle>{t('route.advanced.error')}</AlertTitle>
-              {error}
-            </Alert>
-          )}
-        </Box>
-      </Stack>
-    </PageCenter>
-  );
-};
-
-export default QueryBuilder;