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

package/components/routes/analytics/RuleView.tsx

@@ -1,80 +0,0 @@
-import { Check, Edit } from '@mui/icons-material';
-import { Box, CircularProgress, IconButton, Stack, Typography, useTheme } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-dayjs-4';
-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, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import QueryEditor from '../advanced/QueryEditor';
-
-const RuleView: FC<{ analytic: Analytic; setAnalytic: (a: Analytic) => void }> = ({ analytic, setAnalytic }) => {
-  const theme = useTheme();
-  const { t } = useTranslation();
-  const { dispatchApi } = useMyApi();
-  const { showSuccessMessage } = useMySnackbar();
-
-  const [queryLoading, setQueryLoading] = useState(false);
-  const [editing, setEditing] = useState(false);
-  const [editValue, setEditValue] = useState(null);
-
-  const onEdit = useCallback(async () => {
-    try {
-      if (editing) {
-        setQueryLoading(true);
-        const result = await dispatchApi(api.analytic.put(analytic.analytic_id, { rule: editValue }), {
-          showError: true,
-          throwError: true
-        });
-
-        setAnalytic(result);
-
-        showSuccessMessage(t('route.analytics.updated'));
-      } else {
-        setEditValue(analytic.rule);
-      }
-    } finally {
-      setEditing(!editing);
-      setQueryLoading(false);
-    }
-  }, [analytic, dispatchApi, editValue, editing, setAnalytic, showSuccessMessage, t]);
-
-  return (
-    <Stack
-      spacing={2}
-      sx={{
-        height: '100%',
-        pt: 1,
-        px: 1,
-        mt: 1,
-        border: `thin solid ${theme.palette.divider}`,
-        borderRight: `thin solid ${theme.palette.divider}`
-      }}
-    >
-      <Typography variant="h5" sx={{ mt: 2, mb: 1, display: 'flex', flexDirection: 'row' }}>
-        <span>{t('route.analytics.rule.title')}</span>
-        <span style={{ marginLeft: theme.spacing(1), textTransform: 'capitalize' }}>({analytic?.rule_type})</span>
-        <IconButton sx={{ marginLeft: 'auto' }} disabled={queryLoading} onClick={onEdit}>
-          {queryLoading ? (
-            <CircularProgress size={20} />
-          ) : editing ? (
-            <Check fontSize="small" />
-          ) : (
-            <Edit fontSize="small" />
-          )}
-        </IconButton>
-      </Typography>
-      <Box sx={{ flex: 1 }}>
-        <QueryEditor
-          query={editValue ?? analytic?.rule}
-          setQuery={editing && setEditValue}
-          language={analytic?.rule_type?.replace('sigma', 'yaml') as 'lucene' | 'eql' | 'yaml'}
-        />
-      </Box>
-    </Stack>
-  );
-};
-
-export default RuleView;

package/components/routes/analytics/TriageSettings.tsx

@@ -1,146 +0,0 @@
-import {
-  Checkbox,
-  Divider,
-  Grid,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Tooltip,
-  Typography
-} from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { EditOptions } from '@cccsaurora/howler-ui/api/analytic';
-import 'chartjs-adapter-dayjs-4';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import EditRow from '@cccsaurora/howler-ui/components/elements/EditRow';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { capitalize, uniq } from 'lodash-es';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import type { FC } from 'react';
-import { useCallback, useContext, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const TriageSettings: FC<{ analytic: Analytic; setAnalytic: (a: Analytic) => void }> = ({ analytic, setAnalytic }) => {
-  const { dispatchApi } = useMyApi();
-  const { t } = useTranslation();
-  const { config } = useContext(ApiConfigContext);
-
-  const [loading, setLoading] = useState(false);
-
-  const updateAnalytic = useCallback(
-    async (changes: EditOptions) => {
-      try {
-        setLoading(true);
-
-        const result = await dispatchApi(api.analytic.put(analytic.analytic_id, changes), {
-          throwError: true,
-          showError: true
-        });
-
-        setAnalytic(result);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [analytic?.analytic_id, dispatchApi, setAnalytic]
-  );
-
-  const selectedAssessments: string[] = useMemo(
-    () => analytic?.triage_settings?.valid_assessments ?? config.lookups?.['howler.assessment'] ?? [],
-    [analytic?.triage_settings?.valid_assessments, config.lookups]
-  );
-
-  return (
-    <Stack spacing={2} pt={1}>
-      <Divider flexItem />
-      <TableContainer
-        sx={{
-          '& table tr:last-child td': {
-            borderBottom: 0
-          }
-        }}
-        component={Paper}
-      >
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell colSpan={3}>
-                <Typography variant="h6">{t('route.analytics.triage.title')}</Typography>
-              </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <EditRow
-              titleKey="route.analytics.triage.rationale"
-              descriptionKey="route.analytics.triage.rationale.description"
-              value={analytic?.triage_settings?.skip_rationale ?? false}
-              type="checkbox"
-              onEdit={async value =>
-                updateAnalytic({
-                  triage_settings: { skip_rationale: JSON.parse(value) }
-                })
-              }
-            />
-            <TableRow>
-              <TableCell sx={{ width: '100%', borderBottom: 0, paddingBottom: '0 !important', whiteSpace: 'nowrap' }}>
-                {t('route.analytics.triage.assessments')}
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell colSpan={3} sx={{ borderBottom: 0, paddingTop: '0 !important' }}>
-                <Typography variant="caption" color="text.secondary">
-                  {t('route.analytics.triage.assessments.description')}
-                </Typography>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell colSpan={3}>
-                <Grid container spacing={1}>
-                  {config.lookups?.['howler.assessment']?.map(assessment => (
-                    <Grid item key={assessment}>
-                      <Stack
-                        direction="row"
-                        alignItems="center"
-                        spacing={1}
-                        sx={theme => ({
-                          border: 'thin solid',
-                          borderColor: 'divider',
-                          p: 1,
-                          borderRadius: theme.shape.borderRadius
-                        })}
-                      >
-                        <Tooltip title={t(`hit.details.asessments.${assessment}.description`)}>
-                          <Typography component="span">{assessment.split('-').map(capitalize).join(' ')}</Typography>
-                        </Tooltip>
-                        <Checkbox
-                          checked={selectedAssessments.includes(assessment) ?? true}
-                          onChange={(_event, checked) =>
-                            updateAnalytic({
-                              triage_settings: {
-                                valid_assessments: !checked
-                                  ? selectedAssessments.filter(_assessment => assessment !== _assessment)
-                                  : uniq([...selectedAssessments, assessment])
-                              }
-                            })
-                          }
-                          disabled={loading}
-                        />
-                      </Stack>
-                    </Grid>
-                  ))}
-                </Grid>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </Stack>
-  );
-};
-
-export default TriageSettings;

package/components/routes/analytics/widgets/Assessment.tsx

@@ -1,71 +0,0 @@
-import { Box, Skeleton, Typography } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerFacetSearchResponse } from '@cccsaurora/howler-ui/api/search/facet';
-import 'chartjs-adapter-dayjs-4';
-import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import { forwardRef, useEffect, useState } from 'react';
-import { Bar } from 'react-chartjs-2';
-import { useTranslation } from 'react-i18next';
-import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
-
-const Assessment = forwardRef<any, { analytic: Analytic }>(({ analytic }, ref) => {
-  const { t } = useTranslation();
-  const { bar } = useMyChart();
-
-  const [loading, setLoading] = useState(false);
-  const [assessmentData, setAssessmentData] = useState<HowlerFacetSearchResponse>({});
-
-  useEffect(() => {
-    if (!analytic) {
-      return;
-    }
-
-    setLoading(true);
-
-    api.search.facet.hit
-      .post({
-        fields: ['howler.assessment'],
-        query: `howler.analytic:("${analytic.name}")`
-      })
-      .then(data => setAssessmentData(data['howler.assessment']))
-      .finally(() => setLoading(false));
-  }, [analytic]);
-
-  if (!loading && assessmentData.length < 1) {
-    return (
-      <Box sx={{ minHeight: '300px', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Typography
-          variant="h4"
-          sx={theme => ({
-            color: theme.palette.divider
-          })}
-        >
-          {t('no.data')}
-        </Typography>
-      </Box>
-    );
-  }
-
-  return analytic && !loading ? (
-    <Bar
-      ref={ref as any}
-      options={bar('route.analytics.assessment.title', '')}
-      data={{
-        labels: Object.keys(assessmentData),
-        datasets: [
-          {
-            label: '',
-            data: Object.values(assessmentData),
-            borderColor: Object.keys(assessmentData).map(_analytic => stringToColor(_analytic)),
-            backgroundColor: Object.keys(assessmentData).map(_analytic => stringToColor(_analytic))
-          }
-        ]
-      }}
-    />
-  ) : (
-    <Skeleton variant="rounded" height={200} />
-  );
-});
-
-export default Assessment;

package/components/routes/analytics/widgets/Created.tsx

@@ -1,61 +0,0 @@
-import { Skeleton } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-dayjs-4';
-import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import { forwardRef, useEffect, useState } from 'react';
-import { Line } from 'react-chartjs-2';
-import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
-
-const Created = forwardRef<any, { analytic: Analytic }>(({ analytic }, ref) => {
-  const { line } = useMyChart();
-
-  const [loading, setLoading] = useState(false);
-  const [ingestionData, setIngestionData] = useState<{ [timestamp: string]: number }>({});
-
-  useEffect(() => {
-    if (!analytic) {
-      return;
-    }
-
-    setLoading(true);
-
-    api.search.histogram.hit
-      .post('timestamp', {
-        query: `howler.analytic:("${analytic.name}")`,
-        start: 'now-3M',
-        gap: '1d',
-        mincount: 0
-      })
-      .then(setIngestionData)
-      .finally(() => setLoading(false));
-  }, [analytic]);
-
-  return analytic && !loading ? (
-    <Line
-      ref={ref as any}
-      options={line('route.analytics.ingestion.title') as any}
-      data={{
-        datasets: [
-          {
-            label: analytic?.name,
-            data: Object.keys(ingestionData).map(time => ({
-              x: new Date(time).getTime(),
-              y: ingestionData[time]
-            })),
-            borderColor: stringToColor(analytic?.name),
-            backgroundColor: 'transparent',
-            pointBackgroundColor: Object.keys(ingestionData).map(time =>
-              ingestionData[time] ? stringToColor(analytic?.name) : 'transparent'
-            ),
-            pointBorderWidth: Object.keys(ingestionData).map(time => (ingestionData[time] ? 2 : 0))
-          }
-        ]
-      }}
-    />
-  ) : (
-    <Skeleton variant="rounded" height={200} />
-  );
-});
-
-export default Created;

package/components/routes/analytics/widgets/Detection.tsx

@@ -1,11 +0,0 @@
-import 'chartjs-adapter-dayjs-4';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import { forwardRef } from 'react';
-import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
-import Stacked from './Stacked';
-
-const Detection = forwardRef<any, { analytic: Analytic; maxWidth?: string }>(({ analytic }, ref) => {
-  return <Stacked ref={ref as any} analytic={analytic} field="howler.detection" color={stringToColor} />;
-});
-
-export default Detection;

package/components/routes/analytics/widgets/Escalation.tsx

@@ -1,65 +0,0 @@
-import { Skeleton, useTheme } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerFacetSearchResponse } from '@cccsaurora/howler-ui/api/search/facet';
-import 'chartjs-adapter-dayjs-4';
-import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import { forwardRef, useEffect, useMemo, useState } from 'react';
-import { Doughnut } from 'react-chartjs-2';
-import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
-
-const Escalation = forwardRef<any, { analytic: Analytic; maxWidth?: string }>(({ analytic, maxWidth = '45%' }, ref) => {
-  const theme = useTheme();
-  const { doughnut } = useMyChart();
-
-  const [loading, setLoading] = useState(false);
-  const [escalationData, setEscalationData] = useState<HowlerFacetSearchResponse>({});
-
-  const escalationColors = useMemo(
-    () =>
-      Object.keys(escalationData).map(e =>
-        ESCALATION_COLORS[e] ? theme.palette[ESCALATION_COLORS[e]].main : 'rgba(255, 255, 255, 0.16)'
-      ),
-    [escalationData, theme.palette]
-  );
-
-  useEffect(() => {
-    if (!analytic) {
-      return;
-    }
-
-    setLoading(true);
-
-    api.search.facet.hit
-      .post({
-        query: `howler.analytic:("${analytic.name}")`,
-        fields: ['howler.escalation']
-      })
-      .then(data => setEscalationData(data['howler.escalation']))
-      .finally(() => setLoading(false));
-  }, [analytic]);
-
-  return analytic && !loading ? (
-    <div style={{ maxWidth }}>
-      <Doughnut
-        ref={ref as any}
-        options={doughnut('route.analytics.escalation.title', '')}
-        data={{
-          labels: Object.keys(escalationData),
-          datasets: [
-            {
-              label: analytic?.name,
-              data: Object.values(escalationData),
-              borderColor: escalationColors,
-              backgroundColor: escalationColors
-            }
-          ]
-        }}
-      />
-    </div>
-  ) : (
-    <Skeleton variant="rounded" height={200} width="45%" />
-  );
-});
-
-export default Escalation;

package/components/routes/analytics/widgets/Stacked.tsx

@@ -1,109 +0,0 @@
-import { Skeleton } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { ChartDataset, ChartOptions } from 'chart.js';
-import 'chartjs-adapter-dayjs-4';
-import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
-import sum from 'lodash-es/sum';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
-import { Line } from 'react-chartjs-2';
-
-const Stacked = forwardRef<
-  any,
-  {
-    analytic: Analytic;
-    field: string;
-    color?: (value: string) => string;
-  }
->(({ analytic, field, color }, ref) => {
-  const { line } = useMyChart();
-
-  const [loading, setLoading] = useState(false);
-  const [datasets, setDatasets] = useState<ChartDataset<'line'>[]>([]);
-
-  const fetchData = useCallback(async () => {
-    try {
-      setLoading(true);
-
-      const result = await api.search.facet.hit.post({
-        query: `howler.analytic:("${analytic.name}")`,
-        fields: [field]
-      });
-
-      const values = Object.entries(result[field])
-        .sort(([__, valA], [___, valB]) => valB - valA)
-        .map(([key]) => key);
-
-      setDatasets(
-        await Promise.all(
-          values.map(async _value => {
-            const ingestionData = await api.search.histogram.hit.post('timestamp', {
-              query: `howler.analytic:("${analytic.name}") AND ${field}:("${_value}")`,
-              start: 'now-3M',
-              gap: '1d',
-              mincount: 0
-            });
-
-            return {
-              label: _value,
-              fill: true,
-              data: Object.keys(ingestionData).map((time, index, arr) => ({
-                x: new Date(time).getTime(),
-                y: sum(arr.map(key => ingestionData[key]).slice(0, index))
-              })),
-              borderColor: color(_value),
-              backgroundColor: color(_value),
-              pointBackgroundColor: 'transparent',
-              pointBorderWidth: 0
-            };
-          })
-        )
-      );
-    } finally {
-      setLoading(false);
-    }
-  }, [analytic?.name, color, field]);
-
-  useEffect(() => {
-    if (!analytic) {
-      return;
-    }
-
-    fetchData();
-  }, [analytic, fetchData]);
-
-  const options: ChartOptions<'line'> = useMemo(() => {
-    const baseOptions = line(`route.analytics.${field.replace('howler.', '')}.title`);
-
-    return {
-      ...baseOptions,
-      plugins: {
-        ...baseOptions.plugins,
-        tooltip: {
-          mode: 'index'
-        }
-      },
-      scales: {
-        ...baseOptions.scales,
-        y: {
-          ...baseOptions.scales.y,
-          stacked: true
-        }
-      }
-    };
-  }, [field, line]);
-
-  return analytic && !loading ? (
-    <Line
-      ref={ref as any}
-      options={options}
-      data={{
-        datasets
-      }}
-    />
-  ) : (
-    <Skeleton variant="rounded" height={200} />
-  );
-});
-
-export default Stacked;

package/components/routes/analytics/widgets/Status.tsx

@@ -1,21 +0,0 @@
-import { useTheme } from '@mui/material';
-import 'chartjs-adapter-dayjs-4';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import { forwardRef } from 'react';
-import { STATUS_COLORS } from '@cccsaurora/howler-ui/utils/constants';
-import Stacked from './Stacked';
-
-const Status = forwardRef<any, { analytic: Analytic }>(({ analytic }, ref) => {
-  const theme = useTheme();
-
-  return (
-    <Stacked
-      ref={ref as any}
-      analytic={analytic}
-      field="howler.status"
-      color={status => (status === 'on-hold' ? theme.palette.grey : theme.palette[STATUS_COLORS[status]].main)}
-    />
-  );
-});
-
-export default Status;

package/components/routes/dossiers/DossierCard.tsx

@@ -1,48 +0,0 @@
-import { Delete, Language, Person } from '@mui/icons-material';
-import { Box, Card, IconButton, Stack, Tooltip, Typography } from '@mui/material';
-import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
-import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
-import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
-import type { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const DossierCard: FC<{
-  dossier: Dossier;
-  className?: string;
-  onDelete?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void;
-}> = ({ dossier, className, onDelete }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Card key={dossier.dossier_id} variant="outlined" sx={{ p: 1, mb: 1 }} className={className}>
-      <Stack direction="row" alignItems="center" spacing={1}>
-        <Stack>
-          <Typography variant="body1" display="flex" alignItems="start">
-            <Tooltip title={t(`route.dossiers.manager.${dossier.type}`)}>
-              {dossier.type === 'personal' ? <Person fontSize="small" /> : <Language fontSize="small" />}
-            </Tooltip>
-            <Box component="span" ml={1}>
-              {dossier.title}
-            </Box>
-          </Typography>
-          <Typography variant="caption" color="text.secondary">
-            <code>{dossier.query}</code>
-          </Typography>
-        </Stack>
-        <FlexOne />
-
-        <HowlerAvatar sx={{ height: '24px', width: '24px' }} userId={dossier.owner} />
-
-        {onDelete && (
-          <Tooltip title={t('route.dossiers.manager.delete')}>
-            <IconButton onClick={e => onDelete(e, dossier.dossier_id)}>
-              <Delete />
-            </IconButton>
-          </Tooltip>
-        )}
-      </Stack>
-    </Card>
-  );
-};
-
-export default DossierCard;