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

package/components/routes/analytics/AnalyticOverview.tsx

@@ -0,0 +1,165 @@
+import { Check, Edit } from '@mui/icons-material';
+import {
+  Alert,
+  AlertTitle,
+  Box,
+  Card,
+  CardContent,
+  CircularProgress,
+  Divider,
+  IconButton,
+  Skeleton,
+  Stack,
+  TextField,
+  Typography,
+  useMediaQuery,
+  useTheme
+} from '@mui/material';
+import api from 'api';
+import 'chartjs-adapter-dayjs-4';
+import Markdown from 'components/elements/display/Markdown';
+import useMyApi from 'components/hooks/useMyApi';
+import useMySnackbar from 'components/hooks/useMySnackbar';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import type { FC } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { sanitizeLuceneQuery } from 'utils/stringUtils';
+import Assessment from './widgets/Assessment';
+import Created from './widgets/Created';
+import Detection from './widgets/Detection';
+import Escalation from './widgets/Escalation';
+import Status from './widgets/Status';
+
+const AnalyticOverview: FC<{ analytic: Analytic; setAnalytic: (a: Analytic) => void }> = ({
+  analytic,
+  setAnalytic
+}) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { dispatchApi } = useMyApi();
+  const isMd = useMediaQuery(theme.breakpoints.down('md'));
+  const { showSuccessMessage } = useMySnackbar();
+
+  const [loading, setLoading] = useState(true);
+  const [markdownLoading, setMarkdownLoading] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [empty, setEmpty] = useState(false);
+  const [editValue, setEditValue] = useState('');
+
+  useEffect(() => {
+    if (!analytic) {
+      return;
+    }
+
+    setLoading(true);
+
+    api.search.count.hit
+      .post({ query: `howler.analytic:"${sanitizeLuceneQuery(analytic.name)}"` })
+      .then(({ count }) => setEmpty(!count))
+      .finally(() => setLoading(false));
+  }, [analytic]);
+
+  const onEdit = useCallback(async () => {
+    try {
+      if (editing) {
+        setMarkdownLoading(true);
+        const result = await dispatchApi(api.analytic.put(analytic.analytic_id, { description: editValue }), {
+          showError: true,
+          throwError: true
+        });
+
+        setAnalytic(result);
+
+        showSuccessMessage(t('route.analytics.updated'));
+      } else {
+        setEditValue(analytic.description);
+      }
+    } finally {
+      setEditing(!editing);
+      setMarkdownLoading(false);
+    }
+  }, [analytic, dispatchApi, editValue, editing, setAnalytic, showSuccessMessage, t]);
+
+  return (
+    <>
+      <Divider flexItem sx={{ mt: 1 }} />
+      <Stack
+        spacing={2}
+        direction={isMd ? 'column' : 'row'}
+        divider={<Divider orientation={isMd ? 'horizontal' : 'vertical'} flexItem />}
+        sx={{ flex: 1, '& > div': { flex: 1 } }}
+      >
+        <Box sx={{ maxWidth: '50%', overflow: 'auto' }}>
+          <Typography variant="h5" sx={{ mt: 2, mb: 1, display: 'flex', flexDirection: 'row' }}>
+            {t('route.analytics.overview.description')}
+            <IconButton sx={{ marginLeft: 'auto' }} disabled={markdownLoading} onClick={onEdit}>
+              {markdownLoading ? (
+                <CircularProgress size={20} />
+              ) : editing ? (
+                <Check fontSize="small" />
+              ) : (
+                <Edit fontSize="small" />
+              )}
+            </IconButton>
+          </Typography>
+          {editing ? (
+            <TextField
+              value={editValue}
+              onChange={e => setEditValue(e.target.value)}
+              fullWidth
+              multiline
+              minRows={30}
+              sx={{ '& textarea': { fontFamily: 'monospace', fontSize: 13 } }}
+            />
+          ) : (
+            <Markdown md={analytic?.description} />
+          )}
+        </Box>
+        <Stack direction="column" spacing={2}>
+          <Typography variant="h5" sx={{ mt: `${theme.spacing(2)} !important` }}>
+            {t('route.analytics.overview.statistics')}
+          </Typography>
+          {loading ? (
+            <Skeleton variant="rounded" width="100%" height="90px" />
+          ) : empty ? (
+            <Alert variant="outlined" severity="warning">
+              <AlertTitle>{t('route.analytics.overview.empty.title')}</AlertTitle>
+              {t('route.analytics.overview.empty.description')}
+            </Alert>
+          ) : (
+            <>
+              <Card>
+                <CardContent>
+                  <Created analytic={analytic} />
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent sx={{ display: 'flex', justifyContent: 'center' }}>
+                  <Escalation analytic={analytic} />
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent>
+                  <Assessment analytic={analytic} />
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent>
+                  <Status analytic={analytic} />
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent>
+                  <Detection analytic={analytic} />
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default AnalyticOverview;

package/components/routes/analytics/AnalyticOverviews.tsx

@@ -0,0 +1,75 @@
+import { Article } from '@mui/icons-material';
+import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
+import 'chartjs-adapter-dayjs-4';
+import AppListEmpty from 'commons/components/display/AppListEmpty';
+import { OverviewContext } from 'components/app/providers/OverviewProvider';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import { useContext, useEffect, useMemo, useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import OverviewCard from '../overviews/OverviewCard';
+
+const AnalyticOverviews: FC<{ analytic: Analytic }> = ({ analytic }) => {
+  const { t } = useTranslation();
+  const isNarrow = useMediaQuery('(max-width: 1800px)');
+
+  const { getOverviews, overviews } = useContext(OverviewContext);
+  const matchingOverviews = useMemo(
+    () => overviews.filter(_overview => _overview.analytic === analytic?.name),
+    [analytic?.name, overviews]
+  );
+
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    getOverviews().finally(() => setLoading(false));
+  }, [getOverviews]);
+
+  if (!analytic) {
+    return <Skeleton variant="rounded" width="100%" sx={{ minHeight: '300px', mt: 2 }} />;
+  }
+
+  return (
+    <Stack spacing={1} position="relative">
+      <Fab
+        component={Link}
+        to={`/overviews/view?analytic=${analytic.name}`}
+        variant="extended"
+        size="large"
+        color="primary"
+        sx={theme => ({
+          textTransform: 'none',
+          position: isNarrow ? 'fixed' : 'absolute',
+          right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(5)})`,
+          whiteSpace: 'nowrap',
+          ...(isNarrow ? { bottom: theme.spacing(1) } : { top: theme.spacing(2) })
+        })}
+      >
+        <Article sx={{ mr: 1 }} />
+        <Typography>{t('route.overviews.create')}</Typography>
+      </Fab>
+      {loading && <Skeleton width="100%" height="175px" />}
+      {!loading && matchingOverviews.length < 1 && <AppListEmpty />}
+      {matchingOverviews.map(overview => (
+        <Box
+          component={Link}
+          to={`/overviews/view?analytic=${overview.analytic}${overview.detection ? '&template=' + overview.detection : ''}`}
+          key={overview.overview_id}
+          sx={theme => ({
+            textDecoration: 'none',
+            '& > .MuiCard-root': {
+              cursor: 'pointer',
+              transition: theme.transitions.create('border-color'),
+              '&:hover': { borderColor: 'primary.main' }
+            }
+          })}
+        >
+          <OverviewCard overview={overview} />
+        </Box>
+      ))}
+    </Stack>
+  );
+};
+
+export default AnalyticOverviews;

package/components/routes/analytics/AnalyticSearch.tsx

@@ -0,0 +1,301 @@
+import { SsidChart, Star, StarBorder } from '@mui/icons-material';
+import {
+  AvatarGroup,
+  Card,
+  CardContent,
+  CardHeader,
+  Chip,
+  Divider,
+  Grid,
+  IconButton,
+  InputAdornment,
+  Stack,
+  Tooltip,
+  Typography,
+  useTheme
+} from '@mui/material';
+import api from 'api';
+import type { HowlerSearchResponse } from 'api/search';
+import { useAppUser } from 'commons/components/app/hooks';
+import useLocalStorageItem from 'commons/components/utils/hooks/useLocalStorageItem';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import { TuiListProvider, type TuiListItemProps } from 'components/elements/addons/lists';
+import { TuiListMethodContext, type TuiListMethodsState } from 'components/elements/addons/lists/TuiListProvider';
+import HowlerAvatar from 'components/elements/display/HowlerAvatar';
+import ItemManager from 'components/elements/display/ItemManager';
+import useMyApi from 'components/hooks/useMyApi';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import { useCallback, useContext, useEffect, useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey } from 'utils/constants';
+import { sanitizeLuceneQuery } from 'utils/stringUtils';
+
+type RuleTypes = -1 | 0 | 1;
+
+const AnalyticSearchBase: FC = () => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+  const { load } = useContext<TuiListMethodsState<Analytic>>(TuiListMethodContext);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+  const appUser = useAppUser<HowlerUser>();
+
+  const [onlyRules, setOnlyRules] = useLocalStorageItem<RuleTypes>(StorageKey.ONLY_RULES, 0);
+  const [searching, setSearching] = useState<boolean>(false);
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [phrase, setPhrase] = useState(searchParams.get('phrase') || '');
+  const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+  const [response, setResponse] = useState<HowlerSearchResponse<Analytic>>(null);
+
+  const addFavourite = useCallback(
+    async (analytic: Analytic) => {
+      await dispatchApi(api.analytic.favourite.post(analytic.analytic_id));
+
+      appUser.setUser({
+        ...appUser.user,
+        favourite_analytics: [...appUser.user.favourite_analytics, analytic.analytic_id]
+      });
+    },
+    [appUser, dispatchApi]
+  );
+
+  const removeFavourite = useCallback(
+    async (analytic: Analytic) => {
+      await dispatchApi(api.analytic.favourite.del(analytic.analytic_id));
+
+      appUser.setUser({
+        ...appUser.user,
+        favourite_analytics: appUser.user.favourite_analytics.filter(v => v !== analytic.analytic_id)
+      });
+    },
+    [appUser, dispatchApi]
+  );
+
+  // Search Handler.
+  const onSearch = useCallback(async () => {
+    setSearching(true);
+    setHasError(false);
+
+    if (phrase) {
+      searchParams.set('phrase', phrase);
+    } else {
+      searchParams.delete('phrase');
+    }
+    setSearchParams(searchParams, { replace: true });
+
+    try {
+      const sanitizedPhrase = sanitizeLuceneQuery(phrase);
+      const _response = await dispatchApi(
+        api.search.analytic.post({
+          query:
+            `name:*${sanitizedPhrase}* OR detections:*${sanitizedPhrase}*` +
+            (onlyRules > 0 ? ' AND _exists_:rule_type' : onlyRules < 0 ? ' AND -_exists_:rule_type' : ''),
+          rows: pageCount,
+          offset
+        })
+      );
+      setResponse(_response);
+      load(_response.items.map(u => ({ id: u.analytic_id, item: u })));
+    } catch (e) {
+      setHasError(true);
+    } finally {
+      setSearching(false);
+    }
+  }, [dispatchApi, load, offset, onlyRules, pageCount, phrase, searchParams, setSearchParams]);
+
+  const onPageChange = useCallback(
+    (_offset: number) => {
+      if (_offset !== offset) {
+        searchParams.set('offset', _offset.toString());
+        setSearchParams(searchParams, { replace: true });
+        setOffset(_offset);
+      }
+    },
+    [offset, searchParams, setSearchParams]
+  );
+
+  const onFavourite = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, analytic: Analytic) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (appUser.user?.favourite_analytics.includes(analytic.analytic_id)) {
+        await dispatchApi(removeFavourite(analytic));
+      } else {
+        await dispatchApi(addFavourite(analytic));
+      }
+    },
+    [addFavourite, appUser.user?.favourite_analytics, dispatchApi, removeFavourite]
+  );
+
+  // Effect to initialize list of users.
+  useEffect(
+    () => {
+      onSearch();
+
+      if (!searchParams.has('offset')) {
+        searchParams.set('offset', '0');
+        setSearchParams(searchParams, { replace: true });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onlyRules]
+  );
+
+  useEffect(() => {
+    if (response?.total <= offset) {
+      setOffset(0);
+      searchParams.set('offset', '0');
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [offset, response?.total, searchParams, setSearchParams]);
+
+  useEffect(() => {
+    if (!searching) {
+      onSearch();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [offset]);
+
+  // Search result list item renderer.
+  const renderer = useCallback(
+    ({ item }: TuiListItemProps<Analytic>, classRenderer: () => string) => {
+      const filteredContributors = (item.item.contributors ?? []).filter(
+        contributor => contributor !== item.item.owner
+      );
+
+      return (
+        <Card
+          key={item.item.name}
+          onClick={() => navigate(`/analytics/${item.item.analytic_id}`)}
+          variant="outlined"
+          className={classRenderer()}
+          sx={{
+            '&:hover': { borderColor: 'primary.main' },
+            transitionProperty: 'border-color',
+            cursor: 'pointer',
+            mt: 1
+          }}
+        >
+          <CardHeader
+            title={
+              <Stack direction="row" spacing={1} alignItems="center">
+                <span>{item.item.name}</span>
+                {item.item.rule_type && (
+                  <>
+                    <Tooltip title={t('route.analytics.rule')}>
+                      <SsidChart color="info" />
+                    </Tooltip>
+                    <code
+                      style={{
+                        fontSize: '.55em',
+                        backgroundColor: theme.palette.background.paper,
+                        padding: theme.spacing(0.5),
+                        borderRadius: theme.shape.borderRadius,
+                        border: `thin solid ${theme.palette.divider}`
+                      }}
+                    >
+                      {item.item.rule_type}
+                    </code>
+                  </>
+                )}
+                <FlexOne />
+                <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
+                  {item.item.owner && <HowlerAvatar sx={{ width: 24, height: 24 }} userId={item.item.owner} />}
+                  {filteredContributors.length > 0 && <Divider orientation="vertical" flexItem />}
+                  <AvatarGroup>
+                    {filteredContributors.map(contributor => (
+                      <HowlerAvatar key={contributor} sx={{ width: 24, height: 24 }} userId={contributor} />
+                    ))}
+                  </AvatarGroup>
+                </Stack>
+                <Tooltip title={t('button.pin')}>
+                  <IconButton size="small" onClick={e => onFavourite(e, item.item)}>
+                    {appUser.user?.favourite_analytics?.includes(item.item.analytic_id) ? <Star /> : <StarBorder />}
+                  </IconButton>
+                </Tooltip>
+              </Stack>
+            }
+          />
+          {item.item.detections?.length > 0 && (
+            <CardContent sx={{ paddingTop: 0 }}>
+              <Grid container spacing={0.5} sx={{ marginTop: `${theme.spacing(-0.5)} !important` }}>
+                {item.item.detections.slice(0, 5).map(d => (
+                  <Grid item key={d}>
+                    <Chip size="small" variant="outlined" label={d} />
+                  </Grid>
+                ))}
+                {item.item.detections.length > 5 && (
+                  <Grid item>
+                    <Tooltip
+                      title={
+                        <Stack>
+                          {item.item.detections.slice(5).map(d => (
+                            <span key={d}>{d}</span>
+                          ))}
+                        </Stack>
+                      }
+                    >
+                      <Chip size="small" variant="outlined" label={`+ ${item.item.detections.length - 5}`} />
+                    </Tooltip>
+                  </Grid>
+                )}
+              </Grid>
+            </CardContent>
+          )}
+        </Card>
+      );
+    },
+    [appUser.user?.favourite_analytics, navigate, onFavourite, t, theme]
+  );
+
+  return (
+    <ItemManager
+      onSearch={onSearch}
+      onPageChange={onPageChange}
+      phrase={phrase}
+      setPhrase={setPhrase}
+      hasError={hasError}
+      searching={searching}
+      searchAdornment={
+        <InputAdornment position="end">
+          <Tooltip
+            title={t(
+              `route.analytics.search.filter.rules.${onlyRules < 0 ? 'hide' : onlyRules > 0 ? 'show' : 'toggle'}`
+            )}
+          >
+            <IconButton onClick={() => setOnlyRules((((onlyRules + 2) % 3) - 1) as -1 | 0 | 1)}>
+              <SsidChart
+                color={onlyRules < 0 ? 'error' : onlyRules > 0 ? 'info' : 'inherit'}
+                sx={{ transition: theme.transitions.create(['color']) }}
+              />
+            </IconButton>
+          </Tooltip>
+        </InputAdornment>
+      }
+      aboveSearch={
+        <Typography sx={{ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }} variant="body2">
+          {t('route.analytics.search.prompt')}
+        </Typography>
+      }
+      renderer={renderer}
+      response={response}
+      searchPrompt="route.analytics.manager.search"
+    />
+  );
+};
+
+const AnalyticSearch: FC = () => {
+  return (
+    <TuiListProvider>
+      <AnalyticSearchBase />
+    </TuiListProvider>
+  );
+};
+
+export default AnalyticSearch;

package/components/routes/analytics/AnalyticTemplates.tsx

@@ -0,0 +1,77 @@
+import { Article } from '@mui/icons-material';
+import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
+import api from 'api';
+import 'chartjs-adapter-dayjs-4';
+import AppListEmpty from 'commons/components/display/AppListEmpty';
+import useMyApi from 'components/hooks/useMyApi';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import type { Template } from 'models/entities/generated/Template';
+import { useEffect, useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import TemplateCard from '../templates/TemplateCard';
+
+const AnalyticTemplates: FC<{ analytic: Analytic }> = ({ analytic }) => {
+  const { t } = useTranslation();
+  const isNarrow = useMediaQuery('(max-width: 1800px)');
+  const { dispatchApi } = useMyApi();
+
+  const [templates, setTemplates] = useState<Template[]>([]);
+
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    dispatchApi(api.template.get())
+      .then(_templates => _templates.filter(_template => _template.analytic === analytic?.name))
+      .then(setTemplates)
+      .finally(() => setLoading(false));
+  }, [analytic?.name, dispatchApi]);
+
+  if (!analytic) {
+    return <Skeleton variant="rounded" width="100%" sx={{ minHeight: '300px', mt: 2 }} />;
+  }
+
+  return (
+    <Stack spacing={1} position="relative">
+      <Fab
+        component={Link}
+        to={`/templates/view?analytic=${analytic.name}`}
+        variant="extended"
+        size="large"
+        color="primary"
+        sx={theme => ({
+          textTransform: 'none',
+          position: isNarrow ? 'fixed' : 'absolute',
+          right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(5)})`,
+          whiteSpace: 'nowrap',
+          ...(isNarrow ? { bottom: theme.spacing(1) } : { top: theme.spacing(2) })
+        })}
+      >
+        <Article sx={{ mr: 1 }} />
+        <Typography>{t('route.templates.create')}</Typography>
+      </Fab>
+      {loading && <Skeleton width="100%" height="175px" />}
+      {!loading && templates.length < 1 && <AppListEmpty />}
+      {templates.map(template => (
+        <Box
+          component={Link}
+          to={`/templates/view?analytic=${template.analytic}${template.detection ? '&template=' + template.detection : ''}&type=${template.type}`}
+          key={template.template_id}
+          sx={theme => ({
+            textDecoration: 'none',
+            '& > .MuiCard-root': {
+              cursor: 'pointer',
+              transition: theme.transitions.create('border-color'),
+              '&:hover': { borderColor: 'primary.main' }
+            }
+          })}
+        >
+          <TemplateCard template={template} />
+        </Box>
+      ))}
+    </Stack>
+  );
+};
+
+export default AnalyticTemplates;