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

package/components/routes/home/AddNewCard.tsx

@@ -0,0 +1,295 @@
+import { Check } from '@mui/icons-material';
+import {
+  Autocomplete,
+  Box,
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  FormControl,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Select,
+  Slider,
+  Stack,
+  TextField,
+  Typography
+} from '@mui/material';
+import api from 'api';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import CustomButton from 'components/elements/addons/buttons/CustomButton';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { FC } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+
+const TYPES = {
+  view: ['viewId', 'limit'],
+  analytic: ['analyticId', 'type']
+};
+
+const VISUALIZATIONS = ['assessment', 'created', 'escalation', 'status', 'detection'];
+
+const AddNewCard: FC<{ dashboard: HowlerUser['dashboard']; addCard: (newCard) => void }> = ({ dashboard, addCard }) => {
+  const { t } = useTranslation();
+  const views = useContextSelector(ViewContext, ctx => ctx.views ?? {});
+  const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+
+  const [selectedType, setSelectedType] = useState<'' | 'view' | 'analytic'>('');
+  const [analytics, setAnalytics] = useState<Analytic[]>([]);
+  const [analyticsLoading, setAnalyticsLoading] = useState(false);
+  const [config, _setConfig] = useState<{ [index: string]: any }>({});
+  const [viewOpen, setViewOpen] = useState(false);
+  const [viewLoading, setViewLoading] = useState(false);
+
+  const setConfig = useCallback((key: string, value: any) => _setConfig(_config => ({ ..._config, [key]: value })), []);
+
+  const _addCard = useCallback(() => {
+    if (!selectedType) {
+      return;
+    }
+
+    addCard({
+      entry_id: selectedType === 'view' ? config.viewId : `${config.analyticId}-${config.type}`,
+      type: selectedType,
+      config: JSON.stringify(config)
+    });
+
+    // Zero the config so we don't prep the user to add the same card
+    // We can leave the analyticId, because it is allowed to be duplicated across viz types
+    ['type', 'viewId'].forEach(key => {
+      if (key in config) {
+        setConfig(key, '');
+      }
+    });
+  }, [selectedType, addCard, config, setConfig]);
+
+  const fetchAllAnalytics = async () => {
+    setAnalyticsLoading(true);
+    const batchSize = 150;
+    let offset = 0;
+    let allAnalytics: Analytic[] = [];
+    let total = 0;
+
+    do {
+      const response = await api.search.analytic.post({
+        query: '*:*',
+        rows: batchSize,
+        offset
+      });
+
+      allAnalytics = [...allAnalytics, ...(response.items ?? [])];
+
+      total = response.total ?? 0;
+      offset += batchSize;
+    } while (offset < total);
+
+    setAnalytics(allAnalytics);
+    setAnalyticsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchAllAnalytics();
+  }, []);
+
+  const filteredAnalyticVisualizations = useMemo(() => {
+    const existingAnalyticCards = dashboard.filter(_card => _card.type === "analytic");
+    return VISUALIZATIONS.filter(viz => {
+      return !existingAnalyticCards.some(_card => {
+        const parsedConfig = JSON.parse(_card.config);
+        return parsedConfig.analyticId === config.analyticId && parsedConfig.type === viz;
+      });
+    });
+  }, [dashboard, config.analyticId]);
+
+  useEffect(() => {
+    if (selectedType === 'view') {
+      _setConfig({
+        limit: 3
+      });
+    } else {
+      _setConfig({});
+    }
+  }, [selectedType]);
+
+  const onViewOpen = useCallback(async () => {
+    setViewOpen(true);
+    setViewLoading(true);
+
+    try {
+      await fetchViews();
+    } finally {
+      setViewLoading(false);
+    }
+  }, [fetchViews]);
+
+  return (
+    <Grid item xs={12} md={6}>
+      <Card variant="outlined" sx={{ height: '100%' }}>
+        <CardHeader
+          title={t('route.home.add')}
+          subheader={
+            <Typography variant="body2" color="text.secondary">
+              {t('route.home.add.description')}
+            </Typography>
+          }
+        />
+        <CardContent>
+          <Stack spacing={1}>
+            <FormControl sx={theme => ({ mt: `${theme.spacing(2)} !important` })}>
+              <InputLabel>{t('route.home.add.type')}</InputLabel>
+              <Select
+                value={selectedType}
+                onChange={event => setSelectedType(event.target.value as any)}
+                label={t('route.home.add.type')}
+              >
+                {Object.keys(TYPES).map(type => (
+                  <MenuItem key={type} value={type}>
+                    <Stack>
+                      <Typography variant="body1">{t(`route.home.add.type.${type}`)}</Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        {t(`route.home.add.type.${type}.description`)}
+                      </Typography>
+                    </Stack>
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            {selectedType && <Divider flexItem />}
+            {selectedType === 'analytic' && (
+              <>
+                <Typography variant="body1">{t('route.home.add.analytic.title')}</Typography>
+                <Typography variant="caption" color="text.secondary">
+                  {t('route.home.add.analytic.description')}
+                </Typography>
+                <Autocomplete
+                  sx={{ pt: 1 }}
+                  onChange={(__, opt) => setConfig('analyticId', opt.analytic_id)}
+                  loading={analyticsLoading}
+                  options={analytics}
+                  filterOptions={(options, state) =>
+                    options.filter(
+                      opt =>
+                        opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
+                        opt.description?.split('\n')[0]?.toLowerCase().includes(state.inputValue.toLowerCase())
+                    )
+                  }
+                  renderOption={(props, option) => (
+                    <li {...props} key={option.analytic_id}>
+                      <Stack>
+                        <Typography variant="body1">{option.name}</Typography>
+                        <Typography variant="caption" color="text.secondary">
+                          {option.description?.split('\n')[0]}
+                        </Typography>
+                      </Stack>
+                    </li>
+                  )}
+                  getOptionLabel={option => option.name}
+                  renderInput={params => <TextField {...params} label={t('route.home.add.analytic')} />}
+                />
+                <FormControl sx={theme => ({ mt: `${theme.spacing(2)} !important` })}>
+                  <InputLabel>{t('route.home.add.visualization')}</InputLabel>
+                  <Select
+                    value={config.type ?? ''}
+                    onChange={event => setConfig('type', event.target.value as any)}
+                    label={t('route.home.add.visualization')}
+                  >
+                    {filteredAnalyticVisualizations.length > 0 ? (
+                      filteredAnalyticVisualizations.map(viz => (
+                        <MenuItem key={viz} value={viz}>
+                          <Stack>
+                            <Typography variant="body1">{t(`route.home.add.visualization.${viz}`)}</Typography>
+                            <Typography variant="caption" color="text.secondary">
+                              {t(`route.home.add.visualization.${viz}.description`)}
+                            </Typography>
+                          </Stack>
+                        </MenuItem>
+                      ))
+                    ) : (
+                      <MenuItem disabled>
+                        <Typography variant="body1" color="text.secondary">
+                          {t('route.home.add.visualization.unavailable')}
+                        </Typography>
+                      </MenuItem>
+                    )}
+                  </Select>
+                </FormControl>
+              </>
+            )}
+            {selectedType === 'view' && (
+              <>
+                <Autocomplete
+                  sx={{ pt: 1 }}
+                  value={views[config.viewId] || null}
+                  onChange={(__, opt) => setConfig('viewId', opt.view_id)}
+                  onOpen={onViewOpen}
+                  onClose={() => setViewOpen(false)}
+                  open={viewOpen}
+                  loading={viewLoading}
+                  options={Object.values(views)}
+                  filterOptions={(options, state) =>
+                    options.filter(
+                      opt =>
+                        !!opt &&
+                        !dashboard?.find(
+                          entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id
+                        ) &&
+                        (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) ||
+                          opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))
+                    )
+                  }
+                  renderOption={(props, option) => (
+                    <li {...props} key={option.view_id}>
+                      <Stack>
+                        <Typography variant="body1">{t(option.title)}</Typography>
+                        <Typography variant="caption" color="text.secondary">
+                          {option.query}
+                        </Typography>
+                      </Stack>
+                    </li>
+                  )}
+                  getOptionLabel={option => t(option.title)}
+                  renderInput={params => <TextField {...params} label={t('route.home.add.view')} />}
+                />
+                <Typography variant="body1" sx={{ pt: 1 }}>
+                  {t('route.home.add.limit')}
+                </Typography>
+                <Typography variant="caption" color="text.secondary">
+                  {t('route.home.add.limit.description')}
+                </Typography>
+                <Box sx={{ px: 0.5 }}>
+                  <Slider
+                    value={config.limit ?? 3}
+                    valueLabelDisplay="auto"
+                    onChange={(_, value: number) => setConfig('limit', value)}
+                    min={1}
+                    max={10}
+                    step={1}
+                    marks
+                  />
+                </Box>
+              </>
+            )}
+            <Stack direction="row" justifyContent="end">
+              <CustomButton
+                variant="outlined"
+                size="small"
+                color="primary"
+                startIcon={<Check />}
+                disabled={!selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0}
+                onClick={_addCard}
+              >
+                {t('create')}
+              </CustomButton>
+            </Stack>
+          </Stack>
+        </CardContent>
+      </Card>
+    </Grid>
+  );
+};
+
+export default AddNewCard;

package/components/routes/home/AnalyticCard.tsx

@@ -0,0 +1,68 @@
+import { CenterFocusWeak, OpenInNew } from '@mui/icons-material';
+import { Box, Card, CardContent, IconButton, Skeleton, Stack, Tooltip, Typography } from '@mui/material';
+import type { Chart } from 'chart.js';
+import { AnalyticContext } from 'components/app/providers/AnalyticProvider';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import type { FC } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import Assessment from '../analytics/widgets/Assessment';
+import Created from '../analytics/widgets/Created';
+import Detection from '../analytics/widgets/Detection';
+import Escalation from '../analytics/widgets/Escalation';
+import Status from '../analytics/widgets/Status';
+
+export interface AnalyticSettings {
+  analyticId: string;
+  type: 'assessment' | 'created' | 'escalation';
+}
+
+const AnalyticCard: FC<AnalyticSettings> = ({ analyticId, type }) => {
+  const { t } = useTranslation();
+  const [analytic, setAnalytic] = useState<Analytic>(null);
+  const { getAnalyticFromId } = useContext(AnalyticContext);
+
+  const chartRef = useRef<Chart>();
+
+  useEffect(() => {
+    getAnalyticFromId(analyticId).then(setAnalytic);
+  }, [analyticId, getAnalyticFromId]);
+
+  return (
+    <Card variant="outlined" sx={{ height: '100%' }}>
+      <CardContent sx={{ height: '100%' }}>
+        <Stack direction="row" spacing={1} alignItems="center">
+          <Typography variant="h6">
+            {analytic?.name ?? <Skeleton variant="text" height="2em" width="100px" />}
+          </Typography>
+          <IconButton size="small" component={Link} to={`/analytics/${analytic?.analytic_id}`}>
+            <OpenInNew fontSize="small" />
+          </IconButton>
+          <FlexOne />
+          {!['assessment', 'escalation'].includes(type) && (
+            <Tooltip title={t('hit.summary.zoom.reset')}>
+              <IconButton onClick={() => chartRef.current?.resetZoom()}>
+                <CenterFocusWeak />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Stack>
+        {{
+          assessment: () => <Assessment ref={chartRef} analytic={analytic} />,
+          created: () => <Created ref={chartRef} analytic={analytic} />,
+          status: () => <Status ref={chartRef} analytic={analytic} />,
+          detection: () => <Detection ref={chartRef} analytic={analytic} />,
+          escalation: () => (
+            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+              <Escalation analytic={analytic} maxWidth="80%" />
+            </Box>
+          )
+        }[type]()}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AnalyticCard;

package/components/routes/home/EntryWrapper.tsx

@@ -0,0 +1,54 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Delete } from '@mui/icons-material';
+import { Box, Grid, IconButton } from '@mui/material';
+import type { FC, PropsWithChildren } from 'react';
+
+const EntryWrapper: FC<PropsWithChildren<{ editing: boolean; id: string; onDelete?: () => void }>> = ({
+  editing,
+  id,
+  children,
+  onDelete
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id, disabled: !editing });
+
+  return (
+    <Grid
+      item
+      ref={setNodeRef}
+      xs={12}
+      md={6}
+      sx={{ position: 'relative' }}
+      style={{ transform: CSS.Translate.toString(transform), transition }}
+    >
+      {editing && (
+        <>
+          <IconButton
+            color="error"
+            sx={theme => ({ position: 'absolute', top: theme.spacing(2), right: theme.spacing(1), zIndex: 10 })}
+            onClick={onDelete}
+          >
+            <Delete fontSize="small" />
+          </IconButton>
+          <Box
+            {...attributes}
+            {...listeners}
+            sx={{
+              zIndex: 9,
+              position: 'absolute',
+              backgroundColor: 'background.paper',
+              opacity: 0.5,
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0
+            }}
+          />
+        </>
+      )}
+      {children}
+    </Grid>
+  );
+};
+
+export default EntryWrapper;

package/components/routes/home/ViewCard.tsx

@@ -0,0 +1,96 @@
+import { OpenInNew } from '@mui/icons-material';
+import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
+import api from 'api';
+import AppListEmpty from 'commons/components/display/AppListEmpty';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import HitBanner from 'components/elements/hit/HitBanner';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import useMyApi from 'components/hooks/useMyApi';
+import type { Hit } from 'models/entities/generated/Hit';
+import type { FC } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+
+export interface ViewSettings {
+  viewId: string;
+  limit: number;
+}
+
+const ViewCard: FC<ViewSettings> = ({ viewId, limit }) => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+
+  const [hits, setHits] = useState<Hit[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
+  const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+
+  useEffect(() => {
+    fetchViews([viewId]);
+  }, [fetchViews, viewId]);
+
+  useEffect(() => {
+    if (!view?.query) {
+      return;
+    }
+
+    const timeout = setTimeout(() => setLoading(true), 200);
+
+    dispatchApi(
+      api.search.hit.post({
+        query: view.query,
+        rows: limit
+      })
+    )
+      .then(res => setHits(res.items ?? []))
+      .finally(() => {
+        clearTimeout(timeout);
+        setLoading(false);
+      });
+  }, [dispatchApi, limit, view?.query]);
+
+  const onClick = useCallback((query: string) => navigate('/hits?query=' + query), [navigate]);
+
+  return (
+    <Card variant="outlined" sx={{ height: '100%' }}>
+      <Stack spacing={1} sx={{ p: 1, minHeight: 100 }}>
+        <Stack direction="row" spacing={1} alignItems="center">
+          <Typography variant="h6">
+            {t(view?.title) || <Skeleton variant="text" height="2em" width="100px" />}
+          </Typography>
+          <IconButton size="small" onClick={() => onClick(view.query)}>
+            <OpenInNew fontSize="small" />
+          </IconButton>
+        </Stack>
+        {loading ? (
+          <>
+            <Skeleton height={150} width="100%" variant="rounded" />
+            <Skeleton height={160} width="100%" variant="rounded" />
+            <Skeleton height={140} width="100%" variant="rounded" />
+          </>
+        ) : hits.length > 0 ? (
+          hits.map(h => (
+            <Card
+              variant="outlined"
+              key={h.howler.id}
+              sx={{ cursor: 'pointer' }}
+              onClick={() => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id)}
+            >
+              <CardContent>
+                <HitBanner layout={HitLayout.DENSE} hit={h} />
+              </CardContent>
+            </Card>
+          ))
+        ) : (
+          <AppListEmpty />
+        )}
+      </Stack>
+    </Card>
+  );
+};
+
+export default ViewCard;