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

package/components/routes/advanced/QueryBuilder.js

@@ -0,0 +1,497 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useMonaco } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@monaco-editor+react@4.7.0_monaco-editor@0.49.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@monaco-editor/react/dist/index.mjs";
+import { PlayArrowOutlined, OpenInNew, SsidChart } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, useMediaQuery, Stack, Tooltip, IconButton, CircularProgress, Autocomplete, TextField, ListItemText, Card, Typography, Slider, FormControlLabel, Checkbox, Chip, Box, Alert, AlertTitle } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import Popper from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/Popper/index.js";
+import { a as api } from "../../../index-BPPnUdfP.js";
+import PageCenter from "../../../commons/components/pages/PageCenter.js";
+import { parseEvent } from "../../../commons/components/utils/keyboard.js";
+import { FieldContext } from "../../app/providers/FieldProvider.js";
+import { ModalContext } from "../../app/providers/ModalProvider.js";
+import CustomButton from "../../elements/addons/buttons/CustomButton.js";
+import FlexOne from "../../elements/addons/layout/FlexOne.js";
+import JSONViewer from "../../elements/display/json/JSONViewer.js";
+import useMySnackbar from "../../hooks/useMySnackbar.js";
+import dayjs from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/dayjs.min.js";
+import { useContext, useState, useRef, useMemo, useCallback, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { Link } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+import { sanitizeMultilineLucene } from "../../../utils/stringUtils.js";
+import { v4 } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/uuid@9.0.1/node_modules/uuid/dist/esm-browser/index.js";
+import QueryEditor from "./QueryEditor.js";
+import RuleModal from "./RuleModal.js";
+const QUERY_TYPES = ["eql", "lucene", "yaml"];
+const STEPS = [1, 5, 25, 50, 100, 250, 500, 1e3, 2500, 1e4];
+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: ${v4()}
+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"];
+const CustomPopper = (props) => {
+  return /* @__PURE__ */ jsx(Popper, { ...props, style: { width: "fit-content" }, placement: "bottom-start" });
+};
+const QueryBuilder = () => {
+  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("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(null);
+  const [allFields, setAllFields] = useState(true);
+  const [fields, setFields] = useState(["howler.id"]);
+  const [response, setResponse] = useState(null);
+  const [error, setError] = useState(null);
+  const [rows, setRows] = useState(1);
+  const [x, setX] = useState(0);
+  const wrapper = useRef();
+  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;
+      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 = useCallback(
+    (event) => {
+      const parsedEvent = parseEvent(event);
+      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+        execute();
+      }
+    },
+    [execute]
+  );
+  const onMouseMove = useCallback((event) => {
+    var _a;
+    const wrapperRect = (_a = wrapper.current) == null ? void 0 : _a.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(
+      (res) => showModal(/* @__PURE__ */ jsx(RuleModal, { onSubmit: res, fileData: query, 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 /* @__PURE__ */ jsx(PageCenter, { width: "100%", maxWidth: "100%", margin: 0, textAlign: "left", children: /* @__PURE__ */ jsxs(Stack, { ref: wrapper, children: [
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          px: 2,
+          pt: 1,
+          pb: 1,
+          // Fix TuiButton Issue
+          "& > span": {
+            display: "flex",
+            alignSelf: "stretch"
+          }
+        },
+        children: [
+          smallButtons ? /* @__PURE__ */ jsx(Tooltip, { title: t("route.actions.execute"), children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              sx: { alignSelf: "start" },
+              color: "success",
+              onClick: execute,
+              disabled: searchDisabled,
+              children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "success" }) : /* @__PURE__ */ jsx(PlayArrowOutlined, { color: searchDisabled ? "disabled" : "success" })
+            }
+          ) }) : /* @__PURE__ */ jsx(
+            CustomButton,
+            {
+              size: "small",
+              variant: "outlined",
+              startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "success" }) : /* @__PURE__ */ jsx(
+                PlayArrowOutlined,
+                {
+                  color: searchDisabled ? "disabled" : "success",
+                  sx: { "& path": { stroke: "currentcolor", strokeWidth: "1px" } }
+                }
+              ),
+              color: "success",
+              onClick: execute,
+              disabled: searchDisabled,
+              children: t("route.actions.execute")
+            }
+          ),
+          /* @__PURE__ */ jsxs(Stack, { direction: compactLayout ? "column" : "row", spacing: 1, children: [
+            /* @__PURE__ */ jsx(
+              Autocomplete,
+              {
+                value: type,
+                onChange: (__, value) => setType(value),
+                options: QUERY_TYPES,
+                getOptionLabel: (option) => t(`route.advanced.query.${option}`),
+                renderOption: (props, option) => /* @__PURE__ */ jsx(
+                  ListItemText,
+                  {
+                    ...props,
+                    sx: { flexDirection: "column", alignItems: "start !important" },
+                    primary: t(`route.advanced.query.${option}`),
+                    secondary: t(`route.advanced.query.${option}.description`)
+                  }
+                ),
+                renderInput: (params) => /* @__PURE__ */ jsx(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" } } }
+              }
+            ),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", sx: { flex: 1, maxWidth: "350px", minWidth: "210px" }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, sx: { px: 1, alignItems: "start" }, children: [
+              /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: "nowrap" }, children: [
+                t("route.advanced.rows"),
+                ": ",
+                STEPS[rows]
+              ] }),
+              /* @__PURE__ */ jsx(
+                Slider,
+                {
+                  size: "small",
+                  valueLabelDisplay: "off",
+                  value: rows,
+                  onChange: (_, value) => setRows(value),
+                  min: 0,
+                  max: 9,
+                  step: 1,
+                  marks: true,
+                  track: false,
+                  sx: { py: 0.5 }
+                }
+              )
+            ] }) })
+          ] }),
+          type === "lucene" && /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              size: "small",
+              getOptionLabel: (opt) => t(`route.advanced.query.type.${opt}`),
+              options: LUCENE_QUERY_OPTIONS,
+              value: queryType,
+              onChange: (_event, value) => setQueryType(value),
+              renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: t("route.advanced.query.type"), sx: { minWidth: "200px" } })
+            }
+          ),
+          queryType === "groupby" && /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              size: "small",
+              options: fieldOptions,
+              value: groupByField,
+              onChange: (__, value) => setGroupByField(value),
+              renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: t("route.advanced.pivot.field") }),
+              sx: { minWidth: "200px", "& label": { zIndex: 1200 } },
+              onKeyDown,
+              PopperComponent: CustomPopper
+            }
+          ),
+          allFields && queryType !== "facet" ? /* @__PURE__ */ jsx(
+            FormControlLabel,
+            {
+              control: /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: allFields, onChange: (__, checked) => setAllFields(checked) }),
+              label: t("route.advanced.fields.all"),
+              sx: { "& > span": { color: "text.secondary" }, alignSelf: "start" }
+            }
+          ) : /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              fullWidth: true,
+              renderTags: (values) => values.length <= 3 ? /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0.5, children: values.map((_value) => /* @__PURE__ */ jsx(Chip, { size: "small", label: _value }, _value)) }) : /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  title: /* @__PURE__ */ jsx(Stack, { spacing: 1, children: values.map((_value) => /* @__PURE__ */ jsx("span", { children: _value }, _value)) }),
+                  children: /* @__PURE__ */ jsx(Chip, { size: "small", label: values.length })
+                }
+              ),
+              multiple: true,
+              size: "small",
+              options: fieldOptions,
+              value: fields,
+              onChange: (__, values) => values.length > 0 ? setFields(values) : setAllFields(true),
+              renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: t("route.advanced.fields") }),
+              sx: { maxWidth: "500px", width: "20vw", minWidth: "200px", "& label": { zIndex: 1200 } },
+              onKeyDown,
+              PopperComponent: CustomPopper
+            }
+          ),
+          /* @__PURE__ */ jsx(FlexOne, {}),
+          type === "lucene" && (smallButtons ? /* @__PURE__ */ jsx(Tooltip, { title: t("route.advanced.open"), children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              color: "primary",
+              sx: { alignSelf: "center" },
+              component: Link,
+              disabled: !response,
+              to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll("\n", " ").trim()}`,
+              children: /* @__PURE__ */ jsx(OpenInNew, { fontSize: "small" })
+            }
+          ) }) : /* @__PURE__ */ jsx(
+            CustomButton,
+            {
+              size: "small",
+              variant: "outlined",
+              startIcon: /* @__PURE__ */ jsx(OpenInNew, {}),
+              component: Link,
+              disabled: !response,
+              ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll("\n", " ").trim()}` },
+              children: t("route.advanced.open")
+            }
+          )),
+          smallButtons ? /* @__PURE__ */ jsx(Tooltip, { title: response ? t("route.advanced.create.rule") : t("route.advanced.create.rule.disabled"), children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              sx: { alignSelf: "center" },
+              color: "info",
+              onClick: onCreateRule,
+              disabled: !response,
+              children: /* @__PURE__ */ jsx(SsidChart, {})
+            }
+          ) }) : /* @__PURE__ */ jsx(
+            CustomButton,
+            {
+              size: "small",
+              variant: "outlined",
+              color: "info",
+              startIcon: /* @__PURE__ */ jsx(SsidChart, {}),
+              onClick: onCreateRule,
+              disabled: !response,
+              ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll("\n", " ").trim()}` },
+              tooltip: !response && t("route.advanced.create.rule.disabled"),
+              children: t("route.advanced.create.rule")
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        width: "100%",
+        height: "calc(100vh - 112px)",
+        sx: { position: "relative", overflow: "hidden", borderTop: `thin solid ${theme.palette.divider}` },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: `calc(50% + 7px - ${x}px)`,
+                pt: 1,
+                display: "flex"
+              },
+              children: /* @__PURE__ */ jsx(QueryEditor, { query, setQuery, language: type, height: "100%" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            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: 1e3,
+                borderRadius: theme.shape.borderRadius
+              },
+              onMouseDown
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            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`
+                }
+              },
+              children: response ? /* @__PURE__ */ jsx(JSONViewer, { data: response ?? {}, collapse: allFields }) : /* @__PURE__ */ jsxs(Stack, { alignItems: "center", p: 2, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h3", sx: { mt: 4, color: "text.secondary", opacity: 0.7 }, children: t("route.advanced.result.title") }),
+                /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mt: 2, color: "text.secondary", opacity: 0.7 }, children: t("route.advanced.result.description") })
+              ] })
+            }
+          ),
+          error && /* @__PURE__ */ jsxs(
+            Alert,
+            {
+              sx: { position: "absolute", bottom: 0, left: 0, right: "50%", m: 1, mr: 13, maxHeight: "40vh" },
+              variant: "outlined",
+              color: "error",
+              children: [
+                /* @__PURE__ */ jsx(AlertTitle, { children: t("route.advanced.error") }),
+                error
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+};
+export {
+  QueryBuilder as default
+};

package/components/routes/advanced/QueryEditor.d.ts

@@ -0,0 +1,14 @@
+import { Monaco } from '@monaco-editor/react';
+import { editor } from 'monaco-editor';
+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;
+}
+declare const _default: import('react').NamedExoticComponent<QueryEditorProps>;
+export default _default;

package/components/routes/advanced/QueryEditor.js

@@ -0,0 +1,117 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useMonaco } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@monaco-editor+react@4.7.0_monaco-editor@0.49.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@monaco-editor/react/dist/index.mjs";
+import { useTheme, Box } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+import { HitSearchContext } from "../../app/providers/HitSearchProvider.js";
+import ThemedEditor from "../../elements/ThemedEditor.js";
+import { memo, useContext, useCallback, useEffect, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useContextSelector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/use-context-selector@2.0.0_react@18.3.1_scheduler@0.23.2/node_modules/use-context-selector/dist/index.js";
+import useEQLCompletionProvider from "./eqlCompletionProvider.js";
+import TOKEN_PROVIDER$1 from "./eqlTokenProvider.js";
+import useHistoryCompletionProvider from "./historyCompletionProvider.js";
+import useLuceneCompletionProvider from "./luceneCompletionProvider.js";
+import TOKEN_PROVIDER from "./luceneTokenProvider.js";
+import useYamlCompletionProvider from "./yamlCompletionProvider.js";
+const QueryEditor = ({
+  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 == null ? void 0 : ctx.fzfSearch) ?? false);
+  const setFzfSearch = useContextSelector(HitSearchContext, (ctx) => ctx == null ? void 0 : ctx.setFzfSearch);
+  const beforeEditorMount = useCallback((_monaco) => {
+    _monaco.languages.register({ id: "lucene" });
+    _monaco.languages.register({ id: "eql" });
+  }, []);
+  useEffect(() => {
+    if (!monaco) {
+      return;
+    }
+    const monarchLuceneDisposable = monaco.languages.setMonarchTokensProvider("lucene", TOKEN_PROVIDER);
+    const monarchEQLDisposable = monaco.languages.setMonarchTokensProvider("eql", TOKEN_PROVIDER$1);
+    monaco.editor.getModels().forEach((model) => model.setEOL(monaco.editor.EndOfLineSequence.LF));
+    if (!fzfSearch) {
+      const luceneCompletionDisposable = monaco.languages.registerCompletionItemProvider("lucene", luceneCompletion);
+      const yamlCompletionDisposable = monaco.languages.registerCompletionItemProvider("yaml", yamlCompletion);
+      const eqlCompletionDisposable = monaco.languages.registerCompletionItemProvider("eql", eqlCompletion);
+      return () => {
+        luceneCompletionDisposable == null ? void 0 : luceneCompletionDisposable.dispose();
+        yamlCompletionDisposable == null ? void 0 : yamlCompletionDisposable.dispose();
+        eqlCompletionDisposable == null ? void 0 : eqlCompletionDisposable.dispose();
+        monarchEQLDisposable == null ? void 0 : monarchEQLDisposable.dispose();
+        monarchLuceneDisposable == null ? void 0 : monarchLuceneDisposable.dispose();
+      };
+    } else {
+      const historyCompletionDisposable = monaco.languages.registerCompletionItemProvider("lucene", historyCompletion);
+      return () => {
+        historyCompletionDisposable == null ? void 0 : historyCompletionDisposable.dispose();
+        monarchLuceneDisposable == null ? void 0 : 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 = useMemo(
+    () => ({
+      readOnly: !setQuery,
+      fontSize,
+      ...editorOptions
+    }),
+    [setQuery, fontSize, editorOptions]
+  );
+  const handleKeyPress = useCallback(
+    (event) => {
+      if (setFzfSearch && event.ctrlKey && event.key == "r") {
+        event.preventDefault();
+        event.stopPropagation();
+        setFzfSearch(!fzfSearch);
+      }
+    },
+    [fzfSearch, setFzfSearch]
+  );
+  return /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, onKeyDownCapture: handleKeyPress, children: /* @__PURE__ */ jsx(
+    ThemedEditor,
+    {
+      height,
+      width,
+      theme: theme.palette.mode === "light" ? "howler" : "howler-dark",
+      value: query,
+      onChange: (value) => setQuery(value),
+      beforeMount: beforeEditorMount,
+      onMount,
+      options
+    }
+  ) });
+};
+const QueryEditor$1 = memo(QueryEditor);
+export {
+  QueryEditor$1 as default
+};

package/components/routes/advanced/RuleModal.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+declare const RuleModal: FC<{
+    onSubmit: () => void;
+    fileData: string;
+    type: 'eql' | 'lucene' | 'yaml';
+}>;
+export default RuleModal;