@cccsaurora/howler-ui 2.18.0-dev.704 → 2.18.0-dev.705

package/components/routes/home/ViewCard.js

@@ -3,74 +3,80 @@ import { OpenInNew } from '@mui/icons-material';
 import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { useHitContextSelector } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { useHitContextSelector as useRecordContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
+import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import HitContextMenu from '@cccsaurora/howler-ui/components/routes/hits/search/HitContextMenu';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
+import { isObservable } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
-// Custom hook to select hits by IDs with proper memoization
-const useSelectHitsByIds = (hitIds) => {
-    const hitIdsRef = useRef(hitIds);
+// Custom hook to select records by IDs with proper memoization
+const useSelectRecordsByIds = (recordIds) => {
+    const recordIdsRef = useRef(recordIds);
     const prevResultRef = useRef([]);
-    const prevHitIdsRef = useRef([]);
-    // Keep ref up to date with latest hitIds
-    hitIdsRef.current = hitIds;
+    const prevRecordIdsRef = useRef([]);
+    // Keep ref up to date with latest recordIds
+    recordIdsRef.current = recordIds;
     const selector = useCallback(ctx => {
-        const currentHitIds = hitIdsRef.current;
-        // Fast path: if hitIds array didn't change, check if hit objects changed
-        if (prevHitIdsRef.current.length === currentHitIds.length &&
-            currentHitIds.every((id, i) => id === prevHitIdsRef.current[i])) {
-            // HitIds unchanged - check if any hit objects changed by reference
-            const anyHitChanged = currentHitIds.some((id, i) => ctx.hits[id] !== prevResultRef.current[i]);
-            if (!anyHitChanged) {
+        const currentRecordIds = recordIdsRef.current;
+        // Fast path: if recordIds array didn't change, check if record objects changed
+        if (prevRecordIdsRef.current.length === currentRecordIds.length &&
+            currentRecordIds.every((id, i) => id === prevRecordIdsRef.current[i])) {
+            // RecordIds unchanged - check if any record objects changed by reference
+            const anyRecordChanged = currentRecordIds.some((id, i) => ctx.records[id] !== prevResultRef.current[i]);
+            if (!anyRecordChanged) {
                 return prevResultRef.current;
             }
         }
         // Something changed - rebuild the array
-        const currentHits = currentHitIds.map(id => ctx.hits[id]).filter(Boolean);
-        prevHitIdsRef.current = currentHitIds;
-        prevResultRef.current = currentHits;
-        return currentHits;
+        const currentRecords = currentRecordIds.map(id => ctx.records[id]).filter(Boolean);
+        prevRecordIdsRef.current = currentRecordIds;
+        prevResultRef.current = currentRecords;
+        return currentRecords;
     }, []); // Empty deps - selector never changes
-    return useHitContextSelector(selector);
+    return useRecordContextSelector(selector);
 };
 // Utility functions
 const normalize = (val) => (val == null ? '' : String(val));
 // Have to normalize the fields as websockets and api return null and undefined respectively. This causes false positives when comparing signatures if not normalized to a consistent value. We also stringify non-primitive values to ensure changes are detected.
-const createHitSignature = (hit) => {
-    if (!hit)
+const createRecordSignature = (record) => {
+    if (!record) {
         return '';
-    return `${hit.howler?.id}:${normalize(hit.howler?.status)}:${normalize(hit.howler?.assignment)}:${normalize(hit.howler?.assessment)}`;
+    }
+    if (isObservable(record)) {
+        return record.howler?.id;
+    }
+    return `${record.howler?.id}:${normalize(record.howler?.status)}:${normalize(record.howler?.assignment)}:${normalize(record.howler?.assessment)}`;
 };
-const createSignatureFromHits = (hits) => {
-    if (hits.length === 0)
+const createSignatureFromRecords = (records) => {
+    if (records.length === 0)
         return '';
-    return hits.map(createHitSignature).join('|');
+    return records.map(createRecordSignature).join('|');
 };
 const DEBOUNCE_TIME = 1000; // 1 second debounce for signature changes
 const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
-    const [hitIds, setHitIds] = useState([]);
+    const [recordIds, setRecordIds] = useState([]);
     const [loading, setLoading] = useState(false);
     const debounceTimerRef = useRef(null);
     const isRefreshing = useRef(false);
     const lastSignature = useRef('');
     const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
-    const loadHits = useHitContextSelector(ctx => ctx.loadHits);
+    const loadRecords = useRecordContextSelector(ctx => ctx.loadRecords);
     // Subscribe to hits from HitProvider cache based on current hitIds in the view
     // Uses memoized selector to avoid unnecessary re-renders on unrelated hit updates
-    const hits = useSelectHitsByIds(hitIds);
+    const records = useSelectRecordsByIds(recordIds);
     // Create a stable signature that only changes when relevant fields change
-    const hitsSignature = useMemo(() => createSignatureFromHits(hits), [hits]);
+    const recordsSignature = useMemo(() => createSignatureFromRecords(records), [records]);
     const refreshView = useCallback(async () => {
         if (!view?.query || isRefreshing.current) {
             onRefreshComplete?.();
@@ -78,21 +84,21 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         isRefreshing.current = true;
         try {
-            const res = await dispatchApi(api.search.hit.post({
+            const res = await dispatchApi(api.v2.search.post(view.indexes, {
                 query: view.query,
                 rows: limit,
                 metadata: ['analytic']
             }));
-            const fetchedHits = res.items ?? [];
-            loadHits(fetchedHits);
-            setHitIds(fetchedHits.map(h => h.howler.id));
-            lastSignature.current = createSignatureFromHits(fetchedHits);
+            const fetchedRecords = res.items ?? [];
+            loadRecords(fetchedRecords);
+            setRecordIds(fetchedRecords.map(r => r.howler.id));
+            lastSignature.current = createSignatureFromRecords(fetchedRecords);
         }
         finally {
             isRefreshing.current = false;
             onRefreshComplete?.();
         }
-    }, [dispatchApi, limit, view?.query, loadHits, onRefreshComplete]);
+    }, [dispatchApi, limit, view?.query, view?.indexes, loadRecords, onRefreshComplete]);
     const debouncedRefresh = useCallback(() => {
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
@@ -125,16 +131,16 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     }, [view?.query, limit, refreshView]);
     // Monitor hits currently in the view for changes that might affect query results
     useEffect(() => {
-        if (!hitsSignature || hitIds.length === 0 || !lastSignature.current) {
-            lastSignature.current = hitsSignature;
+        if (!recordsSignature || recordIds.length === 0 || !lastSignature.current) {
+            lastSignature.current = recordsSignature;
             return;
         }
         // Check if signature actually changed
-        if (lastSignature.current === hitsSignature) {
+        if (lastSignature.current === recordsSignature) {
             return;
         }
         debouncedRefresh();
-    }, [hitsSignature, hitIds, debouncedRefresh]);
+    }, [recordsSignature, recordIds, debouncedRefresh]);
     useEffect(() => {
         return () => {
             if (debounceTimerRef.current) {
@@ -151,6 +157,6 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (_jsx(HitContextMenu, { getSelectedId: getSelectedId, children: hits.map(h => (_jsx(Card, { id: h.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : records.length > 0 ? (_jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: records.map((r) => (_jsx(Card, { id: r.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${r.howler.id}`), children: _jsx(CardContent, { children: r.__index == 'hit' ? (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: r })) : (_jsx(ObservableCard, { observable: r })) }) }, r.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

package/components/routes/observables/ObservableViewer.d.ts

@@ -0,0 +1,7 @@
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type FC } from 'react';
+declare const ObservableViewer: FC<{
+    observable?: Observable;
+    observableId?: string;
+}>;
+export default ObservableViewer;

package/components/routes/observables/ObservableViewer.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Skeleton } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import ObjectDetails from '@cccsaurora/howler-ui/components/elements/ObjectDetails';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useEffect, useState } from 'react';
+const ObservableViewer = ({ observable: provided, observableId }) => {
+    const { dispatchApi } = useMyApi();
+    const [observable, setObservable] = useState(null);
+    useEffect(() => {
+        if (provided) {
+            setObservable(provided);
+        }
+    }, [provided]);
+    useEffect(() => {
+        if (observableId) {
+            dispatchApi(api.v2.search.post('observable', { query: `howler.id:${observableId}`, rows: 1 }), {
+                throwError: false
+            }).then(res => setObservable(res.items[0]));
+        }
+    }, [dispatchApi, observableId]);
+    if (!observable) {
+        return;
+    }
+    return _jsx(Box, { p: 1, children: observable ? _jsx(ObjectDetails, { obj: observable }) : _jsx(Skeleton, { height: 120 }) });
+};
+export default ObservableViewer;

package/components/routes/overviews/OverviewViewer.js

@@ -15,7 +15,7 @@ import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
 import { useSearchParams } from 'react-router-dom';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-import OverviewEditor from './OverviewEditor';
+import MarkdownEditor from '../../elements/MarkdownEditor';
 import { useStartingTemplate } from './startingTemplate';
 const OverviewViewer = () => {
     const theme = useTheme();
@@ -188,7 +188,7 @@ const OverviewViewer = () => {
                                         right: `calc(50% + 7px - ${x}px)`,
                                         mr: -2.4,
                                         pr: 1.5
-                                    }, children: _jsx(OverviewEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
+                                    }, children: _jsx(MarkdownEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
                                     position: 'absolute',
                                     top: 0,
                                     bottom: 0,

package/components/routes/views/ViewComposer.js

@@ -4,10 +4,11 @@ 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 api from '@cccsaurora/howler-ui/api';
+import {} from '@cccsaurora/howler-ui/api/search';
 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 { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
@@ -17,6 +18,7 @@ import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
 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';
@@ -26,8 +28,9 @@ 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,8 +41,10 @@ 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');
@@ -56,14 +61,17 @@ const ViewComposer = () => {
     const [searching, setSearching] = useState(false);
     const [error, setError] = useState(null);
     const [response, setResponse] = useState();
+    const [isLoadingView, setIsLoadingView] = useState(!!routeParams.id);
     const onSave = useCallback(async () => {
         setLoading(true);
         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: {
@@ -77,6 +85,7 @@ const ViewComposer = () => {
                     title,
                     type,
                     query,
+                    indexes: normalizedIndexes,
                     sort,
                     span,
                     settings: { advance_on_triage: advanceOnTriage }
@@ -101,23 +110,24 @@ const ViewComposer = () => {
         sort,
         span,
         advanceOnTriage,
+        indexes,
         navigate,
         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,18 +136,25 @@ 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) {
+            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) {
+        if (query && !isLoadingView) {
             search(query);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sort, span]);
+    }, [sort, span, indexes, isLoadingView]);
     useEffect(() => {
         if (!routeParams.id) {
             return;
@@ -153,13 +170,23 @@ const ViewComposer = () => {
             }
             setTitle(viewToEdit.title);
             setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
-            setQuery(viewToEdit.query);
+            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 +199,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(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 } }), _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(record => record.__index === 'hit' ? (_jsx(HitCard, { id: record.howler.id, layout: HitLayout.DENSE }, record.howler.id)) : (_jsx(ObservableCard, { observable: record }, record.howler.id)))] }) })] }) }) }) }));
 };
 export default ViewComposer;

package/locales/en/translation.json

@@ -1,5 +1,7 @@
 {
     "*": "All values",
+    "Protected B": "Protected B",
+    "Unclassified//Official Use Only": "Unclassified//Official Use Only",
     "actions.running": "Action \"{{action}}\" is executing.",
     "actions.succeeded": "Action \"{{action}}\" completed successfully.",
     "add": "Add",
@@ -11,6 +13,7 @@
     "analytic.notebook.error.minFields": "Name and link are required.",
     "analytic.notebook.link": "Link",
     "analytic.notebook.name": "Name",
+    "analytic.open": "Open Analytic",
     "any": "Any",
     "api.user.apikey.removed": "API key removed successfully.",
     "api.user.apikey.updated": "New API key added successfully.",
@@ -79,6 +82,8 @@
     "comments.edit.stop": "Stop Editing",
     "comments.edited": "Edited",
     "comments.quote": "Quote Reply",
+    "complete": "Complete",
+    "crisis": "Crisis",
     "custom": "Custom",
     "date.range.1.day": "The last day",
     "date.range.1.month": "The last month",
@@ -104,8 +109,11 @@
     "drawer.expand": "Expand Menu",
     "duplicates.omitted": "Some duplicate entries have been omitted.",
     "edit": "Edit",
+    "event.module": "Event Module",
+    "event.type": "Event Type",
     "features.warning.description": "This feature is undergoing active development, and is not yet in a finished state. You may encounter bugs or instability.",
     "features.warning.title": "Feature In Active Development",
+    "focus": "Main focus",
     "global": "Global",
     "help.actions.introduction": "Introduction to Actions",
     "help.hit.banner.description": "See the below hit banner example for the hit keys necessary to properly populate it. If you have any additional questions, ask in the HOWLER support channel.",
@@ -162,16 +170,20 @@
     "hit.header.assignment": "Assignment: {{user}}",
     "hit.header.assignment.add": "Assign to a user",
     "hit.header.assignment.change": "Change assignment",
-    "hit.header.bundlesize": "{{hits}} hits",
     "hit.header.escalation": "Escalation Level: ",
     "hit.header.indicators": "Indicators",
     "hit.header.rationale": "Rationale",
+    "hit.header.related": "{{count}} related records",
     "hit.header.scrutiny": "Scrutiny: ",
     "hit.header.status": "Status: ",
     "hit.header.summary": "Summary",
     "hit.header.target": "Target",
     "hit.header.threat": "Threat",
+    "hit.header.view.case": "View case {{id}}",
+    "hit.header.view.hit": "View hit {{id}}",
+    "hit.header.view.observable": "View observable {{id}}",
     "hit.header.votes": "Votes: ",
+    "hit.howler.related": "{{count}} related records",
     "hit.label": "Labels",
     "hit.label.category.assignments": "Category: Assignments - Specifies what analyst or team of analysts is assigned to triaging this hit.",
     "hit.label.category.campaign": "Catergory: Campaign - Identifies ongoing campaigns from specific malware families or phishing initiatives. They should only be considered correct attributions if the hit is promoted to evidence.",
@@ -187,15 +199,16 @@
     "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.",
     "hit.notebook.goTo": "Go to Jupyterhub",
     "hit.notebook.select": "Please Select a notebook",
     "hit.notebook.tooltip": "Open in Jupyterhub",
+    "hit.open": "Open Hit",
     "hit.overview.missing": "No overview has been created for this hit. In order to create an overview, press the add button to the right.",
     "hit.panel.aggregation.run": "Create Summary",
-    "hit.panel.analytic.open": "Open Analytic",
     "hit.panel.bundles.open": "Parent Bundles",
     "hit.panel.bundles.open.prompt": "Open Parent Bundle",
     "hit.panel.close": "Close",
@@ -208,9 +221,12 @@
     "hit.panel.exclude": "Exclude By",
     "hit.panel.hit.noselection": "No hit has been selected",
     "hit.panel.include": "Include By",
-    "hit.panel.open": "Open Hit Viewer",
     "hit.panel.view.layout": "Change View Panel",
     "hit.quicksearch": "Search by assignment, analytic, detection or status",
+    "hit.related.tab.case": "Cases",
+    "hit.related.tab.hit": "Hits",
+    "hit.related.tab.links": "Links",
+    "hit.related.tab.observable": "Observables",
     "hit.search.aggregate.button": "Create Summary",
     "hit.search.button": "Perform search",
     "hit.search.custom": "Custom Sort",
@@ -219,6 +235,8 @@
     "hit.search.filter.fields": "Fields",
     "hit.search.filter.label": "Lookup Filters",
     "hit.search.filter.values": "Values",
+    "hit.search.index.hit": "Hits",
+    "hit.search.index.observable": "Observables",
     "hit.search.invalid": "Invalid Query",
     "hit.search.keyboard": "Keyboard shortcuts",
     "hit.search.keyboard.no_shortcuts": "No shortcuts",
@@ -256,6 +274,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",
@@ -291,6 +310,19 @@
     "modal.action.empty": "Action Name cannot be empty.",
     "modal.action.label": "Action Name",
     "modal.action.title": "Save Action",
+    "modal.cases.add_to_case": "Add to Case",
+    "modal.cases.add_to_case.full_path": "Full path: {{path}}",
+    "modal.cases.add_to_case.select_case": "Search Cases",
+    "modal.cases.add_to_case.select_path": "Select Folder Path",
+    "modal.cases.add_to_case.title": "Item Title",
+    "modal.cases.rename_item": "Rename Item",
+    "modal.cases.rename_item.error.empty": "Name cannot be empty",
+    "modal.cases.rename_item.error.slash": "Name cannot contain '/'",
+    "modal.cases.rename_item.error.taken": "An item already exists at this path",
+    "modal.cases.rename_item.folder_path": "Folder: {{path}}",
+    "modal.cases.rename_item.new_name": "New Name",
+    "modal.cases.resolve": "Resolve Case",
+    "modal.cases.resolve.description": "When resolving a case, you must either assess all open alerts, or add an assessment to the alerts.",
     "modal.confirm.delete.description": "Are you sure you want to delete this item?",
     "modal.confirm.delete.title": "Confirm Deletion",
     "modal.rationale.description": "Provide a rationale that succinctly explains to other analysts why you are confident in this assessment.",
@@ -312,6 +344,8 @@
     "modal.rule.title": "Create a New Rule",
     "no.data": "No Data",
     "none": "None",
+    "normal": "Normal Priority",
+    "observable.open": "Open Observable",
     "on": "on",
     "open": "Open",
     "operations.add_label": "Add Label",
@@ -331,6 +365,37 @@
     "owner": "Owner",
     "page.404.description": "The page you are looking for cannot be found...",
     "page.404.title": "404: Not found",
+    "page.cases.assets": "Assets",
+    "page.cases.assets.empty": "No assets found.",
+    "page.cases.assets.filter_by_type": "Filter by type:",
+    "page.cases.assets.seen_in": "Seen in",
+    "page.cases.assets.type.hash": "Hash",
+    "page.cases.assets.type.hosts": "Host",
+    "page.cases.assets.type.id": "ID",
+    "page.cases.assets.type.ids": "ID",
+    "page.cases.assets.type.ip": "IP",
+    "page.cases.assets.type.signature": "Signature",
+    "page.cases.assets.type.uri": "URI",
+    "page.cases.assets.type.user": "User",
+    "page.cases.created": "Created",
+    "page.cases.dashboard": "Dashboard",
+    "page.cases.dashboard.alerts": "Alerts",
+    "page.cases.dashboard.cases": "Related Cases",
+    "page.cases.dashboard.duration": "Duration",
+    "page.cases.dashboard.indicators": "Indicators",
+    "page.cases.dashboard.target": "Targets",
+    "page.cases.dashboard.tasks": "Tasks",
+    "page.cases.dashboard.threat": "Threats",
+    "page.cases.detail.participants": "Participants",
+    "page.cases.detail.properties": "Properties",
+    "page.cases.detail.status": "Status",
+    "page.cases.escalation": "Escalation",
+    "page.cases.sidebar.folder.remove": "Remove folder",
+    "page.cases.sidebar.item.open": "Open item",
+    "page.cases.sidebar.item.remove": "Remove item",
+    "page.cases.sidebar.item.rename": "Rename item",
+    "page.cases.sources": "Sources",
+    "page.cases.updated": "Updated",
     "page.dashboard.settings.edit": "Edit Dashboard",
     "page.dashboard.settings.refreshRate": "Refresh Rate",
     "page.dashboard.title": "Dashboard",
@@ -355,6 +420,7 @@
     "page.help": "Help",
     "page.help.title": "Help Dashboard",
     "page.login.button": "Sign in",
+    "page.login.error": "Just type anything in the username and password fields...",
     "page.login.password": "Password",
     "page.login.username": "Username",
     "page.logout": "Logging out current user ... ",
@@ -401,6 +467,8 @@
     "page.user.search.column.groups": "Groups",
     "page.user.search.column.username": "Username",
     "page.user.search.prompt": "Search by username, fullname, email or group",
+    "pages.cases.detail.participants": "Participants",
+    "pages.cases.detail.status": "Status",
     "password": "New Password",
     "password.confirm": "Confirm Password",
     "password.match": "Password and Confirm Password must match",
@@ -414,6 +482,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}}",
@@ -529,6 +598,11 @@
     "route.analytics.triage.title": "Triage Settings",
     "route.analytics.updated": "Analytic Updated!",
     "route.analytics.view": "View Analytic",
+    "route.cases": "Cases",
+    "route.cases.create": "Create Case",
+    "route.cases.manager.search": "Search Cases",
+    "route.cases.search.prompt": "Search Cases via title, summary or indicators",
+    "route.cases.view": "View Case",
     "route.clear": "Clear query",
     "route.dossiers": "Dossiers",
     "route.dossiers.create": "New Dossier",
@@ -591,8 +665,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",
@@ -705,6 +781,7 @@
     "search.result.showing": "Showing {{offset}} to {{length}} of {{total}} results",
     "search.result.showing.single": "No results",
     "search.total": "There are a total of {{count}} hits matching this query.",
+    "started": "Started",
     "templates.edit.analytic": "Edit analytic template",
     "templates.edit.detection": "Edit detection template",
     "to": "to",