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

package/components/routes/analytics/AnalyticDetails.tsx

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

package/components/routes/analytics/AnalyticHitComments.tsx

@@ -0,0 +1,99 @@
+import { Chip, Divider, LinearProgress, Stack } from '@mui/material';
+import api from 'api';
+import Comment from 'components/elements/Comment';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import useMyUserList from 'components/hooks/useMyUserList';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import type { Comment as HitComment } from 'models/entities/generated/Comment';
+import type { FC } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey } from 'utils/constants';
+import { compareTimestamp } from 'utils/utils';
+
+interface CommentData {
+  hitId: string;
+  detection: string;
+  comment: HitComment;
+}
+
+const AnalyticHitComments: FC<{ analytic: Analytic }> = ({ analytic }) => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+
+  const [comments, setComments] = useState<CommentData[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [userIds, setUserIds] = useState<Set<string>>(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 ? (
+        <LinearProgress />
+      ) : (
+        comments
+          .filter(c => !searchParams.get('filter') || c.detection === searchParams.get('filter'))
+          .sort((a, b) => compareTimestamp(b.comment.timestamp, a.comment.timestamp))
+          .map(c => (
+            <Comment
+              key={c.comment.id}
+              comment={c.comment}
+              users={users}
+              onClick={() => navigate(`/hits/${c.hitId}`)}
+              extra={
+                !searchParams.get('filter') && (
+                  <Chip
+                    size="small"
+                    sx={theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` })}
+                    label={c.detection ?? 'Analytic'}
+                  />
+                )
+              }
+            />
+          ))
+      ),
+    [loading, comments, searchParams, users, navigate]
+  );
+
+  return (
+    <Stack direction="column" py={2} spacing={1}>
+      <Divider orientation="horizontal" flexItem />
+      {commentEls}
+    </Stack>
+  );
+};
+
+export default AnalyticHitComments;

package/components/routes/analytics/AnalyticNotebooks.tsx

@@ -0,0 +1,185 @@
+import { Add, Delete, Label, LinkRounded, Plagiarism } from '@mui/icons-material';
+import {
+  Box,
+  Card,
+  CircularProgress,
+  Divider,
+  FormControl,
+  Grid,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import api from 'api';
+import { useAppUser } from 'commons/components/app/hooks';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import HowlerAvatar from 'components/elements/display/HowlerAvatar';
+import HitNotebooks from 'components/elements/hit/HitNotebooks';
+import useMyApi from 'components/hooks/useMyApi';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import { useCallback, useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { safeStringPropertyCompare } from 'utils/stringUtils';
+
+const AnalyticNotebooks: FC<{ analytic: Analytic; setAnalytic: (a: Analytic) => void }> = ({
+  analytic,
+  setAnalytic
+}) => {
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+  const { user } = useAppUser<HowlerUser>();
+  const [loading, setLoading] = useState(false);
+  const [formState, setFormState] = useState<{ name: string; link: string; detection: string }>({
+    name: '',
+    link: '',
+    detection: ''
+  });
+
+  const onSubmit = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await dispatchApi(
+        api.analytic.notebooks.post(analytic.analytic_id, { ...formState, value: formState.link }),
+        {
+          showError: true,
+          throwError: false,
+          logError: false
+        }
+      );
+
+      if (result) {
+        setFormState({
+          name: '',
+          link: '',
+          detection: ''
+        });
+
+        setAnalytic(result);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [analytic, dispatchApi, formState, setAnalytic]);
+
+  const onDelete = useCallback(
+    async (id: string) => {
+      await dispatchApi(api.analytic.notebooks.del(analytic.analytic_id, [id]));
+
+      setAnalytic({ ...analytic, notebooks: analytic.notebooks.filter(n => n.id !== id) });
+    },
+    [analytic, dispatchApi, setAnalytic]
+  );
+
+  return (
+    <Stack direction="column" py={2} spacing={1}>
+      <Box sx={{ flexGrow: 1 }}>
+        <Grid container spacing={1}>
+          <Grid item xs={6} md={2}>
+            <FormControl fullWidth>
+              <InputLabel id="select-label">{'Detection'}</InputLabel>
+              <Select
+                labelId="select-label"
+                label="Detection"
+                value={formState.detection}
+                onChange={ev => {
+                  setFormState({ ...formState, detection: ev.target.value });
+                }}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <Plagiarism />
+                  </InputAdornment>
+                }
+              >
+                <MenuItem value="">{t('analytic.notebook.dropdown.none')}</MenuItem>
+                {analytic?.detections?.map(d => (
+                  <MenuItem value={d} key={d}>
+                    {d}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item xs={6} md={2}>
+            <TextField
+              fullWidth
+              label={t('analytic.notebook.name')}
+              value={formState.name}
+              onChange={ev => {
+                setFormState({ ...formState, name: ev.currentTarget.value });
+              }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Label />
+                  </InputAdornment>
+                )
+              }}
+            />
+          </Grid>
+
+          <Grid item xs={12} md={8}>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <TextField
+                fullWidth
+                label={t('analytic.notebook.link')}
+                value={formState.link}
+                onChange={ev => {
+                  setFormState({ ...formState, link: ev.currentTarget.value });
+                }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <LinkRounded />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <IconButton disabled={!formState.link || !formState.name} onClick={() => !loading && onSubmit()}>
+                {loading ? <CircularProgress /> : <Add />}
+              </IconButton>
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+      <Divider orientation="horizontal" flexItem />
+      {analytic?.notebooks?.sort(safeStringPropertyCompare('detection')).map(n => (
+        <Card variant="outlined" sx={{ p: 1, mb: 1 }} key={n.id}>
+          <Stack direction="row" alignItems="center" spacing={1}>
+            <HowlerAvatar
+              sx={{ width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }}
+              userId={n.user}
+            />
+            <Stack>
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Typography variant="body1">{n.name}</Typography>
+              </Stack>
+              <Typography variant="caption">
+                <code>{n.value}</code>
+              </Typography>
+            </Stack>
+            <FlexOne />
+            <Typography variant="caption">{n.detection ?? ''}</Typography>
+            <HitNotebooks analytic={analytic} selectedNotebook={n.name} />
+            {(n?.user === user.username || user.roles?.includes('admin')) && (
+              <Tooltip title={'Remove'}>
+                <IconButton onClick={() => onDelete(n.id)}>
+                  <Delete />
+                </IconButton>
+              </Tooltip>
+            )}
+          </Stack>
+        </Card>
+      ))}
+    </Stack>
+  );
+};
+
+export default AnalyticNotebooks;