@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/components/elements/hit/HitQuickSearch.tsx

@@ -1,111 +0,0 @@
-import { Box, Chip, Divider, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
-import type { AppSearchItemRendererOption } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { FC } from 'react';
-import { memo, useMemo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { ESCALATION_COLORS, PROVIDER_COLORS, STATUS_COLORS } from '@cccsaurora/howler-ui/utils/constants';
-import { formatDate, stringToColor } from '@cccsaurora/howler-ui/utils/utils';
-
-type QuickSearchProps = {
-  hit: Hit;
-  options: AppSearchItemRendererOption<Hit>;
-};
-
-const HitQuickSearch: FC<QuickSearchProps> = ({ hit, options }) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
-
-  const providerColor = useMemo(
-    () => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider),
-    [hit.event?.provider]
-  );
-
-  return (
-    <Box
-      sx={{ overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }}
-      display="grid"
-      gridTemplateColumns="minmax(0, 1fr) minmax(0, auto)"
-    >
-      <Stack flexGrow={1} gridColumn={options.state.mode === 'inline' ? 'span 2' : ''}>
-        <Typography variant="body1" fontWeight="bold">
-          {hit.howler.analytic}
-          {hit.howler.detection && ': '}
-          {hit.howler.detection}
-        </Typography>
-        {options.state.mode !== 'inline' && hit.howler?.outline && (
-          <Tooltip
-            placement={isUnderLg ? 'bottom' : 'left'}
-            componentsProps={{
-              tooltip: {
-                sx: {
-                  fontSize: 12,
-                  backgroundColor: theme.palette.background.paper,
-                  color: theme.palette.getContrastText(theme.palette.background.paper)
-                }
-              }
-            }}
-            title={
-              <Stack divider={<Divider sx={{ my: 0.5 }} />}>
-                <div>
-                  <Trans i18nKey="hit.header.threat" />: {hit.howler.outline.threat}
-                </div>
-                <div>
-                  <Trans i18nKey="hit.header.target" />: {hit.howler.outline.target}
-                </div>
-                <div>{hit.howler.outline.indicators.join(', ')}</div>
-              </Stack>
-            }
-          >
-            <Stack direction={{ xs: 'column', sm: 'column' }} flex={1}>
-              <Typography variant="caption" textOverflow="ellipsis" sx={{ wordBreak: 'break-all', overflow: 'hidden' }}>
-                <Trans i18nKey="hit.header.threat" />: {hit.howler.outline.threat}
-              </Typography>
-              <Typography variant="caption" textOverflow="ellipsis" sx={{ wordBreak: 'break-all', overflow: 'hidden' }}>
-                <Trans i18nKey="hit.header.target" />: {hit.howler.outline.target}
-              </Typography>
-              <Typography variant="caption" textOverflow="ellipsis" sx={{ wordBreak: 'break-all', overflow: 'hidden' }}>
-                <Trans i18nKey="hit.header.indicators" />: {hit.howler.outline.indicators.map(i => i).join(', ')}
-              </Typography>
-            </Stack>
-          </Tooltip>
-        )}
-      </Stack>
-
-      <Stack alignItems={options.state.mode === 'fullscreen' ? 'end' : 'start'} spacing={0.5}>
-        {options.state.mode === 'fullscreen' && <Chip label={formatDate(hit.timestamp)} size="small" />}
-        <Stack direction="row" spacing={0.5}>
-          {options.state.mode === 'inline' && <Chip label={formatDate(hit.timestamp)} size="small" />}
-          <Chip
-            sx={{
-              backgroundColor: providerColor,
-              color: theme.palette.getContrastText(providerColor)
-            }}
-            label={hit.organization?.name ?? <Trans i18nKey="unknown" />}
-            size="small"
-          />
-          <Chip label={hit.howler.escalation} size="small" color={ESCALATION_COLORS[hit.howler.escalation]} />
-        </Stack>
-        <Stack direction="row" spacing={0.5}>
-          <Chip
-            sx={{
-              '& .MuiChip-icon': {
-                marginLeft: 0
-              }
-            }}
-            label={
-              hit?.howler.assignment !== 'unassigned'
-                ? hit?.howler.assignment
-                : t('app.drawer.hit.assignment.unassigned.name')
-            }
-            size="small"
-          />
-          <Chip label={hit.howler.status} size="small" color={STATUS_COLORS[hit.howler.status]} />
-        </Stack>
-      </Stack>
-    </Box>
-  );
-};
-
-export default memo(HitQuickSearch);

package/components/elements/hit/HitRelated.tsx

@@ -1,18 +0,0 @@
-import { Grid } from '@mui/material';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { FC } from 'react';
-import RelatedLink from './related/RelatedLink';
-
-const HitRelated: FC<{ hit: Hit }> = ({ hit }) => {
-  return (
-    <Grid container spacing={1} pr={2}>
-      {hit?.howler.links?.map(l => (
-        <Grid key={l.title + l.href} item xs={6} sm={4} md={3}>
-          <RelatedLink {...l} />
-        </Grid>
-      ))}
-    </Grid>
-  );
-};
-
-export default HitRelated;

package/components/elements/hit/HitShortcuts.ts

@@ -1,5 +0,0 @@
-export enum HitShortcuts {
-  SHORTCUTS_HINT = 'hint',
-  SHORTCUTS = 'shortcut',
-  NO_SHORTCUTS = 'no'
-}

package/components/elements/hit/HitSummary.tsx

@@ -1,301 +0,0 @@
-import { Analytics, InfoOutlined } from '@mui/icons-material';
-import {
-  Alert,
-  AlertTitle,
-  Autocomplete,
-  Box,
-  Button,
-  Chip,
-  CircularProgress,
-  Divider,
-  Fade,
-  Grid,
-  LinearProgress,
-  Stack,
-  TextField,
-  Tooltip,
-  Typography
-} from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import { isEmpty } from 'lodash-es';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
-import type { FC } from 'react';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { convertCustomDateRangeToLucene, convertDateToLucene, getTimeRange } from '@cccsaurora/howler-ui/utils/utils';
-import PluginChip from '../PluginChip';
-import HitGraph from './aggregate/HitGraph';
-
-const HitSummary: FC<{
-  query: string;
-  response?: HowlerSearchResponse<WithMetadata<Hit>>;
-  execute?: boolean;
-  onStart?: () => void;
-  onComplete?: () => void;
-}> = ({ query, response, onStart, onComplete }) => {
-  const { t } = useTranslation();
-  const { dispatchApi } = useMyApi();
-  const { hitFields } = useContext(FieldContext);
-  const { showErrorMessage } = useMySnackbar();
-  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-  const { getMatchingTemplate } = useMatchers();
-
-  const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
-  const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
-  const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
-  const error = useContextSelector(HitSearchContext, ctx => ctx.error);
-
-  const span = useContextSelector(ParameterContext, ctx => ctx.span);
-  const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
-  const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
-
-  const [loading, setLoading] = useState(false);
-  const [customKeys, setCustomKeys] = useState<string[]>([]);
-  const [keyCounts, setKeyCounts] = useState<{ [key: string]: { count: number; sources: string[] } }>({});
-  const [aggregateResults, setAggregateResults] = useState<{
-    [key: string]: { [value: string]: number };
-  }>({});
-
-  const performAggregation = useCallback(async () => {
-    if (onStart) {
-      onStart();
-    }
-
-    const filters: string[] = [];
-    if (span && !span.endsWith('custom')) {
-      filters.push(`event.created:${convertDateToLucene(span)}`);
-    } else if (startDate && endDate) {
-      filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
-    }
-
-    try {
-      // Get a list of every key in every template of the hits we're searching
-      const rawCounts = await Promise.all(
-        (response?.items ?? []).map(async h => {
-          const matchingTemplate = await getMatchingTemplate(h);
-
-          return (matchingTemplate?.keys ?? [])
-            .filter(key => !['howler.id', 'howler.hash'].includes(key))
-            .map(key => ({
-              key,
-              source: `${matchingTemplate.analytic}: ${matchingTemplate.detection ?? t('any')}`
-            }));
-        })
-      );
-
-      const _keyCounts = rawCounts
-        .flat()
-        .concat(customKeys.map(key => ({ key, source: 'custom' })))
-
-        // Take that array and reduce it to unique keys and the number of times we see it,
-        // as well as the templates we sourced this key from
-        .reduce(
-          (acc, val) => {
-            if (acc[val.key] && val.source !== 'custom') {
-              acc[val.key].count++;
-            } else if (val.source === 'custom') {
-              acc[val.key] = {
-                count: -1,
-                sources: [val.source]
-              };
-            } else {
-              acc[val.key] = {
-                count: 1,
-                sources: [val.source]
-              };
-            }
-
-            return acc;
-          },
-          {} as { [index: string]: { count: number; sources: string[] } }
-        );
-
-      // We'll save this for later
-      setKeyCounts(_keyCounts);
-      setAggregateResults({});
-
-      // Sort the fields based on the number of occurrences
-      const sortedKeys = Object.keys(_keyCounts).sort(
-        (a, b) => (_keyCounts[b]?.count ?? 0) - (_keyCounts[a]?.count ?? 0)
-      );
-
-      if (sortedKeys.length > 0) {
-        setLoading(true);
-        const result = await dispatchApi(
-          api.search.facet.hit.post({
-            fields: sortedKeys,
-            query,
-            rows: pageCount,
-            filters
-          }),
-          {
-            throwError: false,
-            logError: true,
-            showError: false
-          }
-        );
-
-        if (result) {
-          setAggregateResults(_results => ({
-            ..._results,
-            ...result
-          }));
-        }
-      }
-    } catch (e) {
-      showErrorMessage(e);
-      setAggregateResults({});
-    } finally {
-      setLoading(false);
-      if (onComplete) {
-        onComplete();
-      }
-    }
-  }, [
-    customKeys,
-    dispatchApi,
-    endDate,
-    getMatchingTemplate,
-    onComplete,
-    onStart,
-    pageCount,
-    query,
-    response?.items,
-    showErrorMessage,
-    span,
-    startDate,
-    t
-  ]);
-
-  const setSearch = useCallback(
-    (key, value) => {
-      setQuery(`${key}:${value}`);
-    },
-    [setQuery]
-  );
-
-  useEffect(() => {
-    if ((!query && !viewId) || searching || error) {
-      return;
-    }
-
-    performAggregation();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query, viewId, searching, error]);
-
-  return (
-    <Stack sx={{ mx: 2, height: '100%' }} spacing={1}>
-      <Typography variant="h6">{t('hit.summary.aggregate.title')}</Typography>
-      <Divider flexItem />
-      <HitGraph query={query} />
-      <Divider flexItem />
-      <Stack sx={{ overflow: 'auto', marginTop: '0 !important' }} pt={1} spacing={1}>
-        <Stack direction="row" spacing={2} mb={2} alignItems="stretch">
-          <Autocomplete
-            fullWidth
-            multiple
-            sx={{ minWidth: '175px' }}
-            size="small"
-            value={customKeys}
-            options={hitFields.map(_field => _field.key)}
-            renderInput={_params => <TextField {..._params} label={t('hit.summary.adhoc')} />}
-            onChange={(_, value) => setCustomKeys(value)}
-          />
-          <Button
-            variant="outlined"
-            startIcon={loading ? <CircularProgress size={20} sx={{ ml: 1 }} /> : <Analytics sx={{ ml: 1 }} />}
-            disabled={loading}
-            onClick={() => performAggregation()}
-          >
-            {t('button.aggregate')}
-          </Button>
-        </Stack>
-        {isEmpty(aggregateResults) && (
-          <Alert severity="info" variant="outlined">
-            <AlertTitle>{t('hit.summary.aggregate.nokeys.title')}</AlertTitle>
-            {t('hit.summary.aggregate.nokeys.description')}
-          </Alert>
-        )}
-        {loading && <LinearProgress sx={{ minHeight: '4px' }} />}
-        {Object.keys(aggregateResults)
-          .filter(key => !isEmpty(aggregateResults[key]))
-          .flatMap(key => [
-            <Fade in key={key + '-refs'}>
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <Typography key={key + '-title'} variant="body1">
-                  {key}
-                </Typography>
-                {keyCounts[key]?.count < 0 ? (
-                  <Typography variant="caption" color="text.secondary">
-                    ({t('hit.summary.adhoc.custom')})
-                  </Typography>
-                ) : (
-                  <Typography variant="caption" color="text.secondary">
-                    ({keyCounts[key]?.count ?? '?'} {t('references')})
-                  </Typography>
-                )}
-
-                <Tooltip
-                  title={
-                    <Stack>
-                      <Typography variant="caption">{t('hit.summary.aggregate.sources')}</Typography>
-                      {keyCounts[key]?.sources.map(source => (
-                        <Typography key={source} variant="caption">
-                          {source}
-                        </Typography>
-                      )) ?? '?'}
-                    </Stack>
-                  }
-                >
-                  <InfoOutlined fontSize="inherit" />
-                </Tooltip>
-              </Stack>
-            </Fade>,
-            <Fade in key={key + '-results'}>
-              {hitFields.find(f => f.key === key)?.type !== 'date' ? (
-                <Box sx={theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' })}>
-                  <Grid container key={key + '-list'} sx={theme => ({ mr: 1, mt: theme.spacing(-1) })} spacing={1}>
-                    {Object.keys(aggregateResults[key]).map(item => (
-                      <Grid key={item} item xs="auto">
-                        <PluginChip
-                          context="summary"
-                          size="small"
-                          variant="filled"
-                          value={item}
-                          label={`${item} (${aggregateResults[key][item]})`}
-                          onClick={() => setSearch(key, `"${item}"`)}
-                          field={key}
-                        />
-                      </Grid>
-                    ))}
-                  </Grid>
-                </Box>
-              ) : (
-                <Chip
-                  size="small"
-                  sx={theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' })}
-                  label={getTimeRange(Object.keys(aggregateResults[key]))
-                    .map(d => new Date(d).toLocaleString())
-                    .join(' - ')}
-                  onClick={() => setSearch(key, `[${getTimeRange(Object.keys(aggregateResults[key])).join(' TO ')}]`)}
-                />
-              )}
-            </Fade>
-          ])}
-      </Stack>
-    </Stack>
-  );
-};
-
-export default memo(HitSummary);

package/components/elements/hit/HitWorklog.tsx

@@ -1,201 +0,0 @@
-import { KeyboardArrowUp } from '@mui/icons-material';
-import { CardContent, CardHeader, Divider, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import useMyUtils from '@cccsaurora/howler-ui/components/hooks/useMyUtils';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Log } from '@cccsaurora/howler-ui/models/entities/generated/Log';
-import type { FC } from 'react';
-import { useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { compareTimestamp, twitterShort } from '@cccsaurora/howler-ui/utils/utils';
-import HowlerAvatar from '../display/HowlerAvatar';
-import HowlerCard from '../display/HowlerCard';
-import Markdown from '../display/Markdown';
-
-const HitWorklog: FC<{ hit: Hit; users: { [id: string]: HowlerUser } }> = ({ hit, users }) => {
-  const theme = useTheme();
-  const { shiftColor } = useMyUtils();
-  const { t } = useTranslation();
-
-  // This value tracks the latest hit version we have seen.
-  // That way, when we see a new version, we can highlight the new changes in the UI
-  const [initialVersions, setInitialVersions] = useMyLocalStorageItem<{ [index: string]: string }>(
-    StorageKey.LAST_SEEN,
-    {}
-  );
-
-  /**
-   * The variable that tracks the grouped worklog entries. For the sake of readability, we group together log items that are close in time and created
-   * by the same user. We also add a split between previously seen and new worklog entries.
-   */
-  const worklogGroups = useMemo(
-    () => {
-      let setInitialVersion = false;
-
-      return (hit?.howler?.log || [])
-        .slice()
-        .sort((a, b) => compareTimestamp(b.timestamp, a.timestamp))
-        .reduce((acc, l) => {
-          if (!initialVersions[hit.howler.id] && !setInitialVersion) {
-            setInitialVersion = true;
-            setInitialVersions({
-              ...initialVersions,
-              [hit.howler.id]: l.previous_version
-            });
-          }
-
-          // Initialize the worklog card groups
-          if (!acc.length) {
-            return [[l]];
-          }
-
-          // Get the the most recent worklog card
-          const currArr = acc[acc.length - 1];
-          if (
-            // Does this log version match the saved version?
-            l.previous_version === initialVersions[hit.howler.id] &&
-            // Does the previous entry not match?
-            currArr[currArr.length - 1].previous_version !== initialVersions[hit.howler.id]
-          ) {
-            // If so, we've figured out where the new logs should start, so we start a new card.
-            acc.push([l]);
-            return acc;
-          }
-
-          // If a different user added this to the log, or enough time has passed, we start a new card
-          if (currArr[0].user === l.user && compareTimestamp(currArr[0].timestamp, l.timestamp) < 60 * 5) {
-            currArr.push(l);
-            return acc;
-          }
-
-          acc.push([l]);
-          return acc;
-        }, [] as Log[][]);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hit?.howler?.log]
-  );
-
-  useEffect(() => {
-    // On unmount, mark the latest entry version as the last seen version.
-    return () => {
-      if (hit?.howler.id) {
-        setInitialVersions({
-          ...initialVersions,
-          [hit.howler.id]: worklogGroups[0][0]?.previous_version ?? initialVersions[hit.howler.id]
-        });
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // We now render the actual HTML from our grouped worklog items
-  const worklogEls = useMemo(() => {
-    if (worklogGroups.length > 0) {
-      return worklogGroups.flatMap((ls, index) => {
-        const result = [];
-
-        if (index > 0 && initialVersions[hit.howler.id] && ls[0].previous_version === initialVersions[hit.howler.id]) {
-          result.push(
-            <Divider key="new">
-              <Stack direction="row">
-                <KeyboardArrowUp sx={{ color: 'text.secondary' }} fontSize="small" />
-                <Typography variant="caption" color="text.secondary">
-                  {t('hit.worklog.new')}
-                </Typography>
-                <KeyboardArrowUp sx={{ color: 'text.secondary' }} fontSize="small" />
-              </Stack>
-            </Divider>
-          );
-        }
-
-        result.push(
-          <HowlerCard key={ls[0].timestamp} elevation={4}>
-            <CardHeader
-              avatar={<HowlerAvatar userId={ls[0].user} />}
-              title={users[ls[0].user]?.name ?? ls[0].user}
-              subheader={
-                <Tooltip title={new Date(ls[0].timestamp).toLocaleString()}>
-                  <Typography variant="caption">{twitterShort(ls[0].timestamp)}</Typography>
-                </Tooltip>
-              }
-            />
-            <CardContent>
-              <Stack spacing={1} divider={<Divider orientation="horizontal" />}>
-                {ls.map(l => (
-                  <Typography
-                    key={l.timestamp}
-                    variant="body2"
-                    color="text.secondary"
-                    component="div"
-                    position="relative"
-                  >
-                    {l.explanation ? (
-                      <Markdown md={l.explanation.trim()} />
-                    ) : (
-                      <>
-                        <span>{t('hit.worklog.updated')}&nbsp;</span>
-                        <code>{l.key}</code>
-                        <span>:&nbsp;</span>
-                        {
-                          {
-                            set: (
-                              <span>
-                                {l.previous_value} {t('hit.worklog.set')} {l.new_value}
-                              </span>
-                            ),
-                            appended: (
-                              <span>
-                                {l.new_value} {t('hit.worklog.appended')} {l.previous_value?.replace(/[[\]]/g, '')}
-                              </span>
-                            ),
-                            removed: (
-                              <span>
-                                {l.new_value} {t('hit.worklog.removed')} {l.previous_value?.replace(/[[\]]/g, '')}
-                              </span>
-                            )
-                          }[l.type]
-                        }
-                      </>
-                    )}
-                    {ls.length > 1 && (
-                      <Tooltip title={new Date(l.timestamp).toLocaleString()}>
-                        <Typography
-                          sx={{ ml: 0.5, position: 'absolute', right: '1rem', top: 0 }}
-                          variant="caption"
-                          color={shiftColor(theme.palette.text.primary, 0.5)}
-                        >
-                          {twitterShort(l.timestamp)}
-                        </Typography>
-                      </Tooltip>
-                    )}
-                  </Typography>
-                ))}
-              </Stack>
-            </CardContent>
-          </HowlerCard>
-        );
-
-        return result;
-      });
-    } else if (!hit?.howler) {
-      return (
-        <>
-          <Skeleton width="100%" height={200} variant="rounded" />
-          <Skeleton width="100%" height={220} variant="rounded" />
-          <Skeleton width="100%" height={150} variant="rounded" />
-        </>
-      );
-    }
-  }, [worklogGroups, hit.howler, initialVersions, users, t, shiftColor, theme.palette.text.primary]);
-
-  return (
-    <Stack sx={{ p: 2 }} spacing={1}>
-      {worklogEls}
-    </Stack>
-  );
-};
-
-export default HitWorklog;