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

package/components/elements/hit/HitBanner.js

@@ -0,0 +1,330 @@
+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 { useTheme, Box, Typography, Stack, Tooltip, Grid, Divider, Chip, iconButtonClasses, avatarClasses } 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 useMatchers from "../../app/hooks/useMatchers.js";
+import { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+import { uniq } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js";
+import howlerPluginStore from "../../../plugins/store.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 { useTranslation, Trans } 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 { usePluginStore } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-pluggable@0.4.3_react@18.3.1/node_modules/react-pluggable/dist/react-pluggable.esm.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 { PROVIDER_COLORS, ESCALATION_COLORS } from "../../../utils/constants.js";
+import { stringToColor } from "../../../utils/utils.js";
+import PluginTypography from "../PluginTypography.js";
+import Assigned from "./elements/Assigned.js";
+import EscalationChip from "./elements/EscalationChip.js";
+import HitTimestamp from "./elements/HitTimestamp.js";
+import HitBannerTooltip from "./HitBannerTooltip.js";
+import { HitLayout } from "./HitLayout.js";
+const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const { t } = useTranslation();
+  const { config } = useContext(ApiConfigContext);
+  const theme = useTheme();
+  const pluginStore = usePluginStore();
+  const { getMatchingAnalytic } = useMatchers();
+  const [analyticId, setAnalyticId] = useState();
+  const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
+  const textVariant = useMemo(() => layout === HitLayout.COMFY ? "body1" : "caption", [layout]);
+  useEffect(() => {
+    if (!(hit == null ? void 0 : hit.howler.analytic)) {
+      return;
+    }
+    getMatchingAnalytic(hit).then((analytic) => setAnalyticId(analytic == null ? void 0 : analytic.analytic_id));
+  }, [hit == null ? void 0 : hit.howler.analytic]);
+  const providerColor = useMemo(
+    () => {
+      var _a2;
+      return PROVIDER_COLORS[((_a2 = hit.event) == null ? void 0 : _a2.provider) ?? "unknown"] ?? stringToColor(hit.event.provider);
+    },
+    [(_a = hit.event) == null ? void 0 : _a.provider]
+  );
+  const mitreId = useMemo(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    if ((_b2 = (_a2 = hit.threat) == null ? void 0 : _a2.framework) == null ? void 0 : _b2.toLowerCase().startsWith("mitre")) {
+      return;
+    }
+    let _id = (_d2 = (_c2 = hit.threat) == null ? void 0 : _c2.tactic) == null ? void 0 : _d2.id;
+    if (_id && config.lookups.icons.includes(_id)) {
+      return _id;
+    }
+    _id = (_f2 = (_e2 = hit.threat) == null ? void 0 : _e2.technique) == null ? void 0 : _f2.id;
+    if (_id && config.lookups.icons.includes(_id)) {
+      return _id;
+    }
+  }, [config.lookups.icons, (_b = hit.threat) == null ? void 0 : _b.framework, (_d = (_c = hit.threat) == null ? void 0 : _c.tactic) == null ? void 0 : _d.id, (_f = (_e = hit.threat) == null ? void 0 : _e.technique) == null ? void 0 : _f.id]);
+  const iconUrl = useMemo(() => {
+    if (!mitreId) {
+      return;
+    }
+    return `/api/static/mitre/${mitreId}.svg`;
+  }, [mitreId]);
+  const leftBox = useMemo(() => {
+    var _a2;
+    if (hit.howler.is_bundle) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            alignSelf: "stretch",
+            backgroundColor: providerColor,
+            borderRadius: theme.shape.borderRadius,
+            minWidth: "15px"
+          }
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsx(HitBannerTooltip, { hit, children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            gridColumn: { xs: "span 3", sm: "span 1" },
+            minWidth: "90px",
+            backgroundColor: providerColor,
+            color: theme.palette.getContrastText(providerColor),
+            alignSelf: "start",
+            borderRadius: theme.shape.borderRadius,
+            p: compressed ? 0.5 : 1,
+            pt: 2,
+            pl: 1
+          },
+          display: "flex",
+          flexDirection: "column",
+          children: [
+            /* @__PURE__ */ jsx(Typography, { variant: compressed ? "caption" : "body1", style: { wordBreak: "break-all" }, children: ((_a2 = hit.organization) == null ? void 0 : _a2.name) ?? /* @__PURE__ */ jsx(Trans, { i18nKey: "unknown" }) }),
+            iconUrl && /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  width: "40px",
+                  height: "40px",
+                  mask: `url("${iconUrl}")`,
+                  maskSize: "cover",
+                  background: theme.palette.getContrastText(providerColor)
+                }
+              }
+            )
+          ]
+        }
+      ) });
+    }
+  }, [compressed, hit, iconUrl, providerColor, theme.palette, theme.shape.borderRadius]);
+  const Wrapper = useCallback(
+    ({ i18nKey, value, field, ...typographyProps }) => {
+      const _children = /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, flex: 1, children: [
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: textVariant,
+            noWrap: compressed,
+            textOverflow: compressed ? "ellipsis" : "wrap",
+            ...typographyProps,
+            sx: [
+              { display: "flex", flexDirection: "row" },
+              ...Array.isArray(typographyProps == null ? void 0 : typographyProps.sx) ? typographyProps == null ? void 0 : typographyProps.sx : [typographyProps == null ? void 0 : typographyProps.sx]
+            ],
+            children: [
+              t(i18nKey),
+              ":"
+            ]
+          }
+        ),
+        (Array.isArray(value) ? value : [value]).map((val) => /* @__PURE__ */ jsx(
+          PluginTypography,
+          {
+            component: "span",
+            context: "banner",
+            variant: textVariant,
+            noWrap: compressed,
+            textOverflow: compressed ? "ellipsis" : "wrap",
+            ...typographyProps,
+            value: val,
+            field
+          },
+          val
+        ))
+      ] });
+      return compressed ? /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: Array.isArray(value) ? /* @__PURE__ */ jsx("div", { children: value.map((_indicator) => /* @__PURE__ */ jsx("p", { style: { margin: 0, padding: 0 }, children: _indicator }, _indicator)) }) : value,
+          children: _children
+        }
+      ) : _children;
+    },
+    [compressed, t, textVariant]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "grid",
+      gridTemplateColumns: "minmax(0, auto) minmax(0, 1fr) minmax(0, auto)",
+      alignItems: "stretch",
+      sx: { width: "100%", ml: 0, overflow: "hidden" },
+      children: [
+        leftBox,
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            sx: {
+              height: "100%",
+              padding: theme.spacing(1),
+              gridColumn: { xs: "span 3", sm: "span 1", md: "span 1" }
+            },
+            spacing: layout !== HitLayout.COMFY ? 1 : 2,
+            divider: /* @__PURE__ */ jsx(
+              Divider,
+              {
+                orientation: "horizontal",
+                sx: [
+                  layout !== HitLayout.COMFY && { marginTop: "4px !important" },
+                  { mr: `${theme.spacing(-1)} !important` }
+                ]
+              }
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  variant: compressed ? "body1" : "h6",
+                  fontWeight: compressed && "bold",
+                  sx: { alignSelf: "start", "& a": { color: "text.primary" } },
+                  children: [
+                    analyticId ? /* @__PURE__ */ jsx(
+                      Link,
+                      {
+                        to: `/analytics/${analyticId}`,
+                        onAuxClick: (e) => {
+                          e.stopPropagation();
+                        },
+                        onClick: (e) => {
+                          e.stopPropagation();
+                        },
+                        children: hit.howler.analytic
+                      }
+                    ) : hit.howler.analytic,
+                    hit.howler.detection && ": ",
+                    hit.howler.detection
+                  ]
+                }
+              ),
+              ((_g = hit.howler) == null ? void 0 : _g.rationale) && /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  flex: 1,
+                  variant: textVariant,
+                  color: ESCALATION_COLORS[hit.howler.escalation] + ".main",
+                  sx: { fontWeight: "bold" },
+                  children: [
+                    t("hit.header.rationale"),
+                    ": ",
+                    hit.howler.rationale
+                  ]
+                }
+              ),
+              ((_h = hit.howler) == null ? void 0 : _h.outline) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [
+                  hit.howler.outline.threat && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+                    Wrapper,
+                    {
+                      i18nKey: "hit.header.threat",
+                      value: hit.howler.outline.threat,
+                      field: "howler.outline.threat"
+                    }
+                  ) }),
+                  hit.howler.outline.target && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+                    Wrapper,
+                    {
+                      i18nKey: "hit.header.target",
+                      value: hit.howler.outline.target,
+                      field: "howler.outline.target"
+                    }
+                  ) })
+                ] }),
+                ((_i = hit.howler.outline.indicators) == null ? void 0 : _i.length) > 0 && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+                  /* @__PURE__ */ jsxs(Typography, { component: "span", variant: textVariant, children: [
+                    t("hit.header.indicators"),
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Grid,
+                    {
+                      container: true,
+                      spacing: 0.5,
+                      sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` },
+                      children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
+                        return /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+                          /* @__PURE__ */ jsx(PluginTypography, { context: "indicators", variant: textVariant, value: _indicator, children: _indicator }),
+                          index < hit.howler.outline.indicators.length - 1 && /* @__PURE__ */ jsx(Typography, { variant: textVariant, children: "," })
+                        ] }) }, _indicator);
+                      })
+                    }
+                  )
+                ] }),
+                hit.howler.outline.summary && /* @__PURE__ */ jsx(
+                  Wrapper,
+                  {
+                    i18nKey: "hit.header.summary",
+                    value: hit.howler.outline.summary,
+                    paragraph: true,
+                    textOverflow: "wrap",
+                    sx: [compressed && { marginTop: `0 !important` }],
+                    field: "howler.outline.summary"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "column",
+            spacing: layout !== HitLayout.COMFY ? 0.5 : 1,
+            alignSelf: "stretch",
+            sx: [
+              { minWidth: 0, alignItems: { sm: "end", md: "start" }, flex: 1, pl: 1 },
+              compressed && {
+                [`& .${avatarClasses.root}`]: {
+                  height: theme.spacing(3),
+                  width: theme.spacing(3)
+                },
+                [`& .${iconButtonClasses.root}`]: {
+                  height: theme.spacing(3),
+                  width: theme.spacing(3)
+                }
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(HitTimestamp, { hit, layout }),
+              showAssigned && /* @__PURE__ */ jsx(Assigned, { hit, layout }),
+              /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [
+                /* @__PURE__ */ jsx(EscalationChip, { hit, layout }),
+                ["in-progress", "on-hold"].includes(hit.howler.status) && /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    sx: { width: "fit-content", display: "inline-flex" },
+                    label: hit.howler.status,
+                    size: layout !== HitLayout.COMFY ? "small" : "medium",
+                    color: "primary"
+                  }
+                ),
+                hit.howler.is_bundle && /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    size: layout !== HitLayout.COMFY ? "small" : "medium",
+                    label: t("hit.header.bundlesize", { hits: hit.howler.hits.length })
+                  }
+                )
+              ] }),
+              howlerPluginStore.plugins.flatMap((plugin) => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  HitBanner as default
+};

package/components/elements/hit/HitBannerTooltip.d.ts

@@ -0,0 +1,6 @@
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { PropsWithChildren } from 'react';
+declare const _default: import('react').NamedExoticComponent<PropsWithChildren<{
+    hit: Hit;
+}>>;
+export default _default;

package/components/elements/hit/HitBannerTooltip.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Tooltip } 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 { memo } 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";
+const HitBannerTooltip = ({ hit, children }) => {
+  var _a, _b, _c, _d, _e;
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      placement: "top",
+      title: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { children: ((_a = hit.event) == null ? void 0 : _a.provider) ?? t("unknown") }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          ((_b = hit.organization) == null ? void 0 : _b.name) ?? t("unknown"),
+          " - ",
+          ((_c = hit.organization) == null ? void 0 : _c.id) ?? t("unknown")
+        ] }),
+        ((_d = hit.threat) == null ? void 0 : _d.tactic) && /* @__PURE__ */ jsxs("div", { children: [
+          hit.threat.tactic.id,
+          " (",
+          hit.threat.tactic.name,
+          ")"
+        ] }),
+        ((_e = hit.threat) == null ? void 0 : _e.technique) && /* @__PURE__ */ jsxs("div", { children: [
+          hit.threat.technique.id,
+          " (",
+          hit.threat.technique.name,
+          ")"
+        ] })
+      ] }),
+      children
+    }
+  );
+};
+const HitBannerTooltip$1 = memo(HitBannerTooltip);
+export {
+  HitBannerTooltip$1 as default
+};

package/components/elements/hit/HitCard.d.ts

@@ -0,0 +1,7 @@
+import { HitLayout } from './HitLayout';
+declare const _default: import('react').NamedExoticComponent<{
+    id?: string;
+    layout: HitLayout;
+    readOnly?: boolean;
+}>;
+export default _default;

package/components/elements/hit/HitCard.js

@@ -0,0 +1,33 @@
+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 { Skeleton, CardContent } 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 { HitContext } from "../../app/providers/HitProvider.js";
+import { memo, useEffect } 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 HowlerCard from "../display/HowlerCard.js";
+import HitBanner from "./HitBanner.js";
+import HitLabels from "./HitLabels.js";
+import { HitLayout } from "./HitLayout.js";
+import HitOutline from "./HitOutline.js";
+const HitCard = ({ id, layout, readOnly = true }) => {
+  const getHit = useContextSelector(HitContext, (ctx) => ctx.getHit);
+  const hit = useContextSelector(HitContext, (ctx) => ctx.hits[id]);
+  useEffect(() => {
+    if (!hit) {
+      getHit(id);
+    }
+  }, [id]);
+  if (!hit) {
+    return /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: "200px" });
+  }
+  return /* @__PURE__ */ jsx(HowlerCard, { tabIndex: 0, sx: { position: "relative" }, children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsx(HitBanner, { hit, layout }),
+    layout !== HitLayout.DENSE && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(HitOutline, { hit, layout }),
+      /* @__PURE__ */ jsx(HitLabels, { hit, readOnly })
+    ] })
+  ] }) });
+};
+const HitCard$1 = memo(HitCard);
+export {
+  HitCard$1 as default
+};

package/components/elements/hit/HitComments.d.ts

@@ -0,0 +1,11 @@
+import { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { FC } from 'react';
+interface HitCommentsProps {
+    hit: Hit;
+    users: {
+        [id: string]: HowlerUser;
+    };
+}
+declare const HitComments: FC<HitCommentsProps>;
+export default HitComments;