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

package/components/routes/action/shared/OperationStep.tsx

@@ -0,0 +1,219 @@
+import {
+  Alert,
+  AlertTitle,
+  Autocomplete,
+  CircularProgress,
+  InputAdornment,
+  LinearProgress,
+  Stack,
+  TextField
+} from '@mui/material';
+import api from 'api';
+import type { HowlerSearchResponse } from 'api/search';
+import useMyApi from 'components/hooks/useMyApi';
+import { capitalize } from 'lodash-es';
+import type { ActionOperationStep } from 'models/ActionTypes';
+import type { Hit } from 'models/entities/generated/Hit';
+import type { FC } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { checkArgsAreFilled, getArgsByContext, getOptionsByContext } from 'utils/actionUtils';
+import { sanitizeLuceneQuery } from 'utils/stringUtils';
+import Throttler from 'utils/Throttler';
+
+const THROTTLER = new Throttler(500);
+
+const OperationStep: FC<{
+  readonly?: boolean;
+  loading?: boolean;
+  query: string;
+  step: ActionOperationStep;
+  values: string;
+  setValues?: (values: string) => void;
+}> = ({ step, query, values, setValues, readonly, loading }) => {
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+
+  const [validating, setValidating] = useState(false);
+  const [warnResponse, setWarnResponse] = useState<HowlerSearchResponse<Hit>>(null);
+  const [errorResponse, setErrorResponse] = useState<HowlerSearchResponse<Hit>>(null);
+
+  const filled = useMemo(() => checkArgsAreFilled(step, values), [step, values]);
+  const validationStatus = useMemo(
+    () =>
+      errorResponse?.total > 0
+        ? 'error'
+        : warnResponse?.total > 0
+          ? 'warning'
+          : errorResponse || warnResponse
+            ? 'success'
+            : null,
+    [errorResponse, warnResponse]
+  );
+
+  const args = useMemo(() => getArgsByContext(step.args, values), [step.args, values]);
+  const parsedValues = useMemo(() => JSON.parse(values), [values]);
+
+  /**
+   * Substitute the current user values into a given validation query
+   */
+  const substitute = useCallback(
+    (_query: string) =>
+      Object.entries(values).reduce((q, [key, val]) => q.replace(`$${key}`, sanitizeLuceneQuery(val)), _query),
+    [values]
+  );
+
+  /**
+   * Get a well formatted label based on the argument key
+   */
+  const getLabel = useCallback(
+    (argId?: string) =>
+      (argId ?? '')
+        .replace(/[-_]/g, ' ')
+        .split(' ')
+        .map(part => capitalize(part))
+        .join(' '),
+    []
+  );
+
+  /**
+   * Run validation on the data provided for this step of the operation
+   */
+  const validate = useCallback(async () => {
+    if (!query || readonly) {
+      return;
+    }
+
+    try {
+      setValidating(true);
+
+      if (step.validation?.warn) {
+        const result = await dispatchApi(
+          api.search.hit.post({
+            query: `(${query}) AND (${substitute(step.validation.warn.query)})`
+          }),
+          { throwError: false }
+        );
+
+        setWarnResponse(result);
+      }
+
+      if (step.validation?.error) {
+        const result = await dispatchApi(
+          api.search.hit.post({
+            query: `(${query}) AND (${substitute(step.validation.error.query)})`
+          }),
+          { throwError: false }
+        );
+
+        setErrorResponse(result);
+      }
+    } finally {
+      setValidating(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step.validation?.error, step.validation?.warn, dispatchApi, query, substitute]);
+
+  useEffect(() => {
+    if (validating || !filled || !step.validation) {
+      return;
+    }
+
+    THROTTLER.debounce(validate);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filled, validate, query, values]);
+
+  return (
+    <Stack spacing={2}>
+      {args.map(arg => {
+        if (step.options?.[arg]) {
+          const opts = getOptionsByContext(step.options, arg, values);
+
+          return (
+            <Autocomplete
+              disablePortal
+              key={arg}
+              options={opts}
+              disabled={readonly || loading}
+              value={parsedValues?.[arg] || ''}
+              renderInput={params => (
+                <TextField
+                  {...params}
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: loading && (
+                      <InputAdornment position="start">
+                        <CircularProgress size={24} />
+                      </InputAdornment>
+                    )
+                  }}
+                  label={getLabel(arg)}
+                />
+              )}
+              onChange={(_, value) => setValues(JSON.stringify({ ...parsedValues, [arg]: value }))}
+            />
+          );
+        } else {
+          return (
+            <TextField
+              key={arg}
+              disabled={readonly}
+              value={parsedValues?.[arg] || ''}
+              onChange={e => setValues(JSON.stringify({ ...parsedValues, [arg]: e.target.value }))}
+              label={getLabel(arg)}
+            />
+          );
+        }
+      })}
+      {filled && (
+        <>
+          {validating && <LinearProgress />}
+          {validationStatus && (
+            <Alert
+              variant="outlined"
+              severity={validationStatus}
+              sx={{
+                '& > code': { fontSize: '0.9em' },
+                '& a': {
+                  color: validationStatus,
+                  '&:visited': {
+                    color: validationStatus
+                  },
+                  '&:not(:hover)': { textDecoration: 'none' }
+                }
+              }}
+            >
+              <AlertTitle>
+                {t(
+                  (validationStatus === 'error' ? step.validation.error?.message : step.validation.warn?.message) ??
+                    `route.actions.alert.${validationStatus}`,
+                  {
+                    count: validationStatus === 'error' ? errorResponse.total : warnResponse?.total
+                  }
+                )}
+              </AlertTitle>
+              {validationStatus !== 'success' && (
+                <Link
+                  to={`/hits?query=${encodeURIComponent(
+                    errorResponse?.total
+                      ? substitute(step.validation.error.query)
+                      : warnResponse?.total && substitute(step.validation.warn.query)
+                  )}`}
+                >
+                  {errorResponse?.total ? (
+                    <code>{substitute(step.validation.error.query)}</code>
+                  ) : (
+                    warnResponse?.total && <code>{substitute(step.validation.warn.query)}</code>
+                  )}
+                </Link>
+              )}
+            </Alert>
+          )}
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default OperationStep;

package/components/routes/action/useMyActionFunctions.tsx

@@ -0,0 +1,225 @@
+import { Terminal } from '@mui/icons-material';
+import { LinearProgress, Stack } from '@mui/material';
+import api from 'api';
+import type { HowlerSearchResponse } from 'api/search';
+import type { RecievedDataType } from 'components/app/providers/SocketProvider';
+import { SocketContext } from 'components/app/providers/SocketProvider';
+import useMyApi from 'components/hooks/useMyApi';
+import useMySnackbar from 'components/hooks/useMySnackbar';
+import type { ActionReport } from 'models/ActionTypes';
+import type { Hit } from 'models/entities/generated/Hit';
+import type { Operation } from 'models/entities/generated/Operation';
+import { useSnackbar, type SnackbarKey } from 'notistack';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { v4 as uuid } from 'uuid';
+
+const useMyActionFunctions = () => {
+  const { t } = useTranslation();
+  const { closeSnackbar } = useSnackbar();
+  const { showErrorMessage, showSuccessMessage, showInfoMessage } = useMySnackbar();
+  const { dispatchApi } = useMyApi();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const params = useParams();
+  const { addListener, removeListener } = useContext(SocketContext);
+
+  const [loading, setLoading] = useState(false);
+  const [response, setResponse] = useState<HowlerSearchResponse<Hit>>(null);
+  const [responseQuery, setResponseQuery] = useState('');
+  const [progress, setProgress] = useState<[number, number]>([0, 0]);
+  const [requestId, setRequestId] = useState<string>(null);
+  const [report, setReport] = useState<ActionReport>();
+
+  const handler = useCallback(
+    (data: RecievedDataType<{ request_id: string; processed: number; total: number }>) => {
+      if (data.type === 'action' && data.request_id === requestId) {
+        setProgress([data.processed, data.total]);
+      }
+    },
+    [requestId]
+  );
+
+  const onSearch = useCallback(
+    async (query: string) => {
+      const _response = await dispatchApi(
+        api.search.hit.post({
+          query,
+          rows: 3,
+          track_total_hits: true
+        })
+      );
+
+      setResponse(_response);
+      setResponseQuery(query);
+    },
+    [dispatchApi]
+  );
+
+  useEffect(() => {
+    addListener<{ processed: number; total: number }>('action', handler);
+
+    return () => removeListener('action');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handler]);
+
+  return {
+    loading,
+    setLoading,
+    response,
+    setResponse,
+    responseQuery,
+    report,
+    progress,
+    onSearch,
+    saveAction: useCallback(
+      async (name: string, query: string, operations: Operation[], triggers: string[]) => {
+        try {
+          if (!query) {
+            showErrorMessage(t('route.actions.query.empty'));
+            return;
+          }
+
+          if (params.id) {
+            setLoading(true);
+            const result = await dispatchApi(
+              api.action.put(params.id, {
+                name,
+                query,
+                operations
+              }),
+              { showError: true, throwError: false }
+            );
+
+            if (result) {
+              navigate(`/action/${params.id}`);
+            }
+          } else {
+            setLoading(true);
+            const newAction = await dispatchApi(
+              api.action.post({
+                name,
+                query,
+                operations,
+                triggers
+              }),
+              { showError: true, throwError: false }
+            );
+
+            if (newAction) {
+              navigate(`/action/${newAction.action_id}`);
+            }
+          }
+        } finally {
+          setLoading(false);
+        }
+      },
+      [dispatchApi, navigate, params.id, showErrorMessage, t]
+    ),
+    submitAction: useCallback(
+      async (query: string, operations: Operation[]): Promise<void> => {
+        if (!query) {
+          showErrorMessage(t('route.actions.query.empty'));
+          return;
+        }
+
+        setLoading(true);
+        const reqId = uuid();
+        setRequestId(reqId);
+        setReport(null);
+
+        try {
+          setReport(
+            await dispatchApi(
+              api.action.execute.post({
+                request_id: reqId,
+                query,
+                operations
+              }),
+              { throwError: false, showError: true }
+            )
+          );
+        } finally {
+          setLoading(false);
+          setRequestId(null);
+          setProgress([0, 0]);
+          onSearch(query);
+        }
+      },
+      [dispatchApi, onSearch, showErrorMessage, t]
+    ),
+    executeAction: useCallback(
+      async (actionId: string, query?: string) => {
+        setLoading(true);
+        const reqId = uuid();
+        setRequestId(reqId);
+        setReport(null);
+
+        let key: SnackbarKey = null;
+        try {
+          const action = api.search.action.post({ query: `action_id:${actionId}`, rows: 1 });
+
+          key = showInfoMessage(
+            <Stack spacing={1} width="100%" mb={-2} pb={1}>
+              <Stack direction="row" spacing={1} px="20px" pt="6px" pb="2px">
+                <Terminal fontSize="small" sx={{ mr: 2 }} />
+                <span>
+                  <Trans i18nKey="actions.running" values={{ action: (await action).items[0]?.name || t('unknown') }} />
+                </span>
+              </Stack>
+              <LinearProgress color="inherit" sx={theme => ({ borderRadius: theme.shape.borderRadius })} />
+            </Stack>,
+            0,
+            {
+              persist: true,
+              hideIconVariant: true,
+              style: { padding: 0, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }
+            }
+          );
+
+          setReport(
+            await dispatchApi(
+              api.action.execute.post({
+                request_id: reqId,
+                query,
+                action_id: actionId
+              }),
+              { throwError: false, showError: true }
+            )
+          );
+
+          showSuccessMessage(
+            <Trans i18nKey="actions.succeeded" values={{ action: (await action).items[0]?.name || t('unknown') }} />
+          );
+        } finally {
+          if (key) {
+            closeSnackbar(key);
+          }
+          setLoading(false);
+          setRequestId(null);
+          setProgress([0, 0]);
+        }
+      },
+      [closeSnackbar, dispatchApi, showInfoMessage, showSuccessMessage, t]
+    ),
+    deleteAction: useCallback(
+      async (actionId: string) => {
+        setLoading(true);
+
+        try {
+          await dispatchApi(api.action.del(actionId));
+
+          if (location.pathname.endsWith(actionId)) {
+            navigate('/action');
+          }
+        } finally {
+          setLoading(false);
+        }
+      },
+      [dispatchApi, location.pathname, navigate]
+    )
+  };
+};
+
+export default useMyActionFunctions;

package/components/routes/action/view/ActionDetails.tsx

@@ -0,0 +1,205 @@
+import { Delete, Edit, PlayCircleOutline, Search } from '@mui/icons-material';
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  IconButton,
+  LinearProgress,
+  Stack,
+  Typography
+} from '@mui/material';
+import api from 'api';
+import { useAppUser } from 'commons/components/app/hooks';
+import PageCenter from 'commons/components/pages/PageCenter';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import Phrase from 'components/elements/addons/search/phrase/Phrase';
+import HowlerAvatar from 'components/elements/display/HowlerAvatar';
+import useMyApi from 'components/hooks/useMyApi';
+import OperationEntry from 'components/routes/action/shared/OperationEntry';
+import type { ActionOperation } from 'models/ActionTypes';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { Action } from 'models/entities/generated/Action';
+import howlerPluginStore from 'plugins/store';
+import { useCallback, useEffect, useState, type ChangeEventHandler } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { Link, useParams } from 'react-router-dom';
+import QueryResultText from '../../../elements/display/QueryResultText';
+import type { CustomActionProps } from '../edit/ActionEditor';
+import ActionReportDisplay from '../shared/ActionReportDisplay';
+import useMyActionFunctions from '../useMyActionFunctions';
+
+const ActionDetails = () => {
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+  const params = useParams();
+  const { user } = useAppUser<HowlerUser>();
+  const pluginStore = usePluginStore();
+
+  const { response, onSearch, loading, setLoading, executeAction, deleteAction, progress, report } =
+    useMyActionFunctions();
+
+  const [operations, setOperations] = useState<ActionOperation[]>([]);
+  const [action, setAction] = useState<Action>();
+
+  const onTriggerChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    async e => {
+      let newTriggers = action.triggers ?? [];
+
+      if (e.target.checked && !newTriggers.includes(e.target.name)) {
+        newTriggers.push(e.target.name);
+      } else if (!e.target.checked && newTriggers.includes(e.target.name)) {
+        newTriggers = newTriggers.filter(_t => _t !== e.target.name);
+      }
+
+      setLoading(true);
+
+      try {
+        await dispatchApi(
+          api.action.patch(action.action_id, {
+            triggers: newTriggers
+          })
+        );
+
+        setAction({ ...action, triggers: newTriggers });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [action, dispatchApi, setLoading]
+  );
+
+  useEffect(() => {
+    setLoading(true);
+
+    Promise.all([
+      dispatchApi(api.action.operations.get()).then(setOperations),
+      dispatchApi(api.action.get(params.id).then(setAction))
+    ]).finally(() => setLoading(false));
+  }, [dispatchApi, params.id, setLoading]);
+
+  useEffect(() => {
+    if (action?.query) {
+      onSearch(action?.query);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [action?.query]);
+
+  return (
+    <PageCenter maxWidth="1500px" textAlign="left" height="100%">
+      <Stack spacing={1}>
+        <Stack direction="row" justifyContent="space-between">
+          <Typography variant="h5">{action?.name}</Typography>
+          {action?.owner_id && <HowlerAvatar sx={{ width: 32, height: 32 }} userId={action.owner_id} />}
+        </Stack>
+        <Phrase
+          fullWidth
+          value={action?.query}
+          disabled
+          size="small"
+          onChange={() => {}}
+          startAdornment={
+            <IconButton onClick={() => onSearch(action?.query)}>
+              <Search fontSize="small" />
+            </IconButton>
+          }
+        />
+        <Stack direction="row" alignItems="center" spacing={1}>
+          {response && <QueryResultText count={response.total} query={action?.query} />}
+          <FlexOne />
+          {(action?.owner_id === user.username || user.roles?.includes('admin')) && (
+            <Button
+              startIcon={<Delete />}
+              size="small"
+              variant="outlined"
+              color="error"
+              onClick={() => deleteAction(action?.action_id)}
+            >
+              {t('delete')}
+            </Button>
+          )}
+          <Button
+            startIcon={<PlayCircleOutline />}
+            size="small"
+            variant="outlined"
+            color="success"
+            onClick={() => executeAction(action?.action_id)}
+          >
+            {t('route.actions.execute')}
+          </Button>
+          {(action?.owner_id === user.username || user.roles?.includes('admin')) && (
+            <Button
+              startIcon={<Edit />}
+              size="small"
+              variant="outlined"
+              component={Link}
+              to={`/action/${params.id}/edit`}
+            >
+              {t('route.actions.edit')}
+            </Button>
+          )}
+        </Stack>
+        {user.roles.includes('automation_advanced') && (
+          <FormGroup>
+            <Stack direction="row" spacing={1}>
+              {action?.operations
+                ?.map(a => (operations ?? []).find(_action => _action.id === a.operation_id)?.triggers ?? [])
+                .reduce((acc, triggers) => acc.filter(_t => triggers.includes(_t)))
+                .map(trigger => (
+                  <FormControlLabel
+                    key={trigger}
+                    control={
+                      <Checkbox
+                        name={trigger}
+                        onChange={onTriggerChange}
+                        checked={action?.triggers?.includes(trigger) ?? false}
+                      />
+                    }
+                    label={t(`route.actions.trigger.${trigger}`)}
+                  />
+                ))}
+            </Stack>
+          </FormGroup>
+        )}
+        {loading &&
+          (progress[1] > 0 ? (
+            <LinearProgress
+              variant="determinate"
+              value={(progress[0] / progress[1]) * 100}
+              valueBuffer={((progress[0] + 10) / progress[1]) * 100}
+            />
+          ) : (
+            <LinearProgress />
+          ))}
+        {report && <ActionReportDisplay report={report} operations={operations} />}
+        {operations.length > 0 &&
+          action &&
+          action.operations.map(a => {
+            if (howlerPluginStore.operations.includes(a.operation_id)) {
+              return pluginStore.executeFunction(`operation.${a.operation_id}`, {
+                readonly: true,
+                operation: operations.find(_operation => _operation.id === a.operation_id),
+                operations,
+                query: action.query,
+                values: a.data_json
+              } as CustomActionProps);
+            }
+
+            return (
+              <OperationEntry
+                key={a.operation_id}
+                readonly
+                operations={operations}
+                query={action.query}
+                values={a.data_json}
+                operation={operations.find(_operation => _operation.id === a.operation_id)}
+              />
+            );
+          })}
+      </Stack>
+    </PageCenter>
+  );
+};
+
+export default ActionDetails;