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

package/components/routes/templates/Templates.js

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Article } 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 { Typography, Stack, ToggleButtonGroup, ToggleButton } 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 { a as api } from "../../../index-BPPnUdfP.js";
+import "../../../commons/components/app/AppContexts.js";
+import { useContext, useState, useCallback, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import "../../../i18n.js";
+import "../../../commons/components/app/hooks/useAppSitemap.js";
+import { useAppUser } from "../../../commons/components/app/hooks/useAppUser.js";
+import "../../../TuiList-D7-CH2oS.js";
+import TuiListProvider, { TuiListMethodContext } from "../../elements/addons/lists/TuiListProvider.js";
+import ItemManager from "../../elements/display/ItemManager.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import { useMyLocalStorageItem } from "../../hooks/useMyLocalStorage.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 { useNavigate, useSearchParams } 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 { StorageKey } from "../../../utils/constants.js";
+import TemplateCard from "./TemplateCard.js";
+const TemplatesBase = () => {
+  const { t } = useTranslation();
+  const { user } = useAppUser();
+  const navigate = useNavigate();
+  const { dispatchApi } = useMyApi();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { load } = useContext(TuiListMethodContext);
+  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+  const [phrase, setPhrase] = useState("");
+  const [offset, setOffset] = useState(parseInt(searchParams.get("offset")) || 0);
+  const [response, setResponse] = useState(null);
+  const [types, setTypes] = useState([]);
+  const [hasError, setHasError] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const onSearch = useCallback(async () => {
+    try {
+      setSearching(true);
+      setHasError(false);
+      if (phrase) {
+        searchParams.set("phrase", phrase);
+      } else {
+        searchParams.delete("phrase");
+      }
+      setSearchParams(searchParams, { replace: true });
+      const phraseQuery = phrase ? `*:*${phrase}*` : "*:*";
+      const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${types.join(" ") || "*"})`;
+      setResponse(
+        await dispatchApi(
+          api.search.template.post({
+            query: `${phraseQuery} AND ${typeQuery}`,
+            rows: pageCount,
+            offset
+          })
+        )
+      );
+    } catch (e) {
+      setHasError(true);
+    } finally {
+      setSearching(false);
+    }
+  }, [phrase, setSearchParams, searchParams, user.username, types, dispatchApi, pageCount, offset]);
+  useEffect(() => {
+    if (response) {
+      load(
+        response.items.map((item) => ({
+          id: item.template_id,
+          item,
+          selected: false,
+          cursor: false
+        }))
+      );
+    }
+  }, [response, load]);
+  const onPageChange = useCallback(
+    (_offset) => {
+      if (_offset !== offset) {
+        searchParams.set("offset", _offset.toString());
+        setSearchParams(searchParams, { replace: true });
+        setOffset(_offset);
+      }
+    },
+    [offset, searchParams, setSearchParams]
+  );
+  useEffect(() => {
+    onSearch();
+    if (!searchParams.has("offset")) {
+      searchParams.set("offset", "0");
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [dispatchApi, types]);
+  useEffect(() => {
+    if ((response == null ? void 0 : response.total) <= offset) {
+      setOffset(0);
+      searchParams.set("offset", "0");
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [offset, response == null ? void 0 : response.total, searchParams, setSearchParams]);
+  useEffect(() => {
+    if (!searching) {
+      onSearch();
+    }
+  }, [offset]);
+  const renderer = useCallback(
+    (item, className) => /* @__PURE__ */ jsx(TemplateCard, { template: item, className }),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    ItemManager,
+    {
+      onSearch,
+      onPageChange,
+      phrase,
+      setPhrase,
+      hasError,
+      searching,
+      searchFilters: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: /* @__PURE__ */ jsxs(
+        ToggleButtonGroup,
+        {
+          sx: { display: "grid", gridTemplateColumns: "1fr 1fr", alignSelf: "start" },
+          size: "small",
+          value: types,
+          onChange: (__, _types) => {
+            if (_types) {
+              setTypes(_types.length < 2 ? _types : []);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t("route.templates.manager.personal") }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "global", "aria-label": "global", children: t("route.templates.manager.global") })
+          ]
+        }
+      ) }),
+      aboveSearch: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: (theme) => ({ fontStyle: "italic", color: theme.palette.text.disabled, mb: 0.5 }),
+          variant: "body2",
+          children: t("route.templates.search.prompt")
+        }
+      ),
+      renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()),
+      response,
+      onSelect: (item) => navigate(
+        `/templates/view?type=${item.item.type}&analytic=${item.item.analytic}${item.item.detection ? "&detection=" + item.item.detection : ""}`
+      ),
+      onCreate: () => navigate("/templates/view"),
+      createPrompt: "route.templates.create",
+      searchPrompt: "route.templates.manager.search",
+      createIcon: /* @__PURE__ */ jsx(Article, { sx: { mr: 1 } })
+    }
+  );
+};
+const Templates = () => {
+  return /* @__PURE__ */ jsx(TuiListProvider, { children: /* @__PURE__ */ jsx(TemplatesBase, {}) });
+};
+export {
+  Templates as default
+};

package/components/routes/views/ViewComposer.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const ViewComposer: FC;
+export default ViewComposer;

package/components/routes/views/ViewComposer.js

@@ -0,0 +1,276 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useState, 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 { Save, HelpOutline } 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 { Stack, Alert, TextField, ToggleButtonGroup, ToggleButton, CircularProgress, Typography, Tooltip, Checkbox, Divider, LinearProgress } 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 { a as api } from "../../../index-BPPnUdfP.js";
+import AppListEmpty from "../../../commons/components/display/AppListEmpty.js";
+import PageCenter from "../../../commons/components/pages/PageCenter.js";
+import { HitContext } from "../../app/providers/HitProvider.js";
+import { ParameterContext } from "../../app/providers/ParameterProvider.js";
+import { ViewContext } from "../../app/providers/ViewProvider.js";
+import CustomButton from "../../elements/addons/buttons/CustomButton.js";
+import FlexPort from "../../elements/addons/layout/FlexPort.js";
+import VSBox from "../../elements/addons/layout/vsbox/VSBox.js";
+import VSBoxContent from "../../elements/addons/layout/vsbox/VSBoxContent.js";
+import VSBoxHeader from "../../elements/addons/layout/vsbox/VSBoxHeader.js";
+import SearchTotal from "../../elements/addons/search/SearchTotal.js";
+import HitCard from "../../elements/hit/HitCard.js";
+import { HitLayout } from "../../elements/hit/HitLayout.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import { useMyLocalStorageItem } from "../../hooks/useMyLocalStorage.js";
+import useMySnackbar from "../../hooks/useMySnackbar.js";
+import { useParams, useNavigate } 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 { 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 { StorageKey } from "../../../utils/constants.js";
+import { convertDateToLucene } from "../../../utils/utils.js";
+import ErrorBoundary from "../ErrorBoundary.js";
+import HitQuery from "../hits/search/HitQuery.js";
+import HitSort from "../hits/search/shared/HitSort.js";
+import SearchSpan from "../hits/search/shared/SearchSpan.js";
+const ViewComposer = () => {
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+  const { showSuccessMessage, showErrorMessage } = useMySnackbar();
+  const routeParams = useParams();
+  const navigate = useNavigate();
+  const addView = useContextSelector(ViewContext, (ctx) => ctx.addView);
+  const editView = useContextSelector(ViewContext, (ctx) => ctx.editView);
+  const getCurrentView = useContextSelector(ViewContext, (ctx) => ctx.getCurrentView);
+  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+  const loadHits = useContextSelector(HitContext, (ctx) => ctx.loadHits);
+  const [title, setTitle] = useState("");
+  const [type, setType] = useState("global");
+  const [advanceOnTriage, setAdvanceOnTriage] = useState(false);
+  const query = useContextSelector(ParameterContext, (ctx) => ctx.query);
+  const setQuery = useContextSelector(ParameterContext, (ctx) => ctx.setQuery);
+  const sort = useContextSelector(ParameterContext, (ctx) => ctx.sort);
+  const setSort = useContextSelector(ParameterContext, (ctx) => ctx.setSort);
+  const span = useContextSelector(ParameterContext, (ctx) => ctx.span);
+  const setSpan = useContextSelector(ParameterContext, (ctx) => ctx.setSpan);
+  const [loading, setLoading] = useState(false);
+  const [isSearchDirty, setIsSearchDirty] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const [error, setError] = useState(null);
+  const [response, setResponse] = useState();
+  const onSave = useCallback(async () => {
+    setLoading(true);
+    try {
+      if (!routeParams.id) {
+        const newView = await addView({
+          title,
+          type,
+          query,
+          sort: sort || null,
+          span: span || null,
+          settings: {
+            advance_on_triage: advanceOnTriage
+          }
+        });
+        navigate(`/views/${newView.view_id}`);
+      } else {
+        await editView(routeParams.id, {
+          title,
+          type,
+          query,
+          sort,
+          span,
+          settings: { advance_on_triage: advanceOnTriage }
+        });
+      }
+      showSuccessMessage(t(routeParams.id ? "route.views.update.success" : "route.views.create.success"));
+    } catch (e) {
+      showErrorMessage(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    routeParams.id,
+    showSuccessMessage,
+    t,
+    addView,
+    title,
+    type,
+    query,
+    sort,
+    span,
+    advanceOnTriage,
+    navigate,
+    editView,
+    showErrorMessage
+  ]);
+  const search = useCallback(
+    async (_query) => {
+      setQuery(_query);
+      setSearching(true);
+      setError(null);
+      try {
+        const _response = await dispatchApi(
+          api.search.hit.post({
+            rows: pageCount,
+            query: _query,
+            sort,
+            filters: span ? [`event.created:${convertDateToLucene(span)}`] : []
+          }),
+          { showError: false, throwError: true }
+        );
+        loadHits(_response.items);
+        setResponse(_response);
+      } catch (e) {
+        setError(e.message);
+      } finally {
+        setSearching(false);
+      }
+    },
+    [dispatchApi, loadHits, pageCount, setQuery, sort, span]
+  );
+  useEffect(() => {
+    search(query || "howler.id:*");
+  }, []);
+  useEffect(() => {
+    if (query) {
+      search(query);
+    }
+  }, [sort, span]);
+  useEffect(() => {
+    if (!routeParams.id) {
+      return;
+    }
+    (async () => {
+      var _a;
+      const viewToEdit = await getCurrentView();
+      if (!viewToEdit) {
+        setError("route.views.missing");
+        return;
+      } else {
+        setError(null);
+      }
+      setTitle(viewToEdit.title);
+      setAdvanceOnTriage(((_a = viewToEdit.settings) == null ? void 0 : _a.advance_on_triage) ?? false);
+      setQuery(viewToEdit.query);
+      if (viewToEdit.sort) {
+        setSort(viewToEdit.sort);
+      }
+      if (viewToEdit.span) {
+        setSpan(viewToEdit.span);
+      }
+    })();
+  }, [routeParams.id, getCurrentView]);
+  return /* @__PURE__ */ jsx(FlexPort, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: /* @__PURE__ */ jsxs(VSBox, { top: 0, children: [
+    /* @__PURE__ */ jsx(VSBoxHeader, { pb: 1, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+      error && /* @__PURE__ */ jsx(Alert, { variant: "outlined", severity: "error", children: t(error) }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: t("route.views.name"),
+            size: "small",
+            value: title,
+            onChange: (e) => setTitle(e.target.value),
+            fullWidth: true
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ToggleButtonGroup,
+          {
+            sx: { display: "grid", gridTemplateColumns: "1fr 1fr" },
+            size: "small",
+            exclusive: true,
+            value: type,
+            onChange: (__, _type) => {
+              if (_type) {
+                setType(_type);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t("route.views.manager.personal") }),
+              /* @__PURE__ */ jsx(ToggleButton, { value: "global", "aria-label": "global", children: t("route.views.manager.global") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomButton,
+          {
+            variant: "outlined",
+            disabled: !title || !type || !query || !response || loading || searching || isSearchDirty,
+            startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : /* @__PURE__ */ jsx(Save, {}),
+            onClick: onSave,
+            children: t("save")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: (theme) => ({
+            color: theme.palette.text.secondary,
+            fontSize: "0.9em",
+            fontStyle: "italic",
+            mb: 0.5
+          }),
+          variant: "body2",
+          children: t("hit.search.prompt")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        HitQuery,
+        {
+          triggerSearch: search,
+          searching,
+          onChange: (_query, isDirty) => setIsSearchDirty(isDirty)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          spacing: 1,
+          sx: { "& > :not(.MuiDivider-root)": { flex: 1 } },
+          divider: /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "vertical" }),
+          children: [
+            /* @__PURE__ */ jsx(HitSort, {}),
+            /* @__PURE__ */ jsx(SearchSpan, { omitCustom: true }),
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                spacing: 1,
+                direction: "row",
+                alignItems: "center",
+                sx: { flex: "0 !important", minWidth: "300px" },
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { component: "span", children: t("view.settings.advance_on_triage") }),
+                  /* @__PURE__ */ jsx(Tooltip, { title: t("view.settings.advance_on_triage.description"), children: /* @__PURE__ */ jsx(HelpOutline, { sx: { fontSize: "16px" } }) }),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      size: "small",
+                      checked: advanceOnTriage,
+                      onChange: (_event, checked) => setAdvanceOnTriage(checked)
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      (response == null ? void 0 : response.total) ? /* @__PURE__ */ jsx(
+        SearchTotal,
+        {
+          total: response.total,
+          pageLength: response.items.length,
+          offset: response.offset,
+          sx: (theme) => ({ color: theme.palette.text.secondary, fontSize: "0.9em", fontStyle: "italic" })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })
+    ] }) }),
+    /* @__PURE__ */ jsx(VSBoxContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+      !(response == null ? void 0 : response.total) && /* @__PURE__ */ jsx(AppListEmpty, {}),
+      response == null ? void 0 : response.items.map((hit) => /* @__PURE__ */ jsx(HitCard, { id: hit.howler.id, layout: HitLayout.DENSE }, hit.howler.id))
+    ] }) })
+  ] }) }) }) });
+};
+export {
+  ViewComposer as default
+};

package/components/routes/views/Views.d.ts

@@ -0,0 +1,2 @@
+declare const Views: () => import("react/jsx-runtime").JSX.Element;
+export default Views;