@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

package/components/routes/views/ViewComposer.js

@@ -1,33 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { HelpOutline, Save } from '@mui/icons-material';
-import { Alert, Checkbox, CircularProgress, LinearProgress, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
+import { HelpOutline, Save, Settings } from '@mui/icons-material';
+import { Alert, Checkbox, CircularProgress, LinearProgress, Paper, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
 import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
 import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxContent';
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
+import AddColumnModal from '@cccsaurora/howler-ui/components/elements/hit/grid/AddColumnModal';
+import RecordTable from '@cccsaurora/howler-ui/components/elements/hit/grid/RecordTable';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import LayoutToggle, {} from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { uniq } from 'lodash-es';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
 import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
 import ErrorBoundary from '../ErrorBoundary';
-import HitQuery from '../hits/search/HitQuery';
+import RecordQuery from '../hits/search/RecordQuery';
 import HitSort from '../hits/search/shared/HitSort';
+import IndexPicker from '../hits/search/shared/IndexPicker';
 import SearchSpan from '../hits/search/shared/SearchSpan';
 const ViewComposer = () => {
     const { t } = useTranslation();
@@ -38,12 +48,15 @@ const ViewComposer = () => {
     const addView = useContextSelector(ViewContext, ctx => ctx.addView);
     const editView = useContextSelector(ViewContext, ctx => ctx.editView);
     const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const setIndexes = useContextSelector(ParameterContext, ctx => ctx.setIndexes);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-    const loadHits = useContextSelector(HitContext, ctx => ctx.loadHits);
+    const loadRecords = useContextSelector(RecordContext, ctx => ctx.loadRecords);
     // view state
     const [title, setTitle] = useState('');
     const [type, setType] = useState('global');
     const [advanceOnTriage, setAdvanceOnTriage] = useState(false);
+    const { columns, setColumns, columnWidths, isReady } = useContext(GridColumnsContext);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
@@ -56,18 +69,29 @@ const ViewComposer = () => {
     const [searching, setSearching] = useState(false);
     const [error, setError] = useState(null);
     const [response, setResponse] = useState();
+    const [isLoadingView, setIsLoadingView] = useState(!!routeParams.id);
+    const displayType = useContextSelector(RecordSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(RecordSearchContext, ctx => ctx.setDisplayType);
     const onSave = useCallback(async () => {
         setLoading(true);
+        const _columnData = columns.map(column => ({
+            field: column,
+            width: columnWidths[column] ?? null
+        }));
         try {
+            const normalizedIndexes = indexes?.length > 0 ? indexes : ['hit'];
             if (!routeParams.id) {
                 const newView = await addView({
                     title,
                     type,
                     query,
+                    indexes: normalizedIndexes,
                     sort: sort || null,
                     span: span || null,
                     settings: {
-                        advance_on_triage: advanceOnTriage
+                        advance_on_triage: advanceOnTriage,
+                        display: displayType,
+                        columns: displayType === 'grid' ? _columnData : null
                     }
                 });
                 navigate(buildViewUrl(newView));
@@ -77,9 +101,14 @@ const ViewComposer = () => {
                     title,
                     type,
                     query,
+                    indexes: normalizedIndexes,
                     sort,
                     span,
-                    settings: { advance_on_triage: advanceOnTriage }
+                    settings: {
+                        advance_on_triage: advanceOnTriage,
+                        display: displayType,
+                        columns: displayType === 'grid' ? _columnData : null
+                    }
                 });
             }
             showSuccessMessage(t(routeParams.id ? 'route.views.update.success' : 'route.views.create.success'));
@@ -101,23 +130,27 @@ const ViewComposer = () => {
         sort,
         span,
         advanceOnTriage,
+        indexes,
+        displayType,
+        columns,
         navigate,
+        columnWidths,
         editView,
         showErrorMessage
     ]);
-    const search = useCallback(async (_query) => {
-        setQuery(_query);
+    const performSearch = useCallback(async (searchQuery, searchIndexes, searchSort, searchSpan) => {
         setSearching(true);
         setError(null);
         try {
-            const _response = await dispatchApi(api.search.hit.post({
+            const normalizedIndexes = searchIndexes?.length > 0 ? searchIndexes : ['hit'];
+            const _response = await dispatchApi(api.v2.search.post(normalizedIndexes, {
                 rows: pageCount,
-                query: _query,
-                sort,
-                filters: span ? [`event.created:${convertDateToLucene(span)}`] : [],
+                query: searchQuery,
+                sort: searchSort,
+                filters: searchSpan ? [`event.created:${convertDateToLucene(searchSpan)}`] : [],
                 metadata: ['template', 'analytic']
             }), { showError: false, throwError: true });
-            loadHits(_response.items);
+            loadRecords(_response.items);
             setResponse(_response);
         }
         catch (e) {
@@ -126,23 +159,30 @@ const ViewComposer = () => {
         finally {
             setSearching(false);
         }
-    }, [dispatchApi, loadHits, pageCount, setQuery, sort, span]);
+    }, [dispatchApi, loadRecords, pageCount]);
+    const search = useCallback(async (_query) => {
+        setQuery(_query);
+        await performSearch(_query, indexes, sort, span);
+    }, [performSearch, indexes, sort, span, setQuery]);
     useEffect(() => {
-        search(query || DEFAULT_QUERY);
+        // Only run initial search if we're NOT editing an existing view
+        if (!routeParams.id) {
+            void search(query || DEFAULT_QUERY);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [routeParams.id]);
     // We only run this when ancillary properties (i.e. filters, sorting) change
     useEffect(() => {
-        if (query) {
-            search(query);
+        if (query && !isLoadingView) {
+            void search(query);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sort, span]);
+    }, [sort, span, indexes, isLoadingView]);
     useEffect(() => {
         if (!routeParams.id) {
             return;
         }
-        (async () => {
+        void (async () => {
             const viewToEdit = (await getCurrentViews({ views: [routeParams.id] }))[0];
             if (!viewToEdit) {
                 setError('route.views.missing');
@@ -153,13 +193,25 @@ const ViewComposer = () => {
             }
             setTitle(viewToEdit.title);
             setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
-            setQuery(viewToEdit.query);
+            setDisplayType((viewToEdit.settings?.display ?? null));
+            setType(viewToEdit.type);
+            const loadedQuery = viewToEdit.query || DEFAULT_QUERY;
+            const loadedIndexes = viewToEdit.indexes || indexes;
+            const loadedSort = viewToEdit.sort || sort;
+            const loadedSpan = viewToEdit.span || span;
+            setQuery(loadedQuery);
+            if (viewToEdit.indexes) {
+                setIndexes(loadedIndexes);
+            }
             if (viewToEdit.sort) {
-                setSort(viewToEdit.sort);
+                setSort(loadedSort);
             }
             if (viewToEdit.span) {
-                setSpan(viewToEdit.span);
+                setSpan(loadedSpan);
             }
+            // Perform search with the loaded values to avoid using stale state
+            await performSearch(loadedQuery, loadedIndexes, loadedSort, loadedSpan);
+            setIsLoadingView(false);
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [routeParams.id]);
@@ -172,6 +224,6 @@ const ViewComposer = () => {
                                             fontSize: '0.9em',
                                             fontStyle: 'italic',
                                             mb: 0.5
-                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(HitQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] })] }), response?.total ? (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })) : null, _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: _jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(hit => (_jsx(HitCard, { id: hit.howler.id, layout: HitLayout.DENSE }, hit.howler.id)))] }) })] }) }) }) }));
+                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(Stack, { direction: "row", width: "100%", spacing: 2, alignItems: "flex-start", paddingBottom: 1, children: _jsxs(Stack, { direction: "column", width: "100%", spacing: 1, children: [_jsx(RecordQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(IndexPicker, {}), _jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsx(ChipPopper, { label: _jsx(Typography, { variant: "body2", children: t('view.settings') }), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, placement: "bottom-end", children: _jsxs(Stack, { direction: "column", spacing: 1, children: [_jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(FlexOne, {}), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [_jsx(Typography, { component: "span", children: t('view.settings.layout') }), _jsx(LayoutToggle, { displayType: displayType, setDisplayType: setDisplayType, size: "small", allowNullValue: true })] })] }) })] })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "flex-end", justifyContent: "space-between", children: [response && (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })), _jsx(FlexOne, {}), displayType === 'grid' && (_jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) }))] }), _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: displayType === 'grid' ? (_jsx(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, children: _jsx(RecordTable, { query: query, items: response?.items }) })) : (_jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(record => record.__index === 'hit' ? (_jsx(HitCard, { id: record.howler.id, layout: HitLayout.DENSE }, record.howler.id)) : (_jsx(EventCard, { event: record }, record.howler.id)))] })) })] }) }) }) }));
 };
 export default ViewComposer;

package/components/routes/views/Views.js

@@ -5,6 +5,7 @@ import { Autocomplete, Card, Checkbox, IconButton, Skeleton, Stack, TextField, T
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
@@ -12,8 +13,8 @@ import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
 import { ViewTitle } from '@cccsaurora/howler-ui/components/elements/view/ViewTitle';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { isNull, omitBy, size } from 'lodash-es';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,8 +28,8 @@ const ViewsBase = () => {
     const { t } = useTranslation();
     const { user } = useAppUser();
     const navigate = useNavigate();
-    const { dispatchApi } = useMyApi();
     const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
     const addFavourite = useContextSelector(ViewContext, ctx => ctx.addFavourite);
     const removeFavourite = useContextSelector(ViewContext, ctx => ctx.removeFavourite);
@@ -39,9 +40,9 @@ const ViewsBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [response, setResponse] = useState(null);
     const [type, setType] = useState(searchParams.get('type') || null);
     const [hasError, setHasError] = useState(false);
     const [searching, setSearching] = useState(false);
@@ -63,13 +64,13 @@ const ViewsBase = () => {
             const phraseQuery = FIELDS_TO_SEARCH.map(_field => `${_field}:${searchTerm}`).join(' OR ');
             const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${type ?? '*'}${type === 'personal' ? ' OR readonly' : ''})`;
             const favouritesQuery = favouritesOnly && user.favourite_views.length > 0 ? ` AND view_id:(${user.favourite_views.join(' OR ')})` : '';
-            setResponse(await dispatchApi(api.search.view.post({
+            await request(api.search.view.post, {
                 query: `(${phraseQuery}) AND ${typeQuery}${favouritesQuery}`,
                 rows: pageCount,
                 offset
-            })));
+            });
         }
-        catch (e) {
+        catch {
             setHasError(true);
         }
         finally {
@@ -83,7 +84,7 @@ const ViewsBase = () => {
         user.favourite_views,
         type,
         favouritesOnly,
-        dispatchApi,
+        request,
         pageCount,
         offset
     ]);
@@ -102,19 +103,21 @@ const ViewsBase = () => {
     }, [response, load]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
-            searchParams.set('offset', _offset.toString());
+            const modifiedRequest = getSearchRequestData({ offset: _offset });
+            searchParams.set('offset', modifiedRequest.offset.toString());
             setSearchParams(searchParams, { replace: true });
-            setOffset(_offset);
+            setOffset(modifiedRequest.offset);
         }
-    }, [offset, searchParams, setSearchParams]);
+    }, [offset, searchParams, setSearchParams, getSearchRequestData]);
     const onDelete = useCallback((event, id) => {
         event.preventDefault();
         event.stopPropagation();
         withConfirmDeleteModal(async () => {
             await removeView(id);
-            onSearch();
+            remove(id);
+            showSuccessMessage(t('route.views.manager.delete.success'));
         });
-    }, [onSearch, removeView, withConfirmDeleteModal]);
+    }, [remove, removeView, withConfirmDeleteModal, showSuccessMessage, t]);
     const onFavourite = useCallback(async (event, id) => {
         event.preventDefault();
         if (user.favourite_views?.includes(id)) {
@@ -172,7 +175,7 @@ const ViewsBase = () => {
     }, [offset, response?.total, searchParams, setSearchParams]);
     useEffect(() => {
         if (!searching) {
-            onSearch();
+            void onSearch();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset, favouritesOnly, type]);
@@ -182,6 +185,6 @@ const ViewsBase = () => {
                         (item.item.type === 'global' && user.is_admin)) && (_jsx(Tooltip, { title: t('button.edit'), children: _jsx(IconButton, { component: Link, to: `/views/${item.item.view_id}/edit?query=${item.item.query}`, children: _jsx(Edit, {}) }) })), item.item.owner === user.username && item.item.type !== 'readonly' && (_jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { onClick: event => onDelete(event, item.item.view_id), children: _jsx(Clear, {}) }) })), item.item.type === 'global' && item.item.owner !== user.username && (_jsx(Tooltip, { title: item.item.owner, children: _jsx("div", { children: _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }, userId: item.item.owner }) }) })), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { onClick: e => onFavourite(e, item.item.view_id), children: user.favourite_views?.includes(item.item.view_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }, item.item.view_id)), response: response, searchPrompt: "route.views.manager.search", onCreate: () => navigate('/views/create'), createPrompt: "route.views.create", createIcon: _jsx(SavedSearch, { sx: { mr: 1 } }) }));
 };
 const Views = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(ViewsBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "view_id", children: _jsx(ViewsBase, {}) }) }));
 };
 export default Views;

package/i18n.js

@@ -26,7 +26,7 @@ const resources = {
     }
 };
 const i18nInstance = createInstance();
-i18nInstance
+void i18nInstance
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({

package/index.css

@@ -19,3 +19,7 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
+
+.no-margin-first-child > :first-child {
+  margin-top: 0 !important;
+}

package/index.d.ts

@@ -1,3 +1,3 @@
-import '@fontsource/roboto';
+import '@fontsource/roboto/index.css';
 import '@cccsaurora/howler-ui/i18n';
 import 'index.css';

package/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import '@fontsource/roboto';
+import '@fontsource/roboto/index.css';
 import App from '@cccsaurora/howler-ui/components/app/App';
 import '@cccsaurora/howler-ui/i18n';
 import 'index.css';