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

package/components/routes/analytics/RuleView.tsx

@@ -0,0 +1,80 @@
+import { Check, Edit } from '@mui/icons-material';
+import { Box, CircularProgress, IconButton, Stack, Typography, useTheme } from '@mui/material';
+import api from 'api';
+import 'chartjs-adapter-dayjs-4';
+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, 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

@@ -0,0 +1,146 @@
+import {
+  Checkbox,
+  Divider,
+  Grid,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import api from 'api';
+import type { EditOptions } from 'api/analytic';
+import 'chartjs-adapter-dayjs-4';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import EditRow from 'components/elements/EditRow';
+import useMyApi from 'components/hooks/useMyApi';
+import { capitalize, uniq } from 'lodash-es';
+import type { Analytic } from '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

@@ -0,0 +1,71 @@
+import { Box, Skeleton, Typography } from '@mui/material';
+import api from 'api';
+import type { HowlerFacetSearchResponse } from 'api/search/facet';
+import 'chartjs-adapter-dayjs-4';
+import useMyChart from 'components/hooks/useMyChart';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import { forwardRef, useEffect, useState } from 'react';
+import { Bar } from 'react-chartjs-2';
+import { useTranslation } from 'react-i18next';
+import { stringToColor } from '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

@@ -0,0 +1,61 @@
+import { Skeleton } from '@mui/material';
+import api from 'api';
+import 'chartjs-adapter-dayjs-4';
+import useMyChart from 'components/hooks/useMyChart';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import { forwardRef, useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+import { stringToColor } from '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

@@ -0,0 +1,11 @@
+import 'chartjs-adapter-dayjs-4';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import { forwardRef } from 'react';
+import { stringToColor } from '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

@@ -0,0 +1,65 @@
+import { Skeleton, useTheme } from '@mui/material';
+import api from 'api';
+import type { HowlerFacetSearchResponse } from 'api/search/facet';
+import 'chartjs-adapter-dayjs-4';
+import useMyChart from 'components/hooks/useMyChart';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { Doughnut } from 'react-chartjs-2';
+import { ESCALATION_COLORS } from '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

@@ -0,0 +1,109 @@
+import { Skeleton } from '@mui/material';
+import api from 'api';
+import type { ChartDataset, ChartOptions } from 'chart.js';
+import 'chartjs-adapter-dayjs-4';
+import useMyChart from 'components/hooks/useMyChart';
+import sum from 'lodash-es/sum';
+import type { Analytic } from '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

@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material';
+import 'chartjs-adapter-dayjs-4';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import { forwardRef } from 'react';
+import { STATUS_COLORS } from '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

@@ -0,0 +1,48 @@
+import { Delete, Language, Person } from '@mui/icons-material';
+import { Box, Card, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import HowlerAvatar from 'components/elements/display/HowlerAvatar';
+import type { Dossier } from '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;