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

package/components/routes/advanced/yamlCompletionProvider.js

@@ -0,0 +1,50 @@
+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 { FieldContext } from "../../app/providers/FieldProvider.js";
+import Fuse from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/fuse.js@7.1.0/node_modules/fuse.js/dist/fuse.mjs";
+import { useContext, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const useYamlCompletionProvider = () => {
+  const monaco = useMonaco();
+  const { hitFields } = useContext(FieldContext);
+  const fuse = useMemo(() => new Fuse(hitFields, { keys: ["key"], threshold: 0.4 }), [hitFields]);
+  return {
+    provideCompletionItems: (model, position) => {
+      const line = model.getLineContent(position.lineNumber);
+      const context = line.slice(0, position.column - 1);
+      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
+      };
+      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 {
+  useYamlCompletionProvider as default
+};

package/components/routes/analytics/AnalyticComments.d.ts

@@ -0,0 +1,7 @@
+import { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import { FC } from 'react';
+declare const AnalyticComments: FC<{
+    analytic: Analytic;
+    setAnalytic: (a: Analytic) => void;
+}>;
+export default AnalyticComments;

package/components/routes/analytics/AnalyticComments.js

@@ -0,0 +1,190 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Clear, Send } 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 { Chip, Stack, Divider, TextField, Typography, IconButton } 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 { useState, useRef, useCallback, useEffect, useMemo } 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 FlexOne from "../../elements/addons/layout/FlexOne.js";
+import Comment from "../../elements/Comment.js";
+import HowlerAvatar from "../../elements/display/HowlerAvatar.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import useMyUserList from "../../hooks/useMyUserList.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 { 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 { compareTimestamp } from "../../../utils/utils.js";
+const MAX_LENGTH = 5e3;
+const AnalyticComments = ({
+  analytic,
+  setAnalytic
+}) => {
+  const { user } = useAppUser();
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+  const [userIds, setUserIds] = useState(/* @__PURE__ */ new Set());
+  const users = useMyUserList(userIds);
+  const [searchParams] = useSearchParams();
+  const [length, setLength] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [showClear, setShowClear] = useState(false);
+  const input = useRef();
+  const onSubmit = useCallback(async () => {
+    var _a;
+    if (!((_a = input.current) == null ? void 0 : _a.value) || !analytic || input.current.value.length > MAX_LENGTH) return;
+    setLoading(true);
+    try {
+      const result = await dispatchApi(
+        api.analytic.comments.post(analytic.analytic_id, input.current.value, searchParams.get("filter")),
+        {
+          showError: true,
+          throwError: true,
+          logError: false
+        }
+      );
+      setAnalytic(result);
+      input.current.value = "";
+      setShowClear(false);
+    } finally {
+      setLoading(false);
+    }
+  }, [analytic, dispatchApi, searchParams, setAnalytic]);
+  const onClear = useCallback(() => {
+    input.current.value = "";
+    setShowClear(false);
+    setLength(0);
+  }, []);
+  const checkForSubmit = useCallback(
+    (e) => {
+      var _a;
+      e.stopPropagation();
+      if ((_a = input.current) == null ? void 0 : _a.value) {
+        setShowClear(true);
+      }
+      if (e.ctrlKey && e.key === "Enter" && !loading) {
+        onSubmit();
+      }
+    },
+    [loading, onSubmit]
+  );
+  const checkLength = useCallback(() => {
+    var _a;
+    return setLength((_a = input.current) == null ? void 0 : _a.value.length);
+  }, []);
+  const handleDelete = useCallback(
+    async (commentId) => {
+      await dispatchApi(api.analytic.comments.del(analytic == null ? void 0 : analytic.analytic_id, [commentId]));
+      setAnalytic({
+        ...analytic,
+        comment: analytic.comment.filter((c) => c.id !== commentId)
+      });
+    },
+    [analytic, dispatchApi, setAnalytic]
+  );
+  const handleEdit = useCallback(
+    async (commentId, editValue) => {
+      await dispatchApi(api.analytic.comments.put(analytic == null ? void 0 : analytic.analytic_id, commentId, editValue));
+      setAnalytic({
+        ...analytic,
+        comment: analytic.comment.map((cmt) => cmt.id !== commentId ? cmt : { ...cmt, value: editValue })
+      });
+    },
+    [analytic, dispatchApi, setAnalytic]
+  );
+  const handleQuote = useCallback((value) => {
+    if (input.current) {
+      input.current.value = `${input.current.value.trimStart()}
+
+${value.split("\n").map((l) => "> " + l).join("\n")}
+
+`.trimStart();
+      setTimeout(() => {
+        input.current.focus();
+        input.current.selectionStart = input.current.selectionEnd = input.current.value.length;
+      }, 10);
+    }
+  }, []);
+  const handleReact = useCallback(
+    async (commentId, type) => {
+      if (type) {
+        await dispatchApi(api.analytic.comments.react.put(analytic == null ? void 0 : analytic.analytic_id, commentId, type));
+        setAnalytic({
+          ...analytic,
+          comment: analytic.comment.map(
+            (cmt) => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...(cmt == null ? void 0 : cmt.reactions) ?? {}, [user.username]: type } }
+          )
+        });
+      } else {
+        await dispatchApi(api.analytic.comments.react.del(analytic == null ? void 0 : analytic.analytic_id, commentId));
+        setAnalytic({
+          ...analytic,
+          comment: analytic.comment.map(
+            (cmt) => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...(cmt == null ? void 0 : cmt.reactions) ?? {}, [user.username]: void 0 } }
+          )
+        });
+      }
+    },
+    [analytic, dispatchApi, setAnalytic, user.username]
+  );
+  useEffect(() => {
+    setUserIds(new Set(analytic == null ? void 0 : analytic.comment.map((c) => c.user)));
+  }, [analytic == null ? void 0 : analytic.analytic_id]);
+  const comments = useMemo(
+    () => analytic == null ? void 0 : analytic.comment.filter((c) => !searchParams.get("filter") || c.detection === searchParams.get("filter")).sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)).map((c) => /* @__PURE__ */ jsx(
+      Comment,
+      {
+        comment: c,
+        users,
+        handleDelete: () => handleDelete(c.id),
+        handleEdit: (value) => handleEdit(c.id, value),
+        handleReact: (type) => handleReact(c.id, type),
+        handleQuote: () => handleQuote(c.value),
+        extra: !searchParams.get("filter") && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            size: "small",
+            sx: (theme) => ({ marginLeft: "0 !important", mr: `${theme.spacing(2)} !important` }),
+            label: c.detection ?? "Analytic"
+          }
+        )
+      },
+      c.id
+    )),
+    [analytic == null ? void 0 : analytic.comment, searchParams, handleDelete, handleEdit, handleQuote, handleReact, users]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { direction: "column", py: 2, spacing: 1, children: [
+    /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", flexItem: true }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx(HowlerAvatar, { userId: user.username }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          inputProps: { sx: (theme) => ({ fontSize: theme.typography.body2.fontSize }) },
+          InputLabelProps: { shrink: false },
+          placeholder: t(searchParams.get("filter") ? "comments.add.detection" : "comments.add.analytic"),
+          onKeyDown: checkForSubmit,
+          onChangeCapture: checkLength,
+          inputRef: input,
+          error: length > MAX_LENGTH,
+          fullWidth: true,
+          multiline: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(FlexOne, {}),
+      length > 0.9 * MAX_LENGTH && /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: "error.main" }], children: [
+        length,
+        "/",
+        MAX_LENGTH
+      ] }),
+      showClear && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: /* @__PURE__ */ jsx(Clear, { fontSize: "small" }) }),
+      /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: /* @__PURE__ */ jsx(Send, { fontSize: "small" }) })
+    ] }),
+    comments
+  ] });
+};
+export {
+  AnalyticComments as default
+};

package/components/routes/analytics/AnalyticDetails.d.ts

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

package/components/routes/analytics/AnalyticDetails.js

@@ -0,0 +1,254 @@
+import { jsx, jsxs, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { SsidChart, Delete, OpenInNew, Check, Edit } 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, Typography, Stack, Skeleton, Tooltip, IconButton, FormControl, InputLabel, Select, MenuItem, CircularProgress, Divider, Grid, Tabs, Tab, Autocomplete, TextField } 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, useMemo, useEffect, useCallback } 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 PageCenter from "../../../commons/components/pages/PageCenter.js";
+import { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+import { UserListContext } from "../../app/providers/UserListProvider.js";
+import UserList from "../../elements/UserList.js";
+import HowlerAvatar from "../../elements/display/HowlerAvatar.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import useMySnackbar from "../../hooks/useMySnackbar.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 { useParams, useNavigate, useSearchParams, 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 { RULE_INTERVALS } from "../../../utils/constants.js";
+import AnalyticComments from "./AnalyticComments.js";
+import AnalyticHitComments from "./AnalyticHitComments.js";
+import AnalyticNotebooks from "./AnalyticNotebooks.js";
+import AnalyticOverview from "./AnalyticOverview.js";
+import AnalyticOverviews from "./AnalyticOverviews.js";
+import AnalyticTemplates from "./AnalyticTemplates.js";
+import RuleView from "./RuleView.js";
+import TriageSettings from "./TriageSettings.js";
+const AnalyticDetails = () => {
+  const { t } = useTranslation();
+  const params = useParams();
+  const navigate = useNavigate();
+  const { user } = useAppUser();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { dispatchApi } = useMyApi();
+  const theme = useTheme();
+  const { showSuccessMessage } = useMySnackbar();
+  const { users, searchUsers } = useContext(UserListContext);
+  const { config } = useContext(ApiConfigContext);
+  const [analytic, setAnalytic] = useState(null);
+  const [tab, setTab] = useState(searchParams.get("tab") ?? "overview");
+  const [editingInterval, setEditingInterval] = useState(false);
+  const [intervalLoading, setIntervalLoading] = useState(false);
+  const [crontab, setCrontab] = useState(RULE_INTERVALS[3].crontab);
+  const filteredContributors = useMemo(
+    () => ((analytic == null ? void 0 : analytic.contributors) ?? []).filter((_user) => _user !== (analytic == null ? void 0 : analytic.owner)),
+    [analytic == null ? void 0 : analytic.contributors, analytic == null ? void 0 : analytic.owner]
+  );
+  useEffect(() => {
+    dispatchApi(api.analytic.get(params.id)).then(setAnalytic);
+  }, [dispatchApi, params.id]);
+  const [filter, _setFilter] = useState(searchParams.get("filter") ?? null);
+  const setFilter = useCallback(
+    (detection) => {
+      if (filter === detection) {
+        _setFilter(null);
+      } else {
+        _setFilter(detection);
+      }
+    },
+    [filter]
+  );
+  const onOwnerChange = useCallback(
+    async (ownerId) => {
+      const result = await dispatchApi(api.analytic.owner.post(analytic.analytic_id, { username: ownerId }), {
+        throwError: true,
+        showError: true
+      });
+      setAnalytic(result);
+    },
+    [analytic == null ? void 0 : analytic.analytic_id, dispatchApi]
+  );
+  const onDelete = useCallback(async () => {
+    await dispatchApi(api.analytic.del(analytic == null ? void 0 : analytic.analytic_id));
+    showSuccessMessage(t("route.analytics.deleted"));
+    navigate("/analytics");
+  }, [analytic == null ? void 0 : analytic.analytic_id, dispatchApi, navigate, showSuccessMessage, t]);
+  const onEdit = useCallback(async () => {
+    if (editingInterval) {
+      setIntervalLoading(true);
+      try {
+        await dispatchApi(
+          api.analytic.put(analytic == null ? void 0 : analytic.analytic_id, {
+            rule_crontab: crontab
+          })
+        );
+        setAnalytic((_analytic) => ({
+          ..._analytic,
+          rule_crontab: crontab
+        }));
+        setEditingInterval(false);
+      } finally {
+        setIntervalLoading(false);
+      }
+    } else {
+      setEditingInterval(true);
+    }
+  }, [analytic == null ? void 0 : analytic.analytic_id, crontab, dispatchApi, editingInterval]);
+  useEffect(() => {
+    if (searchParams.get("tab") !== tab) {
+      searchParams.set("tab", tab);
+    }
+    if (searchParams.get("filter") !== filter) {
+      if (filter) {
+        searchParams.set("filter", filter);
+      } else {
+        searchParams.delete("filter");
+      }
+    }
+    setSearchParams(searchParams, { replace: true });
+  }, [filter, searchParams, setSearchParams, tab]);
+  useEffect(() => {
+    if (!(analytic == null ? void 0 : analytic.owner)) {
+      return;
+    }
+    searchUsers(`uname:"${analytic == null ? void 0 : analytic.owner}"`);
+  }, [analytic == null ? void 0 : analytic.owner, searchUsers]);
+  return /* @__PURE__ */ jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: /* @__PURE__ */ jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h3", mb: 2, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+      analytic ? /* @__PURE__ */ jsx("span", { children: analytic.name }) : /* @__PURE__ */ jsxs(Stack, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "170px", height: "28px" }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "140px", height: "28px" })
+      ] }),
+      (analytic == null ? void 0 : analytic.rule) && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: t("route.analytics.rule"), children: /* @__PURE__ */ jsx(SsidChart, { fontSize: "large", color: "info" }) }),
+        ((analytic == null ? void 0 : analytic.owner) === user.username || user.roles.includes("admin")) && /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, children: /* @__PURE__ */ jsx(Delete, {}) })
+      ] }),
+      /* @__PURE__ */ jsx(IconButton, { component: Link, to: `/hits?query=howler.analytic:"${analytic == null ? void 0 : analytic.name}"`, children: /* @__PURE__ */ jsx(OpenInNew, {}) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 1,
+        divider: /* @__PURE__ */ jsx(
+          Divider,
+          {
+            flexItem: true,
+            orientation: "vertical",
+            sx: { marginLeft: `${theme.spacing(2)} !important`, marginRight: `${theme.spacing(1)} !important` }
+          }
+        ),
+        mb: 2,
+        children: [
+          /* @__PURE__ */ jsxs(Stack, { spacing: 1, alignItems: "start", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: t("owner") }),
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+              !(analytic == null ? void 0 : analytic.rule) ? /* @__PURE__ */ jsx(
+                UserList,
+                {
+                  buttonSx: {
+                    marginTop: "0 !important",
+                    marginLeft: `${theme.spacing(-1)} !important`,
+                    marginRight: `${theme.spacing(-1)} !important`
+                  },
+                  userId: analytic == null ? void 0 : analytic.owner,
+                  onChange: onOwnerChange,
+                  i18nLabel: "route.analytics.set.owner"
+                }
+              ) : /* @__PURE__ */ jsx(HowlerAvatar, { userId: analytic == null ? void 0 : analytic.owner }),
+              /* @__PURE__ */ jsx(Stack, { children: users[analytic == null ? void 0 : analytic.owner] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body1", children: users[analytic == null ? void 0 : analytic.owner].name }),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    component: "a",
+                    href: `mailto:${users[analytic == null ? void 0 : analytic.owner].email}`,
+                    variant: "caption",
+                    color: "text.secondary",
+                    children: users[analytic == null ? void 0 : analytic.owner].email
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "70px" }),
+                /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60px" })
+              ] }) })
+            ] })
+          ] }),
+          filteredContributors.length > 0 && /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: t("route.analytics.contributors") }),
+            /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: filteredContributors.map((_user) => /* @__PURE__ */ jsx(HowlerAvatar, { userId: _user }, _user)) })
+          ] }),
+          (analytic == null ? void 0 : analytic.rule_crontab) && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+            /* @__PURE__ */ jsxs(Stack, { spacing: 1, justifyContent: "space-between", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: t("rule.interval") }),
+              editingInterval ? /* @__PURE__ */ jsxs(FormControl, { sx: { minWidth: "200px" }, children: [
+                /* @__PURE__ */ jsx(InputLabel, { children: t("rule.interval") }),
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    size: "small",
+                    label: t("rule.interval"),
+                    onChange: (event) => setCrontab(event.target.value),
+                    value: crontab,
+                    children: RULE_INTERVALS.map((interval) => /* @__PURE__ */ jsx(MenuItem, { value: interval.crontab, children: t(interval.key) }, interval.key))
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx(
+                "code",
+                {
+                  style: {
+                    backgroundColor: theme.palette.background.paper,
+                    padding: theme.spacing(0.5),
+                    alignSelf: "start",
+                    borderRadius: theme.shape.borderRadius,
+                    border: `thin solid ${theme.palette.divider}`,
+                    width: "100%"
+                  },
+                  children: analytic.rule_crontab
+                }
+              )
+            ] }),
+            ((analytic == null ? void 0 : analytic.owner) === user.username || user.roles.includes("admin")) && /* @__PURE__ */ jsx(Tooltip, { title: editingInterval ? t("rule.interval.save") : t("rule.interval.edit"), children: /* @__PURE__ */ jsx(IconButton, { disabled: intervalLoading, sx: { alignSelf: "end" }, onClick: onEdit, children: intervalLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : editingInterval ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Edit, {}) }) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 9, children: /* @__PURE__ */ jsxs(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: [
+        /* @__PURE__ */ jsx(Tab, { label: t("route.analytics.tab.overview"), value: "overview" }),
+        /* @__PURE__ */ jsx(Tab, { label: t("route.analytics.tab.comments"), value: "comments" }),
+        /* @__PURE__ */ jsx(Tab, { label: t("route.analytics.tab.hit_comments"), value: "hit_comments" }),
+        /* @__PURE__ */ jsx(Tab, { label: t("route.analytics.tab.templates"), value: "templates" }),
+        /* @__PURE__ */ jsx(Tab, { label: t("route.analytics.tab.overviews"), value: "overviews" }),
+        (analytic == null ? void 0 : analytic.rule) && /* @__PURE__ */ jsx(Tab, { label: t("route.analytics.tab.rule"), value: "rule" }),
+        (config == null ? void 0 : config.configuration.features.notebook) && /* @__PURE__ */ jsx(Tab, { label: t("route.analytics.tab.notebooks"), value: "notebooks" }),
+        /* @__PURE__ */ jsx(Tab, { label: t("route.analytics.tab.triage"), value: "triage" })
+      ] }) }),
+      ["comments", "hit_comments"].includes(tab) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          options: (analytic == null ? void 0 : analytic.detections) ?? [],
+          renderInput: (param) => /* @__PURE__ */ jsx(TextField, { ...param, label: "Detection" }),
+          value: filter,
+          onChange: (_, v) => setFilter(v)
+        }
+      ) })
+    ] }),
+    {
+      comments: /* @__PURE__ */ jsx(AnalyticComments, { analytic, setAnalytic }),
+      hit_comments: /* @__PURE__ */ jsx(AnalyticHitComments, { analytic }),
+      overview: /* @__PURE__ */ jsx(AnalyticOverview, { analytic, setAnalytic }),
+      overviews: /* @__PURE__ */ jsx(AnalyticOverviews, { analytic }),
+      rule: /* @__PURE__ */ jsx(RuleView, { analytic, setAnalytic }),
+      templates: /* @__PURE__ */ jsx(AnalyticTemplates, { analytic }),
+      triage: /* @__PURE__ */ jsx(TriageSettings, { analytic, setAnalytic }),
+      ...(config == null ? void 0 : config.configuration.features.notebook) ? {
+        notebooks: /* @__PURE__ */ jsx(AnalyticNotebooks, { analytic, setAnalytic })
+      } : {}
+    }[tab]
+  ] }) });
+};
+export {
+  AnalyticDetails as default
+};

package/components/routes/analytics/AnalyticHitComments.d.ts

@@ -0,0 +1,6 @@
+import { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import { FC } from 'react';
+declare const AnalyticHitComments: FC<{
+    analytic: Analytic;
+}>;
+export default AnalyticHitComments;

package/components/routes/analytics/AnalyticHitComments.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { LinearProgress, Chip, Stack, Divider } 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 Comment from "../../elements/Comment.js";
+import { useMyLocalStorageItem } from "../../hooks/useMyLocalStorage.js";
+import useMyUserList from "../../hooks/useMyUserList.js";
+import { useState, useEffect, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useSearchParams, 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 { StorageKey } from "../../../utils/constants.js";
+import { compareTimestamp } from "../../../utils/utils.js";
+const AnalyticHitComments = ({ analytic }) => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+  const [comments, setComments] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [userIds, setUserIds] = useState(/* @__PURE__ */ new Set());
+  const users = useMyUserList(userIds);
+  useEffect(() => {
+    setUserIds(new Set(comments.map((c) => c.comment.user)));
+  }, [comments]);
+  useEffect(() => {
+    if (!analytic) {
+      return;
+    }
+    setLoading(true);
+    api.search.hit.post({
+      query: `howler.analytic:${analytic.name} AND _exists_:howler.comment`,
+      rows: pageCount
+    }).then((response) => {
+      setComments(
+        response.items.flatMap(
+          (h) => h.howler.comment.map((comment) => ({
+            hitId: h.howler.id,
+            detection: h.howler.detection,
+            comment
+          }))
+        )
+      );
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [analytic, pageCount]);
+  const commentEls = useMemo(
+    () => loading ? /* @__PURE__ */ jsx(LinearProgress, {}) : comments.filter((c) => !searchParams.get("filter") || c.detection === searchParams.get("filter")).sort((a, b) => compareTimestamp(b.comment.timestamp, a.comment.timestamp)).map((c) => /* @__PURE__ */ jsx(
+      Comment,
+      {
+        comment: c.comment,
+        users,
+        onClick: () => navigate(`/hits/${c.hitId}`),
+        extra: !searchParams.get("filter") && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            size: "small",
+            sx: (theme) => ({ marginLeft: "0 !important", mr: `${theme.spacing(2)} !important` }),
+            label: c.detection ?? "Analytic"
+          }
+        )
+      },
+      c.comment.id
+    )),
+    [loading, comments, searchParams, users, navigate]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { direction: "column", py: 2, spacing: 1, children: [
+    /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", flexItem: true }),
+    commentEls
+  ] });
+};
+export {
+  AnalyticHitComments as default
+};

package/components/routes/analytics/AnalyticNotebooks.d.ts

@@ -0,0 +1,7 @@
+import { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import { FC } from 'react';
+declare const AnalyticNotebooks: FC<{
+    analytic: Analytic;
+    setAnalytic: (a: Analytic) => void;
+}>;
+export default AnalyticNotebooks;