@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/routes/analytics/AnalyticOverview.tsx

@@ -1,165 +0,0 @@
-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 '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-dayjs-4';
-import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import type { FC } from 'react';
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/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

@@ -1,75 +0,0 @@
-import { Article } from '@mui/icons-material';
-import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
-import 'chartjs-adapter-dayjs-4';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
-import type { Analytic } from '@cccsaurora/howler-ui/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

@@ -1,301 +0,0 @@
-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 '@cccsaurora/howler-ui/api';
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
-import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
-import { TuiListProvider, type TuiListItemProps } from '@cccsaurora/howler-ui/components/elements/addons/lists';
-import { TuiListMethodContext, type TuiListMethodsState } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
-import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
-import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { Analytic } from '@cccsaurora/howler-ui/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 '@cccsaurora/howler-ui/utils/constants';
-import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/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

@@ -1,77 +0,0 @@
-import { Article } from '@mui/icons-material';
-import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-dayjs-4';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import type { Template } from '@cccsaurora/howler-ui/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;