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

package/components/routes/templates/TemplateEditor.tsx

@@ -1,121 +0,0 @@
-import { closestCorners, DndContext, type DragEndEvent } from '@dnd-kit/core';
-import { arrayMove, SortableContext } from '@dnd-kit/sortable';
-import { Add } from '@mui/icons-material';
-import { Button, Stack, Typography } from '@mui/material';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
-import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
-import { get, isObject } from 'lodash-es';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import TemplateDnD from './TemplateDnD';
-
-const TemplateEditor = ({
-  hit,
-  fields,
-  setFields,
-  onRemove,
-  onAdd
-}: {
-  hit: Hit;
-  fields: string[];
-  setFields: (displayFields: string[]) => void;
-  onRemove: (field: string) => void;
-  onAdd: (field: string) => void;
-}) => {
-  const { t } = useTranslation();
-  const { config } = useContext(ApiConfigContext);
-  const { getHitFields } = useContext(FieldContext);
-
-  const [phrase, setPhrase] = useState('');
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-
-  const tryAddField = useCallback(() => {
-    if (suggestions.includes(phrase)) {
-      if (!fields.includes(phrase)) {
-        onAdd(phrase);
-        setPhrase('');
-      }
-    }
-  }, [fields, onAdd, phrase, suggestions]);
-
-  const checkForActions = useCallback(
-    (e: any) => {
-      if (e.isEnter) {
-        tryAddField();
-      }
-    },
-    [tryAddField]
-  );
-
-  useEffect(() => {
-    getHitFields().then(suggestionFields => setSuggestions(suggestionFields.map(f => f.key)));
-  }, [getHitFields]);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-
-      if (active.id !== over.id) {
-        const oldIndex = (fields ?? []).findIndex(entry => entry === active.id);
-        const newIndex = (fields ?? []).findIndex(entry => entry === over.id);
-
-        setFields(arrayMove(fields, oldIndex, newIndex));
-      }
-    },
-    [fields, setFields]
-  );
-
-  return (
-    <Stack spacing={1} width="100%" alignItems="stretch">
-      <DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
-        <SortableContext items={(fields ?? []).map(entry => entry)}>
-          {fields.map(field => {
-            let data = get(hit, field);
-            if (!data) {
-              data = 'N/A';
-            } else if (isObject(data)) {
-              data = JSON.stringify(data);
-            }
-
-            return (
-              <TemplateDnD
-                field={field}
-                data={data}
-                onRemove={onRemove}
-                tooltipTitle={(config.indexes.hit[field].description ?? t('none')).split('\n')[0]}
-                key={field}
-              />
-            );
-          })}
-        </SortableContext>
-      </DndContext>
-
-      <Stack direction="row" sx={{ '& > div': { flex: 1 } }} spacing={1}>
-        <Phrase
-          suggestions={suggestions}
-          value={phrase}
-          onChange={setPhrase}
-          onKeyDown={checkForActions}
-          size="small"
-        />
-        <Button
-          variant="outlined"
-          size="small"
-          sx={{ marginLeft: 'auto' }}
-          startIcon={<Add fontSize="small" />}
-          disabled={!suggestions.includes(phrase) || fields.includes(phrase)}
-          onClick={tryAddField}
-        >
-          {t('button.add')}
-        </Button>
-      </Stack>
-      <Typography variant="caption" color="text.secondary">
-        {t('route.templates.prompt')}
-      </Typography>
-    </Stack>
-  );
-};
-
-export default memo(TemplateEditor);

package/components/routes/templates/TemplateViewer.tsx

@@ -1,285 +0,0 @@
-import {
-  Autocomplete,
-  Button,
-  CircularProgress,
-  Divider,
-  FormControl,
-  LinearProgress,
-  Stack,
-  TextField,
-  ToggleButton,
-  ToggleButtonGroup,
-  Tooltip
-} from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import TemplateEditor from '@cccsaurora/howler-ui/components/routes/templates/TemplateEditor';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { Check, Delete, SsidChart } from '@mui/icons-material';
-import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
-import { DEFAULT_FIELDS } from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import isEqual from 'lodash-es/isEqual';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
-import { useSearchParams } from 'react-router-dom';
-import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
-import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-
-const TemplateViewer = () => {
-  const { t } = useTranslation();
-  const [params, setParams] = useSearchParams();
-  const { dispatchApi } = useMyApi();
-
-  const [templateList, setTemplateList] = useState<Template[]>([]);
-  const [selectedTemplate, setSelectedTemplate] = useState<Template>(null);
-  const [displayFields, setDisplayFields] = useState<string[]>([]);
-
-  const [analytics, setAnalytics] = useState<Analytic[]>([]);
-  const [detections, setDetections] = useState<string[]>([]);
-
-  const [analytic, setAnalytic] = useState<string>(params.get('analytic') ?? '');
-  const [detection, setDetection] = useState<string>(params.get('detection') ?? 'ANY');
-  const [type, setType] = useState<string>((params.get('type') ?? 'personal').replace('readonly', 'global'));
-  const [loading, setLoading] = useState(false);
-  const [templateLoading, setTemplateLoading] = useState(false);
-
-  useEffect(() => {
-    setLoading(true);
-
-    dispatchApi(api.search.analytic.post({ query: 'analytic_id:*', rows: 1000 }), {
-      logError: false,
-      showError: true,
-      throwError: true
-    })
-      .finally(() => setLoading(false))
-      .then(result => result.items)
-      .then(_analytics => {
-        if (!_analytics.some(_analytic => _analytic.name.toLowerCase() === analytic.toLowerCase())) {
-          setAnalytic('');
-        }
-
-        setAnalytics(_analytics);
-      });
-
-    dispatchApi(api.template.get()).then(setTemplateList);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [analytic, dispatchApi]);
-
-  useEffect(() => {
-    if (!analytic) {
-      return;
-    }
-
-    setLoading(true);
-
-    dispatchApi(
-      api.search.grouped.hit.post('howler.detection', {
-        limit: 0,
-        query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"`
-      }),
-      {
-        logError: false,
-        showError: true,
-        throwError: true
-      }
-    )
-      .finally(() => setLoading(false))
-      .then(result => result.items.map(i => i.value))
-      .then(_detections => {
-        if (_detections.length < 1) {
-          setDetection('ANY');
-        }
-
-        if (detection && !_detections.includes(detection)) {
-          setDetection('ANY');
-        }
-
-        setDetections(_detections);
-      });
-  }, [analytic, detection, dispatchApi, params, setParams, type]);
-
-  useEffect(() => {
-    if (analytic && detection) {
-      const template = (templateList ?? []).find(
-        _template =>
-          _template.analytic === analytic &&
-          ((detection === 'ANY' && !_template.detection) || _template.detection === detection) &&
-          _template.type === type
-      );
-
-      if (template) {
-        setSelectedTemplate(template);
-        setDisplayFields(template.keys);
-      } else {
-        setSelectedTemplate(null);
-        setDisplayFields(DEFAULT_FIELDS);
-      }
-    }
-  }, [analytic, detection, templateList, type]);
-
-  useEffect(() => {
-    if (analytic) {
-      params.set('analytic', analytic);
-    } else {
-      params.delete('analytic');
-    }
-
-    if (detection && detection !== 'ANY') {
-      params.set('detection', detection);
-    } else {
-      params.delete('detection');
-    }
-
-    params.set('type', type);
-
-    params.sort();
-
-    setParams(params, {
-      replace: true
-    });
-  }, [analytic, detection, params, setParams, type]);
-
-  const exampleHit = useMemo<Hit>(() => {
-    const _hit = hitsData.GET[Object.keys(hitsData.GET)[0]];
-
-    if (analytic) {
-      _hit.howler.analytic = analytic;
-    }
-
-    return { ..._hit };
-  }, [analytic]);
-
-  const onDelete = useCallback(async () => {
-    await dispatchApi(api.template.del(selectedTemplate.template_id), {
-      logError: false,
-      showError: true,
-      throwError: false
-    });
-    setSelectedTemplate(null);
-    setDisplayFields(DEFAULT_FIELDS);
-  }, [dispatchApi, selectedTemplate?.template_id]);
-
-  const onSave = useCallback(async () => {
-    if (analytic && detection) {
-      try {
-        setTemplateLoading(true);
-        const result = await dispatchApi(
-          selectedTemplate
-            ? api.template.put(selectedTemplate.template_id, displayFields)
-            : api.template.post({
-                analytic,
-                detection: detection !== 'ANY' ? detection : null,
-                type,
-                keys: displayFields
-              }),
-          {
-            logError: false,
-            showError: true,
-            throwError: true
-          }
-        );
-
-        setSelectedTemplate(result);
-        const newList = [result, ...templateList];
-        setTemplateList(newList.filter((v1, i) => newList.findIndex(v2 => v1.template_id === v2.template_id) === i));
-      } finally {
-        setTemplateLoading(false);
-      }
-    }
-  }, [analytic, detection, dispatchApi, displayFields, selectedTemplate, templateList, type]);
-
-  const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
-  const noFieldChange = useMemo(
-    () => displayFields.length < 1 || isEqual(selectedTemplate?.keys ?? DEFAULT_FIELDS, displayFields),
-    [displayFields, selectedTemplate?.keys]
-  );
-
-  return (
-    <PageCenter maxWidth="1500px" textAlign="left" height="100%">
-      <LinearProgress sx={{ mb: 1, opacity: +loading }} />
-      <Stack direction="column" spacing={2} divider={<Divider orientation="horizontal" flexItem />} height="100%">
-        <Stack direction="row" spacing={2} mb={2} alignItems="stretch">
-          <FormControl sx={{ flex: 1, maxWidth: '450px' }}>
-            <Autocomplete
-              id="analytic"
-              options={analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))}
-              getOptionLabel={option => option.name}
-              value={analytics.find(a => a.name === analytic) || null}
-              onChange={(__, newValue) => setAnalytic(newValue ? newValue.name : '')}
-              renderInput={autocompleteAnalyticParams => (
-                <TextField {...autocompleteAnalyticParams} label={t('route.templates.analytic')} size="small" />
-              )}
-            />
-          </FormControl>
-          {!(detections?.length < 2 && detections[0]?.toLowerCase() === 'rule') ? (
-            <FormControl sx={{ flex: 1, maxWidth: '300px' }} disabled={!analytic}>
-              <Autocomplete
-                id="detection"
-                options={['ANY', ...detections.sort()]}
-                getOptionLabel={option => option}
-                value={detection ?? ''}
-                onChange={(__, newValue) => setDetection(newValue)}
-                renderInput={autocompleteDetectionParams => (
-                  <TextField {...autocompleteDetectionParams} label={t('route.templates.detection')} size="small" />
-                )}
-              />
-            </FormControl>
-          ) : (
-            <Tooltip title={t('route.templates.rule.explanation')}>
-              <SsidChart color="info" sx={{ alignSelf: 'center' }} />
-            </Tooltip>
-          )}
-          <ToggleButtonGroup
-            sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}
-            size="small"
-            exclusive
-            value={type}
-            disabled={analyticOrDetectionMissing}
-            onChange={(__, _type) => {
-              if (_type) {
-                setType(_type);
-              }
-            }}
-          >
-            <ToggleButton sx={{ flex: 1 }} value="personal" aria-label="personal">
-              {t('route.templates.personal')}
-            </ToggleButton>
-            <ToggleButton sx={{ flex: 1 }} value="global" aria-label="global">
-              {t('route.templates.global')}
-            </ToggleButton>
-          </ToggleButtonGroup>
-          {selectedTemplate && (
-            <Button variant="outlined" startIcon={<Delete />} onClick={onDelete}>
-              {t('button.delete')}
-            </Button>
-          )}
-          <Button
-            variant="outlined"
-            disabled={analyticOrDetectionMissing || noFieldChange}
-            startIcon={templateLoading ? <CircularProgress size={16} /> : <Check />}
-            onClick={onSave}
-          >
-            {t(!analyticOrDetectionMissing && !noFieldChange ? 'button.save' : 'button.saved')}
-          </Button>
-        </Stack>
-        {analyticOrDetectionMissing ? (
-          <AppInfoPanel i18nKey="route.templates.select" sx={{ width: '100%', alignSelf: 'start' }} />
-        ) : (
-          <TemplateEditor
-            hit={exampleHit}
-            fields={displayFields}
-            setFields={setDisplayFields}
-            onAdd={field => setDisplayFields([...displayFields, field])}
-            onRemove={field => setDisplayFields(displayFields.filter(f => f !== field))}
-          />
-        )}
-      </Stack>
-    </PageCenter>
-  );
-};
-
-export default TemplateViewer;

package/components/routes/templates/Templates.tsx

@@ -1,187 +0,0 @@
-import { Article } from '@mui/icons-material';
-import { Stack, ToggleButton, ToggleButtonGroup, Typography } 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 { TuiListProvider, type TuiListItem, type TuiListItemProps } from '@cccsaurora/howler-ui/components/elements/addons/lists';
-import { TuiListMethodContext, type TuiListMethodsState } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
-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 { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
-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 TemplateCard from './TemplateCard';
-
-const TemplatesBase: FC = () => {
-  const { t } = useTranslation();
-  const { user } = useAppUser<HowlerUser>();
-  const navigate = useNavigate();
-  const { dispatchApi } = useMyApi();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { load } = useContext<TuiListMethodsState<Template>>(TuiListMethodContext);
-  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-
-  const [phrase, setPhrase] = useState<string>('');
-  const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-  const [response, setResponse] = useState<HowlerSearchResponse<Template>>(null);
-  const [types, setTypes] = useState<('personal' | 'global')[]>([]);
-  const [hasError, setHasError] = useState(false);
-  const [searching, setSearching] = useState(false);
-
-  const onSearch = useCallback(async () => {
-    try {
-      setSearching(true);
-      setHasError(false);
-
-      if (phrase) {
-        searchParams.set('phrase', phrase);
-      } else {
-        searchParams.delete('phrase');
-      }
-      setSearchParams(searchParams, { replace: true });
-
-      // Check for the actual search query
-      const phraseQuery = phrase ? `*:*${phrase}*` : '*:*';
-      // Ensure the template should be visible and/or matches the type we are filtering for
-      const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${types.join(' ') || '*'})`;
-
-      setResponse(
-        await dispatchApi(
-          api.search.template.post({
-            query: `${phraseQuery} AND ${typeQuery}`,
-            rows: pageCount,
-            offset
-          })
-        )
-      );
-    } catch (e) {
-      setHasError(true);
-    } finally {
-      setSearching(false);
-    }
-  }, [phrase, setSearchParams, searchParams, user.username, types, dispatchApi, pageCount, offset]);
-
-  // Load the items into list when response changes.
-  // This hook should only trigger when the 'response' changes.
-  useEffect(() => {
-    if (response) {
-      load(
-        response.items.map((item: Template) => ({
-          id: item.template_id,
-          item,
-          selected: false,
-          cursor: false
-        }))
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [response, load]);
-
-  const onPageChange = useCallback(
-    (_offset: number) => {
-      if (_offset !== offset) {
-        searchParams.set('offset', _offset.toString());
-        setSearchParams(searchParams, { replace: true });
-        setOffset(_offset);
-      }
-    },
-    [offset, searchParams, setSearchParams]
-  );
-
-  useEffect(() => {
-    onSearch();
-
-    if (!searchParams.has('offset')) {
-      searchParams.set('offset', '0');
-      setSearchParams(searchParams, { replace: true });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatchApi, types]);
-
-  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]);
-
-  const renderer = useCallback(
-    (item: Template, className?: string) => <TemplateCard template={item} className={className} />,
-    []
-  );
-
-  return (
-    <ItemManager
-      onSearch={onSearch}
-      onPageChange={onPageChange}
-      phrase={phrase}
-      setPhrase={setPhrase}
-      hasError={hasError}
-      searching={searching}
-      searchFilters={
-        <Stack direction="row" spacing={1} alignItems="center">
-          <ToggleButtonGroup
-            sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignSelf: 'start' }}
-            size="small"
-            value={types}
-            onChange={(__, _types) => {
-              if (_types) {
-                setTypes(_types.length < 2 ? _types : []);
-              }
-            }}
-          >
-            <ToggleButton value="personal" aria-label="personal">
-              {t('route.templates.manager.personal')}
-            </ToggleButton>
-            <ToggleButton value="global" aria-label="global">
-              {t('route.templates.manager.global')}
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Stack>
-      }
-      aboveSearch={
-        <Typography
-          sx={theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 })}
-          variant="body2"
-        >
-          {t('route.templates.search.prompt')}
-        </Typography>
-      }
-      renderer={({ item }: TuiListItemProps<Template>, classRenderer) => renderer(item.item, classRenderer())}
-      response={response}
-      onSelect={(item: TuiListItem<Template>) =>
-        navigate(
-          `/templates/view?type=${item.item.type}&analytic=${item.item.analytic}${
-            item.item.detection ? '&detection=' + item.item.detection : ''
-          }`
-        )
-      }
-      onCreate={() => navigate('/templates/view')}
-      createPrompt="route.templates.create"
-      searchPrompt="route.templates.manager.search"
-      createIcon={<Article sx={{ mr: 1 }} />}
-    />
-  );
-};
-
-const Templates = () => {
-  return (
-    <TuiListProvider>
-      <TemplatesBase />
-    </TuiListProvider>
-  );
-};
-
-export default Templates;