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

package/components/elements/hit/outlines/al/AssemblyLineRules.tsx

@@ -0,0 +1,130 @@
+import { Lock } from '@mui/icons-material';
+import { Chip, Grid, Stack, Tooltip, Typography } from '@mui/material';
+import { get } from 'lodash-es';
+import type { Antivirus } from '@cccsaurora/howler-ui/models/entities/generated/Antivirus';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { FC } from 'react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const TAGS = [
+  'assemblyline.antivirus',
+  'assemblyline.behaviour',
+  'assemblyline.heuristic',
+  'assemblyline.yara',
+  'assemblyline.attribution',
+  'assemblyline.mitre.tactic',
+  'assemblyline.mitre.technique'
+];
+
+const VERDICT_COLORS: {
+  [verdict: string]: 'error' | 'warning' | 'info' | 'primary' | 'default' | 'secondary' | 'success';
+} = {
+  malicious: 'error',
+  suspicious: 'warning',
+  info: 'info',
+  safe: 'primary'
+};
+
+const VERDICT_ORDER = ['malicious', 'suspicious', 'safe', 'info'];
+
+const ARRAY_LIMIT = 10;
+
+const sortByVerdict = (a: Antivirus, b: Antivirus): -1 | 0 | 1 => {
+  return VERDICT_ORDER.indexOf(a.verdict) > VERDICT_ORDER.indexOf(b.verdict)
+    ? 1
+    : VERDICT_ORDER.indexOf(b.verdict) > VERDICT_ORDER.indexOf(a.verdict)
+      ? -1
+      : 0;
+};
+
+const AssemblyLineRules: FC<{ hit: Hit }> = ({ hit }) => {
+  const { t } = useTranslation();
+
+  const ipArr: string[] = (hit.related.ip ?? []).filter(e => !!e).slice(0, ARRAY_LIMIT);
+
+  const tagsArr = TAGS.map(each => get(hit, each) as Antivirus)
+    .filter(tag => !!tag?.value)
+    .sort(sortByVerdict)
+    .slice(0, ARRAY_LIMIT);
+
+  return (
+    <Grid container direction="row" justifyContent="center" sx={{ position: 'relative' }}>
+      <Tooltip title={t('route.templates.builtin')}>
+        <Lock fontSize="small" sx={{ position: 'absolute', right: 0, top: 0 }} />
+      </Tooltip>
+      <Grid item xs={2}>
+        <Typography variant="caption" fontWeight="bold">
+          {t('outline.assemblyline.file_path')}:
+        </Typography>
+      </Grid>
+      <Grid item xs={10}>
+        <Typography variant="caption">{hit.file.path ?? t('unknown')}</Typography>
+      </Grid>
+      <Grid item xs={2}>
+        <Typography variant="caption" fontWeight="bold">
+          {t('outline.assemblyline.last_modified')}:
+        </Typography>
+      </Grid>
+      <Grid item xs={10}>
+        <Typography variant="caption">
+          {hit.cbs?.sharepoint?.modified?.user ?? t('unknown')} {t('using')}{' '}
+          {hit.cbs?.sharepoint?.modified?.application ?? t('unknown')} {t('on')} {hit.file?.mtime ?? t('unknown')}
+        </Typography>
+      </Grid>
+      <Grid item xs={2}>
+        <Typography variant="caption" fontWeight="bold">
+          {t('outline.assemblyline.beacons')}:
+        </Typography>
+      </Grid>
+      <Grid item xs={10}>
+        <Stack direction="row" spacing={0.5} sx={{ mb: 0.5 }}>
+          {ipArr.map(analytic => {
+            return (
+              <Grid item key={analytic}>
+                <Chip label={analytic} variant="outlined" size="small" />
+              </Grid>
+            );
+          })}
+          {ipArr.length < 1 && (
+            <Grid item>
+              <Chip label={t('none')} variant="outlined" size="small" />
+            </Grid>
+          )}
+        </Stack>
+      </Grid>
+      <Grid item xs={2}>
+        <Typography variant="caption" fontWeight="bold">
+          {t('outline.assemblyline.tags')}:
+        </Typography>
+      </Grid>
+      <Grid item xs={10}>
+        <Stack direction="row" spacing={0.5} sx={{ mb: 0.5 }}>
+          {tagsArr.map(analytic => {
+            return (
+              <Grid item key={analytic?.value + analytic?.verdict + analytic?.type + analytic?.subtype}>
+                <Chip
+                  label={analytic?.value}
+                  color={
+                    analytic?.verdict in VERDICT_COLORS
+                      ? VERDICT_COLORS[analytic?.verdict as 'malicious' | 'suspicious' | 'safe' | 'info']
+                      : 'error'
+                  }
+                  variant="outlined"
+                  size="small"
+                />
+              </Grid>
+            );
+          })}
+          {tagsArr.length < 1 && (
+            <Grid item>
+              <Chip label={t('none')} variant="outlined" size="small" />
+            </Grid>
+          )}
+        </Stack>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default memo(AssemblyLineRules);

package/components/elements/hit/related/PivotLink.tsx

@@ -0,0 +1,67 @@
+import { Skeleton } from '@mui/material';
+import Handlebars from 'handlebars';
+import { isEmpty } from 'lodash-es';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivot';
+import { useMemo, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
+import RelatedLink from './RelatedLink';
+
+export interface PivotLinkProps {
+  pivot: Pivot;
+  hit: Hit;
+  compact?: boolean;
+}
+
+const PivotLink: FC<PivotLinkProps> = ({ pivot, hit, compact = false }) => {
+  const { i18n } = useTranslation();
+
+  const pluginStore = usePluginStore();
+
+  const flatHit = useMemo(() => flattenDeep(hit ?? {}), [hit]);
+
+  const href = useMemo(() => {
+    if (!pivot || pivot.format !== 'link' || !flatHit || isEmpty(flatHit)) {
+      return '';
+    }
+
+    const templateObject = Object.fromEntries(
+      pivot.mappings.map(mapping => {
+        const result = [mapping.key];
+
+        if (mapping.field === 'custom') {
+          result.push(mapping.custom_value);
+        } else if (Array.isArray(flatHit[mapping.field])) {
+          result.push(flatHit[mapping.field][0]);
+        } else {
+          result.push(flatHit[mapping.field]);
+        }
+
+        return result;
+      })
+    );
+
+    return Handlebars.compile(pivot.value)(templateObject);
+  }, [flatHit, pivot]);
+
+  if (href) {
+    return <RelatedLink title={pivot.label[i18n.language]} href={href} compact={compact} icon={pivot.icon} />;
+  }
+
+  try {
+    const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
+    if (pluginPivot) {
+      return pluginPivot;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn(`Pivot plugin for format ${pivot.format} does not exist, not rendering`);
+    return null;
+  }
+
+  return <Skeleton variant="rounded" />;
+};
+
+export default PivotLink;

package/components/elements/hit/related/RelatedIcon.tsx

@@ -0,0 +1,51 @@
+import { Icon, iconExists } from '@iconify/react/dist/iconify.js';
+import Avatar from '@mui/material/Avatar';
+import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useContext, type FC } from 'react';
+
+const RelatedIcon: FC<{ icon?: string; title?: string; href?: string; compact?: boolean }> = ({
+  icon,
+  title,
+  href,
+  compact = false
+}) => {
+  const { config } = useContext(ApiConfigContext);
+  const { isDark } = useAppTheme();
+
+  if (!icon) {
+    return null;
+  }
+
+  if (iconExists(icon)) {
+    return <Icon fontSize="1.5rem" icon={icon} />;
+  }
+
+  const app = config.configuration.ui.apps.find(a => a.name.toLowerCase() === icon?.toLowerCase());
+  if (app) {
+    // use the image link for the configured related application instead
+    icon = app[`img_${isDark ? 'd' : 'l'}`];
+  }
+
+  return (
+    <Avatar
+      variant="rounded"
+      alt={title ?? href}
+      src={icon}
+      sx={[
+        theme => ({
+          width: theme.spacing(compact ? 4 : 6),
+          height: theme.spacing(compact ? 4 : 6),
+          '& img': {
+            objectFit: 'contain'
+          }
+        }),
+        !icon && { backgroundColor: 'transparent' }
+      ]}
+    >
+      {icon}
+    </Avatar>
+  );
+};
+
+export default RelatedIcon;

package/components/elements/hit/related/RelatedLink.tsx

@@ -0,0 +1,43 @@
+import { Stack, Typography } from '@mui/material';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import React, { type PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
+import RelatedIcon from './RelatedIcon';
+
+const RelatedLink: React.FC<PropsWithChildren<{ icon?: string; title?: string; href?: string; compact?: boolean }>> = ({
+  icon,
+  title,
+  href,
+  compact = false,
+  children
+}) => {
+  return (
+    <HowlerCard
+      variant={compact ? 'outlined' : 'elevation'}
+      key={href}
+      onClick={() => window.open(href)}
+      sx={[
+        theme => ({
+          cursor: 'pointer',
+          backgroundColor: 'transparent',
+          transition: theme.transitions.create(['border-color']),
+          '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
+          '& > div': {
+            height: '100%'
+          },
+          '& a': { textDecoration: 'none', color: 'text.primary' }
+        }),
+        !compact && { border: 'thin solid', borderColor: 'transparent' }
+      ]}
+    >
+      <Stack direction="row" p={compact ? 0.5 : 1} spacing={1} alignItems="center">
+        {children || <RelatedIcon icon={icon} title={title} href={href} compact={compact} />}
+        <Typography component={Link} to={href} onClick={e => e.stopPropagation()}>
+          {title ?? href}
+        </Typography>
+      </Stack>
+    </HowlerCard>
+  );
+};
+
+export default RelatedLink;

package/components/elements/view/ViewTitle.tsx

@@ -0,0 +1,61 @@
+import { ArrowDownward, ArrowUpward, Language, Lock, Person } from '@mui/icons-material';
+import { Chip, Stack, Tooltip, Typography } from '@mui/material';
+import { useMemo, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
+
+interface ViewTitleProps {
+  title?: string;
+  type?: string;
+  query?: string;
+  sort?: string;
+  span?: string;
+}
+
+export const ViewTitle: FC<ViewTitleProps> = ({ title, type, query, sort, span }) => {
+  const { t } = useTranslation();
+  const spanLabel = useMemo(() => {
+    if (!span) {
+      return '';
+    }
+
+    if (span.includes(':')) {
+      return t(convertLuceneToDate(span));
+    } else {
+      return t(span);
+    }
+  }, [span, t]);
+
+  return (
+    <Stack>
+      <Stack direction="row" alignItems="start" spacing={1}>
+        <Tooltip title={t(`route.views.manager.${type}`)}>
+          {
+            {
+              readonly: <Lock fontSize="small" />,
+              global: <Language fontSize="small" />,
+              personal: <Person fontSize="small" />
+            }[type]
+          }
+        </Tooltip>
+        <Typography variant="body1">{t(title)}</Typography>
+      </Stack>
+      <Typography variant="caption">
+        <code>{query}</code>
+      </Typography>
+      {(sort || span) && (
+        <Stack direction="row" sx={{ mt: 1 }} spacing={1}>
+          {sort?.split(',').map(_sort => (
+            <Chip
+              key={_sort.split(' ')[0]}
+              size="small"
+              label={_sort.split(' ')[0]}
+              icon={_sort.endsWith('desc') ? <ArrowDownward /> : <ArrowUpward />}
+            />
+          ))}
+          {spanLabel && <Chip size="small" label={spanLabel} />}
+        </Stack>
+      )}
+    </Stack>
+  );
+};

package/components/hooks/useHitActions.tsx

@@ -0,0 +1,276 @@
+import api from '@cccsaurora/howler-ui/api';
+import type { HitTransitionBody } from '@cccsaurora/howler-ui/api/hit';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import AssignUserDrawer from '@cccsaurora/howler-ui/components/app/drawers/AssignUserDrawer';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { AppDrawerContext } from '@cccsaurora/howler-ui/components/app/providers/AppDrawerProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import RationaleModal from '@cccsaurora/howler-ui/components/elements/display/modals/RationaleModal';
+import type { ActionButton } from '@cccsaurora/howler-ui/components/elements/hit/actions/SharedComponents';
+import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { useCallback, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import useMyApi from './useMyApi';
+import useMySnackbar from './useMySnackbar';
+
+export const MANAGE_OPTIONS: Partial<ActionButton>[] = [
+  { type: 'action', name: 'release', key: 'R', i18nKey: `hit.details.actions.action.release` },
+  { type: 'action', name: 'assign_to_other', key: 'T', i18nKey: `hit.details.actions.action.assign_to_other` },
+  { type: 'action', name: 'start', key: 'Y', i18nKey: `hit.details.actions.action.start` },
+  { type: 'action', name: 'pause', key: 'U', i18nKey: `hit.details.actions.action.pause` },
+  { type: 'action', name: 'resume', key: 'I', i18nKey: `hit.details.actions.action.resume` },
+  { type: 'action', name: 'assign_to_me', key: 'O', i18nKey: `hit.details.actions.action.assign_to_me` },
+  { type: 'action', name: 're_evaluate', key: 'P', i18nKey: `hit.details.actions.action.re_evaluate` },
+  { type: 'action', name: 'demote', key: '-', i18nKey: `hit.details.actions.action.demote` },
+  { type: 'action', name: 'promote', key: '+', i18nKey: `hit.details.actions.action.promote` }
+];
+
+type TransitionStates = 'in-progress' | 'on-hold' | 'open' | 'resolved';
+
+const useHitActions = (_hits: Hit | Hit[]) => {
+  const { t } = useTranslation();
+  const config = useContext(ApiConfigContext);
+  const { user } = useAppUser<HowlerUser>();
+  const drawer = useContext(AppDrawerContext);
+  const { showModal } = useContext(ModalContext);
+  const { showWarningMessage } = useMySnackbar();
+  const { dispatchApi } = useMyApi();
+
+  const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
+
+  const [loading, setLoading] = useState(false);
+
+  const hits = useMemo(() => (Array.isArray(_hits) ? _hits : [_hits]).filter(_hit => !!_hit), [_hits]);
+
+  const canVote = useMemo(
+    () => hits.every(hit => hit?.howler.assignment !== user.username || hit?.howler.status === 'in-progress'),
+    [hits, user.username]
+  );
+  const canAssess = useMemo(
+    () =>
+      hits.every(
+        hit => !(['on-hold', 'resolved'].includes(hit?.howler.status) && hit?.howler.assignment === user.username)
+      ),
+    [hits, user.username]
+  );
+
+  const selectedVote = useMemo(() => {
+    if (hits.length !== 1) {
+      return '';
+    }
+
+    const hit = hits[0];
+
+    return hit?.howler.votes.benign.includes(user.email)
+      ? 'benign'
+      : hit?.howler.votes.malicious.includes(user.email)
+        ? 'malicious'
+        : hit?.howler.votes.obscure.includes(user.email)
+          ? 'obscure'
+          : '';
+  }, [hits, user.email]);
+
+  const onAssign = useCallback(
+    () =>
+      new Promise<string>((res, rej) => {
+        let done = false;
+
+        drawer.open({
+          titleKey: 'hit.details.actions.assign',
+          children: (
+            <AssignUserDrawer
+              skipSubmit
+              ids={hits.map(hit => hit.howler.id)}
+              assignment={
+                (hits.every(hit => hit.howler.assignment === hits[0].howler.assignment) &&
+                  hits[0]?.howler.assessment) ||
+                'unassigned'
+              }
+              onAssigned={h => {
+                done = true;
+                drawer.close();
+                res(h);
+              }}
+            />
+          ),
+          onClosed: () => {
+            if (!done) {
+              rej('unassigned');
+            }
+          }
+        });
+      }),
+    [drawer, hits]
+  );
+
+  const vote = useCallback(
+    async (v: string) => {
+      if (v !== selectedVote) {
+        setLoading(true);
+
+        try {
+          await Promise.all(
+            hits.map(async hit => {
+              const _vote = () =>
+                api.hit.transition.post(hit?.howler.id, { transition: 'vote', data: { vote: v, email: user.email } });
+
+              const updatedHit: Hit = await dispatchApi(_vote(), {
+                onConflict: async () => {
+                  await api.hit.get(hit?.howler.id);
+
+                  const newResult = await _vote();
+
+                  updateHit(newResult);
+                }
+              });
+
+              if (updatedHit) {
+                updateHit(updatedHit);
+              }
+            })
+          );
+        } finally {
+          setLoading(false);
+        }
+      }
+    },
+    [dispatchApi, hits, selectedVote, updateHit, user.email]
+  );
+
+  const assess = useCallback(
+    async (assessment: string, skipRationale = false) => {
+      const rationale = skipRationale
+        ? t('rationale.default', { assessment })
+        : await new Promise<string>(res => {
+            showModal(
+              <RationaleModal
+                onSubmit={_rationale => {
+                  res(_rationale);
+                }}
+              />
+            );
+          });
+
+      await Promise.all(
+        hits.map(async hit => {
+          if (assessment !== hit?.howler.assessment) {
+            setLoading(true);
+
+            try {
+              const update = () =>
+                api.hit.transition.post(hit?.howler.id, { transition: 'assess', data: { assessment, rationale } });
+
+              const updatedHit = await dispatchApi(update(), {
+                onConflict: async () => {
+                  const updatedData = await api.hit.get(hit?.howler.id);
+
+                  if (!updatedData.howler.assessment) {
+                    const result = await update();
+
+                    updateHit(result);
+                  } else {
+                    updateHit(updatedData);
+                    showWarningMessage(t('hit.actions.conflict.assess'));
+                  }
+                }
+              });
+
+              if (updatedHit) {
+                updateHit(updatedHit);
+              }
+            } finally {
+              setLoading(false);
+            }
+          }
+        })
+      );
+    },
+    [dispatchApi, hits, showModal, showWarningMessage, t, updateHit]
+  );
+
+  const manage = useCallback(
+    async (transition: string) => {
+      setLoading(true);
+      try {
+        const data: HitTransitionBody['data'] = {};
+
+        if (transition === 'assign_to_other') {
+          data.assignee = await onAssign();
+        }
+
+        await Promise.all(
+          hits.map(async hit => {
+            const update = () => api.hit.transition.post(hit?.howler.id, { transition, data });
+            const updatedHit = await dispatchApi(update(), {
+              onConflict: async () => {
+                const updatedData = await api.hit.get(hit?.howler.id);
+                updateHit(updatedData);
+                showWarningMessage(t('hit.actions.conflict.manage'));
+              }
+            });
+
+            if (updatedHit && updateHit) {
+              updateHit(updatedHit);
+            }
+          })
+        );
+      } catch (e) {
+        if (e !== 'unassigned') {
+          throw e;
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [dispatchApi, hits, onAssign, showWarningMessage, t, updateHit]
+  );
+
+  const availableTransitions = useMemo(
+    () =>
+      MANAGE_OPTIONS.filter(option => {
+        const name = option.name.toLowerCase();
+
+        // Is this option one that is valid for the current state?
+        return hits.every(
+          hit =>
+            config.config.lookups?.transitions[hit?.howler.status as TransitionStates]?.includes(name) &&
+            // If we are assigning or voting, the hit can't be assigned to the current user
+            ((name !== 'assign_to_me' && name !== 'vote') || hit?.howler.assignment !== user.username) &&
+            // If we are running any of these actions, the current user must be assigned the hit
+            ((name !== 'release' && name !== 'start' && name !== 'resume' && name !== 'pause') ||
+              hit?.howler.assignment === user.username) &&
+            // If we're promoting, it has to be a hit
+            (name !== 'promote' || hit?.howler.escalation === 'hit') &&
+            // If we're demoting, it has to be an alert
+            (name !== 'demote' || hit?.howler.escalation === 'alert')
+        );
+      }).map<ActionButton>(
+        option =>
+          ({
+            ...option,
+            actionFunction: () => {
+              if (!loading) {
+                manage(option.name.toLowerCase());
+              }
+            }
+          }) as ActionButton
+      ),
+    [config.config.lookups?.transitions, hits, loading, manage, user.username]
+  );
+
+  return {
+    availableTransitions,
+    canVote,
+    canAssess,
+    loading,
+    manage,
+    assess,
+    vote,
+    selectedVote
+  };
+};
+
+export default useHitActions;