@cccsaurora/howler-ui 2.19.0-dev.921 → 2.19.0-dev.931

package/components/app/App.d.ts

@@ -1,3 +1,4 @@
+import 'dayjs/locale/fr-ca';
 import { type FC } from 'react';
 declare const App: FC;
 export default App;

package/components/app/App.js

@@ -51,6 +51,7 @@ import Templates from '@cccsaurora/howler-ui/components/routes/templates/Templat
 import ViewComposer from '@cccsaurora/howler-ui/components/routes/views/ViewComposer';
 import Views from '@cccsaurora/howler-ui/components/routes/views/Views';
 import dayjs from 'dayjs';
+import 'dayjs/locale/fr-ca';
 import duration from 'dayjs/plugin/duration';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -58,7 +59,7 @@ import utc from 'dayjs/plugin/utc';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import * as monaco from 'monaco-editor';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { useContext, useEffect, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { PluginProvider, usePluginStore } from 'react-pluggable';
 import { createBrowserRouter, Outlet, RouterProvider, useLocation, useNavigate } from 'react-router-dom';
@@ -84,6 +85,7 @@ dayjs.extend(utc);
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
+dayjs.locale(i18n.language === 'en' ? 'en' : 'fr-ca');
 loader.config({ monaco });
 const RoleRoute = ({ roles }) => {
     const appUser = useAppUser();
@@ -105,6 +107,13 @@ const MyApp = () => {
     const { setItems } = useAppSwitcher();
     const { get, set, remove } = useMyLocalStorage();
     const pluginStore = usePluginStore();
+    const onLanguageChange = useCallback((language) => dayjs.locale(language === 'en' ? 'en' : 'fr-ca'), []);
+    useEffect(() => {
+        i18n.on('languageChanged', onLanguageChange);
+        return () => {
+            i18n.off('languageChanged', onLanguageChange);
+        };
+    }, [onLanguageChange]);
     // Simulate app loading time...
     // e.g. fetching initial app data, etc.
     useEffect(() => {

package/components/app/providers/FavouritesProvider.js

@@ -26,10 +26,6 @@ const FavouriteProvider = ({ children }) => {
         if (favourites.length < 1) {
             return null;
         }
-        // The favourite list is fully represented, skip
-        if (favourites.length === viewElement?.element?.items?.length) {
-            return viewElement;
-        }
         const savedViews = await fetchViews(favourites);
         const items = sortBy(savedViews, 'title')
             .filter(view => !!view)

package/components/elements/display/HowlerAvatar.js

@@ -10,6 +10,7 @@ const HowlerAvatar = ({ userId, ...avatarProps }) => {
     const { getAvatar } = useContext(AvatarContext);
     const theme = useTheme();
     const [props, setProps] = useState();
+    const displayId = userId && userId.toLowerCase() !== 'unassigned' ? userId : t('app.drawer.hit.assignment.unassigned.name');
     const stringAvatar = useCallback((name) => {
         return {
             sx: {
@@ -37,7 +38,7 @@ const HowlerAvatar = ({ userId, ...avatarProps }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [userId]);
     if (userId) {
-        return (_jsx(Tooltip, { title: userId, children: _jsx(Avatar, { "aria-label": userId, ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }) }));
+        return (_jsx(Tooltip, { title: displayId, children: _jsx(Avatar, { "aria-label": displayId, ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }) }));
     }
     else {
         return (_jsx(Avatar, { "aria-label": t('unknown'), ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }));

package/components/elements/hit/HitSummary.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Analytics, InfoOutlined } from '@mui/icons-material';
 import { Alert, AlertTitle, Autocomplete, Box, Button, Chip, CircularProgress, Divider, Fade, Grid, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
@@ -23,6 +23,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
     const { hitFields } = useContext(FieldContext);
     const { showErrorMessage } = useMySnackbar();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [showHitSummaryGraph] = useMyLocalStorageItem(StorageKey.SHOW_HIT_SUMMARY_GRAPH, true);
     const { getMatchingTemplate } = useMatchers();
     const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
     const error = useContextSelector(HitSearchContext, ctx => ctx.error);
@@ -130,7 +131,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
         performAggregation();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query, views, searching, error]);
-    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), _jsx(HitGraph, {}), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
+    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), showHitSummaryGraph && (_jsxs(_Fragment, { children: [_jsx(HitGraph, {}), _jsx(Divider, { flexItem: true })] })), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
                         .filter(key => !isEmpty(aggregateResults[key]))
                         .flatMap(key => [
                         _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count ?? '?', " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key]?.sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source))) ?? '?'] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),

package/components/hooks/useMyPreferences.js

@@ -276,7 +276,8 @@ const useMyPreferences = () => {
             rightBeforeSearch: (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", pr: 1, children: [rightItems.map(item => (_jsx(Fragment, { children: item.component }, item.id))), _jsx(Classification, {})] }))
         },
         leftnav: {
-            elements: MENU_ITEMS
+            elements: MENU_ITEMS,
+            width: 280
         }
     }), [USER_MENU_ITEMS, ADMIN_MENU_ITEMS, MENU_ITEMS, leftItems, rightItems]);
 };

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

@@ -63,7 +63,7 @@ const ActionDetails = () => {
         user.roles.includes('admin') ||
         user.roles.includes('actionrunner_basic') ||
         user.roles.includes('actionrunner_advanced');
-    return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { variant: "h5", children: action?.name }), action?.owner_id && _jsx(HowlerAvatar, { sx: { width: 32, height: 32 }, userId: action.owner_id })] }), _jsx(Phrase, { fullWidth: true, value: action?.query, disabled: true, size: "small", onChange: () => { }, startAdornment: _jsx(IconButton, { onClick: () => onSearch(action?.query), children: _jsx(Search, { fontSize: "small" }) }) }), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [response && _jsx(QueryResultText, { count: response.total, query: action?.query }), _jsx(FlexOne, {}), ((action?.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Delete, {}), size: "small", variant: "outlined", color: "error", onClick: () => deleteAction(action?.action_id), children: t('delete') })), execRoles && (_jsx(Button, { startIcon: _jsx(PlayCircleOutline, {}), size: "small", variant: "outlined", color: "success", onClick: () => executeAction(action?.action_id), children: t('route.actions.execute') })), ((action?.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Edit, {}), size: "small", variant: "outlined", component: Link, to: `/action/${params.id}/edit`, children: t('route.actions.edit') }))] }), user.roles.includes('automation_advanced') && (_jsx(FormGroup, { children: _jsx(Stack, { direction: "row", spacing: 1, children: action?.operations
+    return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { variant: "h5", children: action?.name }), action?.owner_id && _jsx(HowlerAvatar, { sx: { width: 32, height: 32 }, userId: action.owner_id })] }), _jsx(Phrase, { fullWidth: true, value: action?.query, disabled: true, size: "small", onChange: () => { }, startAdornment: _jsx(IconButton, { onClick: () => onSearch(action?.query), children: _jsx(Search, { fontSize: "small" }) }) }), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [response && _jsx(QueryResultText, { count: response.total, query: action?.query }), _jsx(FlexOne, {}), ((action?.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Delete, {}), size: "small", variant: "outlined", color: "error", onClick: () => deleteAction(action?.action_id), children: t('button.delete') })), execRoles && (_jsx(Button, { startIcon: _jsx(PlayCircleOutline, {}), size: "small", variant: "outlined", color: "success", onClick: () => executeAction(action?.action_id), children: t('route.actions.execute') })), ((action?.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Edit, {}), size: "small", variant: "outlined", component: Link, to: `/action/${params.id}/edit`, children: t('route.actions.edit') }))] }), user.roles.includes('automation_advanced') && (_jsx(FormGroup, { children: _jsx(Stack, { direction: "row", spacing: 1, children: action?.operations
                             ?.map(a => (operations ?? []).find(_action => _action.id === a.operation_id)?.triggers ?? [])
                             .reduce((acc, triggers) => acc.filter(_t => triggers.includes(_t)))
                             .map(trigger => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { name: trigger, onChange: onTriggerChange, checked: action?.triggers?.includes(trigger) ?? false }), label: t(`route.actions.trigger.${trigger}`) }, trigger))) }) })), loading &&

package/components/routes/analytics/AnalyticDetails.js

@@ -115,7 +115,7 @@ const AnalyticDetails = () => {
                                                 borderRadius: theme.shape.borderRadius,
                                                 border: `thin solid ${theme.palette.divider}`,
                                                 width: '100%'
-                                            }, children: analytic.rule_crontab }))] }), (analytic?.owner === user.username || user.roles.includes('admin')) && (_jsx(Tooltip, { title: editingInterval ? t('rule.interval.save') : t('rule.interval.edit'), children: _jsx(IconButton, { disabled: intervalLoading, sx: { alignSelf: 'end' }, onClick: onEdit, children: intervalLoading ? _jsx(CircularProgress, { size: 20 }) : editingInterval ? _jsx(Check, {}) : _jsx(Edit, {}) }) }))] }))] }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 12, md: 9, children: _jsxs(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: [_jsx(Tab, { label: t('route.analytics.tab.overview'), value: "overview" }), _jsx(Tab, { label: t('route.analytics.tab.comments'), value: "comments" }), _jsx(Tab, { label: t('route.analytics.tab.hit_comments'), value: "hit_comments" }), _jsx(Tab, { label: t('route.analytics.tab.templates'), value: "templates" }), _jsx(Tab, { label: t('route.analytics.tab.overviews'), value: "overviews" }), analytic?.rule && _jsx(Tab, { label: t('route.analytics.tab.rule'), value: "rule" }), config?.configuration.features.notebook && (_jsx(Tab, { label: t('route.analytics.tab.notebooks'), value: "notebooks" })), _jsx(Tab, { label: t('route.analytics.tab.triage'), value: "triage" })] }) }), ['comments', 'hit_comments'].includes(tab) && (_jsx(Grid, { item: true, xs: 12, md: 3, children: _jsx(Autocomplete, { options: analytic?.detections ?? [], renderInput: param => _jsx(TextField, { ...param, label: "Detection" }), value: filter, onChange: (_, v) => setFilter(v) }) }))] }), {
+                                            }, children: analytic.rule_crontab }))] }), (analytic?.owner === user.username || user.roles.includes('admin')) && (_jsx(Tooltip, { title: editingInterval ? t('rule.interval.save') : t('rule.interval.edit'), children: _jsx(IconButton, { disabled: intervalLoading, sx: { alignSelf: 'end' }, onClick: onEdit, children: intervalLoading ? _jsx(CircularProgress, { size: 20 }) : editingInterval ? _jsx(Check, {}) : _jsx(Edit, {}) }) }))] }))] }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 12, md: 9, children: _jsxs(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: [_jsx(Tab, { label: t('route.analytics.tab.overview'), value: "overview" }), _jsx(Tab, { label: t('route.analytics.tab.comments'), value: "comments" }), _jsx(Tab, { label: t('route.analytics.tab.hit_comments'), value: "hit_comments" }), _jsx(Tab, { label: t('route.analytics.tab.templates'), value: "templates" }), _jsx(Tab, { label: t('route.analytics.tab.overviews'), value: "overviews" }), analytic?.rule && _jsx(Tab, { label: t('route.analytics.tab.rule'), value: "rule" }), config?.configuration.features.notebook && (_jsx(Tab, { label: t('route.analytics.tab.notebooks'), value: "notebooks" })), _jsx(Tab, { label: t('route.analytics.tab.triage'), value: "triage" })] }) }), ['comments', 'hit_comments'].includes(tab) && (_jsx(Grid, { item: true, xs: 12, md: 3, children: _jsx(Autocomplete, { options: analytic?.detections ?? [], renderInput: param => _jsx(TextField, { ...param, label: t('route.analytics.dropdown.detection') }), value: filter, onChange: (_, v) => setFilter(v) }) }))] }), {
                     comments: _jsx(AnalyticComments, { analytic: analytic, setAnalytic: setAnalytic }),
                     hit_comments: _jsx(AnalyticHitComments, { analytic: analytic }),
                     overview: _jsx(AnalyticOverview, { analytic: analytic, setAnalytic: setAnalytic }),

package/components/routes/settings/LocalSection.js

@@ -17,11 +17,12 @@ const LocalSection = () => {
     const [compactJson, setCompactJson] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
     const [flattenJson, setFlattenJson] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON, false);
     const [forceDrawer, setForceDrawer] = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false);
+    const [showHitSummaryGraph, setShowHitSummaryGraph] = useMyLocalStorageItem(StorageKey.SHOW_HIT_SUMMARY_GRAPH, true);
     const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
     const [displayType, setDisplayType] = useMyLocalStorageItem(StorageKey.DISPLAY_TYPE, 'list');
     const [pageCount, setPageCount] = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25);
     const [searchWidth, setSearchWidth] = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null);
     const [templateFieldCount, setTemplateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
-    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_jsx(EditRow, { titleKey: "page.settings.local.compact.json", descriptionKey: "page.settings.local.compact.json.description", value: compactJson, type: "checkbox", onEdit: async (value) => setCompactJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.flatten.json", descriptionKey: "page.settings.local.flatten.json.description", value: flattenJson, type: "checkbox", onEdit: async (value) => setFlattenJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.details.drawer", descriptionKey: "page.settings.local.details.drawer.description", value: forceDrawer, type: "checkbox", onEdit: async (value) => setForceDrawer(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.search.width", descriptionKey: "page.settings.local.search.width.description", value: searchWidth, type: "range", min: 400, max: Math.floor(window.innerWidth / 100) * 100, optional: true, onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsx(EditRow, { titleKey: "page.settings.local.hits.field_count", descriptionKey: "page.settings.local.hits.field_count.description", value: templateFieldCount, type: "range", min: 0, step: 1, max: 15, optional: true, onEdit: async (value) => setTemplateFieldCount(value ? parseInt(value) : null), valueLabelFormat: val => val.toString() }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.display_type') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: displayType, exclusive: true, onChange: (_, value) => setDisplayType(value), children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.display_type.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(Select, { size: "small", sx: { minWidth: '75px', textAlign: 'left' }, value: pageCount, onChange: event => setPageCount(typeof event.target.value === 'string' ? parseInt(event.target.value) : event.target.value), children: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.results.count.description') }) }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'local'))] }));
+    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_jsx(EditRow, { titleKey: "page.settings.local.compact.json", descriptionKey: "page.settings.local.compact.json.description", value: compactJson, type: "checkbox", onEdit: async (value) => setCompactJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.flatten.json", descriptionKey: "page.settings.local.flatten.json.description", value: flattenJson, type: "checkbox", onEdit: async (value) => setFlattenJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.details.drawer", descriptionKey: "page.settings.local.details.drawer.description", value: forceDrawer, type: "checkbox", onEdit: async (value) => setForceDrawer(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.show.hit.summary.graph", descriptionKey: "page.settings.local.show.hit.summary.graph.description", value: showHitSummaryGraph, type: "checkbox", onEdit: async (value) => setShowHitSummaryGraph(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.search.width", descriptionKey: "page.settings.local.search.width.description", value: searchWidth, type: "range", min: 400, max: Math.floor(window.innerWidth / 100) * 100, optional: true, onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsx(EditRow, { titleKey: "page.settings.local.hits.field_count", descriptionKey: "page.settings.local.hits.field_count.description", value: templateFieldCount, type: "range", min: 0, step: 1, max: 15, optional: true, onEdit: async (value) => setTemplateFieldCount(value ? parseInt(value) : null), valueLabelFormat: val => val.toString() }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.display_type') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: displayType, exclusive: true, onChange: (_, value) => setDisplayType(value), children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.display_type.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(Select, { size: "small", sx: { minWidth: '75px', textAlign: 'left' }, value: pageCount, onChange: event => setPageCount(typeof event.target.value === 'string' ? parseInt(event.target.value) : event.target.value), children: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.results.count.description') }) }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'local'))] }));
 };
 export default LocalSection;

package/locales/en/translation.json

@@ -1,9 +1,11 @@
 {
     "*": "All values",
+    "Protected B": "Protected B",
+    "Unclassified//Official Use Only": "Unclassified//Official Use Only",
+    "actions.error": "Action \"{{action}}\" had error(s): {{messages}}",
     "actions.running": "Action \"{{action}}\" is executing.",
-    "actions.succeeded": "Action \"{{action}}\" completed successfully.",
     "actions.skipped": "Action \"{{action}}\" was skipped: {{messages}}",
-    "actions.error": "Action \"{{action}}\" had error(s): {{messages}}",
+    "actions.succeeded": "Action \"{{action}}\" completed successfully.",
     "add": "Add",
     "adminmenu": "Admin menu",
     "adminmenu.config": "Configuration",
@@ -190,6 +192,7 @@
     "hit.label.edit.add.error.duplicate": "Duplicated label not allowed",
     "hit.label.edit.add.error.empty": "Can't add an empty label",
     "hit.label.edit.add.label": "New label value",
+    "hit.label.edit.desc": "Add or remove labels",
     "hit.notebook.confirm.dialog": "A notebook with that name already exists in your environment, do you wish to overwrite it?",
     "hit.notebook.confirm.title": "Overwrite existing notebook?",
     "hit.notebook.error.failToPost": "Failed to send notebook to Jupyterhub, make sure your user environment is running.",
@@ -259,6 +262,7 @@
     "hit.summary.subtitle": "Limited to a maximum of 10 000 hits.",
     "hit.summary.title": "Summary of Hits Over Time",
     "hit.summary.zoom.reset": "Reset Zoom",
+    "hit.view.overview": "Overview",
     "hit.viewer.aggregate": "Summary",
     "hit.viewer.comments": "Comments",
     "hit.viewer.data": "Raw Data",
@@ -386,6 +390,8 @@
     "page.settings.local.results.count.description": "How many results should we show per page when showing search results?",
     "page.settings.local.search.width": "Maximum Results Width",
     "page.settings.local.search.width.description": "The maximum size (in pixels) the results column in the search page.",
+    "page.settings.local.show.hit.summary.graph": "Show the Hit Summary Graph in Hit Search",
+    "page.settings.local.show.hit.summary.graph.description": "Shows the Hit Summary Graph in the Hit Search",
     "page.settings.local.title": "UI Preferences",
     "page.settings.profile.table.email": "Email",
     "page.settings.profile.table.groups": "Groups",
@@ -419,6 +425,7 @@
     "personalization.showbreadcrumbs": "Show Breadcrumbs",
     "personalization.sticky": "Sticky Topbar",
     "query": "Query",
+    "query.invalid": "Invalid query",
     "quicksearch.aria": "search",
     "quicksearch.placeholder": "Search ...",
     "rationale.default": "Hit assessed as {{assessment}}",
@@ -498,9 +505,11 @@
     "route.analytics.deleted": "Deleted Rule!",
     "route.analytics.detection.title": "Hits Ingested in the Last Three Months by Detection",
     "route.analytics.detections": "Detections:",
+    "route.analytics.dropdown.detection": "Detection",
     "route.analytics.escalation.title": "Escalation of Created Hits",
     "route.analytics.filter.rule": "Filter on Rules",
     "route.analytics.ingestion.title": "Number of Hits Created",
+    "route.analytics.manager.search": "Search Analytics",
     "route.analytics.overview.description": "Description",
     "route.analytics.overview.empty.description": "There are no existing hits for this analytic. Statistics cannot be shown.",
     "route.analytics.overview.empty.title": "No Statistics to Show",
@@ -596,8 +605,10 @@
     "route.help.actions": "Action Documentation",
     "route.help.api": "API Documentation",
     "route.help.auth": "Authentication",
+    "route.help.bundles": "Hit Bundles",
     "route.help.client": "Howler Client",
     "route.help.hit": "Hit Documentation",
+    "route.help.hit.banner": "Hit Banner Documentation",
     "route.help.main": "Dashboard",
     "route.help.notebook": "Notebook Documentation",
     "route.help.overviews": "Overviews",
@@ -665,15 +676,15 @@
     "route.templates.default": "Default",
     "route.templates.detection": "Choose Detection",
     "route.templates.global": "Global",
+    "route.templates.manager.error.action": "Click to open quick fix options",
+    "route.templates.manager.error.message": "Invalid Detection",
+    "route.templates.manager.error.modal.description": "The template fields are read only and will not be used. Do you want to remove the template?",
+    "route.templates.manager.error.modal.title": "Template detection no longer exists",
     "route.templates.manager.global": "Global",
     "route.templates.manager.open": "Open View",
     "route.templates.manager.personal": "Personal",
     "route.templates.manager.readonly": "Built-in",
     "route.templates.manager.search": "Search Templates",
-    "route.templates.manager.error.message": "Invalid Detection",
-    "route.templates.manager.error.action": "Click to open quick fix options",
-    "route.templates.manager.error.modal.title": "Template detection no longer exists",
-    "route.templates.manager.error.modal.description": "The template fields are read only and will not be used. Do you want to remove the template?",
     "route.templates.personal": "Personal",
     "route.templates.prompt": "Activate autocomplete using [ctrl + space].",
     "route.templates.readonly.warning": "This is a built-in template, and cannot be edited. To make changes to it, contact",
@@ -710,6 +721,7 @@
     "rule.interval.thirty.minutes": "Every thirty minutes",
     "rule.interval.three.hours": "Every three hours",
     "save": "Save",
+    "search.layout.settings": "Edit search result layout",
     "search.open": "Open Search",
     "search.result.showing": "Showing {{offset}} to {{length}} of {{total}} results",
     "search.result.showing.single": "No results",

package/locales/fr/translation.json

@@ -2,10 +2,10 @@
     "*": "Toutes les valeurs",
     "Protected B": "Protégé B",
     "Unclassified//Official Use Only": "Non classé//Réservé à des fins officielles",
+    "actions.error": "Action \"{{action}}\" a rencontré une ou des erreur(s): {{messages}}",
     "actions.running": "Action \"{{action}}\" s'exécute.",
-    "actions.succeeded": "Action \"{{action}}\" achevé avec succès.",
     "actions.skipped": "Action \"{{action}}\" a été ignorée: {{messages}}",
-    "actions.error": "Action \"{{action}}\" a rencontré une ou des erreur(s): {{messages}}",
+    "actions.succeeded": "Action \"{{action}}\" achevé avec succès.",
     "add": "Ajouter",
     "adminmenu": "Menu d'administration",
     "adminmenu.config": "Configuration",
@@ -364,7 +364,6 @@
     "page.help": "Aide",
     "page.help.title": "Tableau de bord de l'aide",
     "page.login.button": "Se connecter",
-    "page.login.error": "Tapez simplement n'importe quoi dans les champs du nom d'utilisateur et du mot de passe ...",
     "page.login.password": "Mot de passe",
     "page.login.username": "Nom d'utilisateur",
     "page.logout": "Déconnexion de l'utilisateur actuel ... ",
@@ -391,6 +390,8 @@
     "page.settings.local.results.count.description": "Combien de résultats devons-nous afficher par page lors de l'affichage des résultats de recherche ?",
     "page.settings.local.search.width": "Largeur maximale des résultats",
     "page.settings.local.search.width.description": "Taille maximale (en pixels) de la colonne des résultats dans la page de recherche.",
+    "page.settings.local.show.hit.summary.graph": "Afficher le graphique du résumé des résultats dans le volet Résumé des résultats",
+    "page.settings.local.show.hit.summary.graph.description": "Affiche le graphique du résumé des résultats dans le volet Résumé des résultats",
     "page.settings.local.title": "Préférences de l'interface utilisateur",
     "page.settings.profile.table.email": "Courriel",
     "page.settings.profile.table.groups": "Groupes",
@@ -443,6 +444,7 @@
     "route.actions.create": "Nouveau action",
     "route.actions.edit": "Modifier",
     "route.actions.execute": "Exécuter",
+    "route.actions.manager": "Gestion des actions",
     "route.actions.name": "Nom de l'action",
     "route.actions.open": "Ouvrir la requête",
     "route.actions.operation.add": "Ajouter une nouvelle opération",
@@ -503,9 +505,11 @@
     "route.analytics.deleted": "Règle supprimée!",
     "route.analytics.detection.title": "Hits ingérés au cours des trois derniers mois par détection",
     "route.analytics.detections": "Détections:",
+    "route.analytics.dropdown.detection": "Détection",
     "route.analytics.escalation.title": "Escalade des hits créés",
     "route.analytics.filter.rule": "Filtre sur les règles",
     "route.analytics.ingestion.title": "Nombre de hits créés",
+    "route.analytics.manager.search": "Rechercher les analyses",
     "route.analytics.overview.description": "Description",
     "route.analytics.overview.empty.description": "Il n'y a pas de résultats existants pour cette analyse. Les statistiques ne peuvent pas être affichées.",
     "route.analytics.overview.empty.title": "Pas de statistiques à montrer",
@@ -598,6 +602,7 @@
     "route.dossiers.search.prompt": "Recherche par titre, requête ou propriétaire.",
     "route.dossiers.view": "Voir le dossier",
     "route.help": "Aide",
+    "route.help.actions": "Documentation sur les actions",
     "route.help.api": "Documentation de l'API",
     "route.help.auth": "Authentification",
     "route.help.bundles": "Groupes des hits",
@@ -661,6 +666,7 @@
     "route.overviews.theme.dark": "Prévoyez en mode sombre",
     "route.overviews.theme.light": "Prévoyez en mode clair",
     "route.overviews.view": "Voir la vue d'ensemble",
+    "route.search": "Rechercher",
     "route.templates": "Modèles",
     "route.templates.analytic": "Choisir une analyse",
     "route.templates.builtin": "Intégré",
@@ -669,15 +675,16 @@
     "route.templates.create": "Nouvelle modèle",
     "route.templates.default": "Défaut",
     "route.templates.detection": "Choisir une détection",
-    "route.templates.global": "Général",
+    "route.templates.global": "Global",
+    "route.templates.manager.error.action": "Cliquez ici pour afficher les options de correction rapide",
+    "route.templates.manager.error.message": "Détection non valide",
+    "route.templates.manager.error.modal.description": "Les clés du modèle sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer le modèle ?",
+    "route.templates.manager.error.modal.title": "La détection du modèle n'existe plus",
     "route.templates.manager.global": "Global",
+    "route.templates.manager.open": "Ouvrir la vue",
     "route.templates.manager.personal": "Personnel",
     "route.templates.manager.readonly": "Intégré",
     "route.templates.manager.search": "Rechercher les modèles",
-    "route.templates.manager.error.message": "Détection non valide",
-    "route.templates.manager.error.action": "Cliquez ici pour afficher les options de correction rapide",
-    "route.templates.manager.error.modal.title": "La détection du modèle n'existe plus",
-    "route.templates.manager.error.modal.description": "Les clés du modèle sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer le modèle ?",
     "route.templates.personal": "Personnel",
     "route.templates.prompt": "Activer l'autocomplétion en utilisant [ctrl + espace].",
     "route.templates.readonly.warning": "Il s'agit d'un modèle intégré qui ne peut pas être modifié. Pour le modifier, veuillez contacter",
@@ -698,8 +705,10 @@
     "route.views.manager.personal": "Personnel",
     "route.views.manager.readonly": "Intégré",
     "route.views.manager.search": "Rechercher les vues",
+    "route.views.name": "Nom de la vue",
     "route.views.save": "Enregistrer cette requête comme vue",
     "route.views.saved": "Vues épinglées",
+    "route.views.search.prompt": "Rechercher par nom, requête ou propriétaire.",
     "route.views.show": "Voir les vues",
     "route.views.update.success": "Vue actualisée.",
     "rule.interval": "Intervalle d'exécution de la règle",
@@ -712,6 +721,7 @@
     "rule.interval.thirty.minutes": "Toutes les trente minutes",
     "rule.interval.three.hours": "Toutes les trois heures",
     "save": "Sauvegarder",
+    "search.layout.settings": "Modifier la présentation des résultats de recherche",
     "search.open": "Ouvrir la recherche",
     "search.result.showing": "Affichage de {{offset}} à {{length}} sur {{total}} articles",
     "search.result.showing.single": "Aucun articles",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.19.0-dev.921",
+  "version": "2.19.0-dev.931",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/utils/constants.d.ts

@@ -49,6 +49,7 @@ export declare enum StorageKey {
     COMPACT_JSON = "compact_json_view",
     FLATTEN_JSON = "flatten_json_view",
     FORCE_DRAWER = "force_drawer",
+    SHOW_HIT_SUMMARY_GRAPH = "show_hit_summary_graph",
     LAST_VIEW = "last_view",
     ONLY_RULES = "only_rules",
     PAGE_COUNT = "page_count",

package/utils/constants.js

@@ -54,6 +54,7 @@ export var StorageKey;
     StorageKey["COMPACT_JSON"] = "compact_json_view";
     StorageKey["FLATTEN_JSON"] = "flatten_json_view";
     StorageKey["FORCE_DRAWER"] = "force_drawer";
+    StorageKey["SHOW_HIT_SUMMARY_GRAPH"] = "show_hit_summary_graph";
     StorageKey["LAST_VIEW"] = "last_view";
     StorageKey["ONLY_RULES"] = "only_rules";
     StorageKey["PAGE_COUNT"] = "page_count";