@cccsaurora/howler-ui 2.18.0 → 2.19.0-cases.862

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 { 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/overviews/template/en.md.js

@@ -1 +1 @@
-export default "# Creating an Overview\n\nOverviews can be used to modify the way data is presented on alerts that match the overview's settings. Overviews are, by design, easy to create and quite flexible.\n\n## Getting Started\n\nThe basic building blocks of overviews are:\n\n1. Markdown\n2. Handlebars\n\nWe will quickly explain these.\n\n### Markdown\n\nQuoting from the excellent [markdownguide.org](https://www.markdownguide.org/getting-started/):\n\n> Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by [John Gruber](https://daringfireball.net/projects/markdown/) in 2004, Markdown is now one of the world's most popular markup languages.\n>\n> Using Markdown is different than using a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn't like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.\n>\n> For example, to denote a heading, you add a number sign before it (e.g., `# Heading One`). Or to make a phrase bold, you add two asterisks before and after it (e.g., `**this text is bold**`). It may take a while to get used to seeing Markdown syntax in your text, especially if you're accustomed to WYSIWYG applications.\n\n---\n\n### Handlebars\n\nQuoting from [handlebarsjs.com](https://handlebarsjs.com/guide/):\n\n> Handlebars is a simple templating language.\n>\n> It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.\n>\n>```html\n> <p>{{curly \"firstname\"}} {{curly \"lastname\"}}</p>\n>```\n>\n> A handlebars expression is a double curly bracket, some contents, followed by a set of closing double curly brackets. When the template is executed, these expressions are replaced with values from an input object.\n\n---\n\nFor our cases, we use handlebars to replace specific parts of markdown with the values included in a given howler hit. For example:\n\n```markdown\nThis analytic is **{{curly \"howler.analytic\"}}**\n```\n\nbecomes:\n\n> This analytic is **{{howler.analytic}}**.\n\nFor more information on handlebars, check out:\n\n- [What is Handlebars?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Handlebars Expressions](https://handlebarsjs.com/guide/expressions.html)\n\n## Combining Markdown and Handlebars\n\nYou can use handlebars for template replacement throughout your markdown. Below is an example table using handlebars and markdown:\n\n```markdown\n\n| Source IP | Destination IP |\n| --- | --- |\n| {{curly \"source.ip\"}} |{{curly \"destination.ip\"}} |\n```\n\nrenders as:\n\n| Source IP | Destination IP |\n| --- | --- |\n| {{source.ip}} |{{destination.ip}} |\n\n## Advanced Handlebars\n\nHowler integrates a number of helper functions for you to work with.\n\n### Control Expressions\n\nFor use as subexpressions, we expose a number of conditional checks:\n\n**Equality:**\n\nGiven `howler.status` is {{howler.status}}:\n\n```markdown\n{{curly '#if (equals howler.status \"open\")'}}\nHit is open!\n{{curly \"/if\"}}\n{{curly '#if (equals howler.status \"resolved\")'}}\nHit is resolved!\n{{curly \"/if\"}}\n```\n\n{{#if (equals howler.status \"open\")}}\nHit is open!\n{{/if}}\n{{#if (equals howler.status \"resolved\")}}\nHit is resolved!\n{{/if}}\n\n**AND/OR/NOT:**\n\nGiven `howler.status` is {{howler.status}}, and `howler.escalation` is {{howler.escalation}}:\n\n```markdown\n{{curly '#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))'}}\nThis is correct!\n{{curly \"/if\"}}\n{{curly '#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))'}}\nThis is wrong!\n{{curly \"/if\"}}\n```\n\n{{#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))}}\nThis is correct!\n{{/if}}\n{{#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))}}\nThis is wrong!\n{{/if}}\n\n```markdown\n{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}\nAlways shows!\n{{curly \"/if\"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nAlways shows!\n{{/if}}\n\n---\n\n### String Operations\n\n**String Concatenation:**\n\n```markdown\n{{curly 'join \"string one \" \"string two\"'}}\n```\n\n{{join \"string one \" \"string two\"}}\n\n**Uppercase/Lowercase:**\n\n```markdown\n{{curly 'upper \"make this uppercase\"'}}\n{{curly 'lower \"MAKE THIS LOWERCASE\"'}}\n```\n\n{{upper \"make this uppercase\"}}\n\n{{lower \"MAKE THIS LOWERCASE\"}}\n\n---\n\n### Fetching Data\n\nYou can also make basic fetch requests for, and parse, JSON data from external sources:\n\n```markdown\n{{curly 'fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"'}}\n```\n\n{{fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"}}\n\n## Full Helper List\n"
+export default "# Creating an Overview\n\nOverviews can be used to modify the way data is presented on alerts that match the overview's settings. Overviews are, by design, easy to create and quite flexible.\n\n## Getting Started\n\nThe basic building blocks of overviews are:\n\n1. Markdown\n2. Handlebars\n\nWe will quickly explain these.\n\n### Markdown\n\nQuoting from the excellent [markdownguide.org](https://www.markdownguide.org/getting-started/):\n\n> Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by [John Gruber](https://daringfireball.net/projects/markdown/) in 2004, Markdown is now one of the world's most popular markup languages.\n>\n> Using Markdown is different than using a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn't like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.\n>\n> For example, to denote a heading, you add a number sign before it (e.g., `# Heading One`). Or to make a phrase bold, you add two asterisks before and after it (e.g., `**this text is bold**`). It may take a while to get used to seeing Markdown syntax in your text, especially if you're accustomed to WYSIWYG applications.\n\n---\n\n### Handlebars\n\nQuoting from [handlebarsjs.com](https://handlebarsjs.com/guide/):\n\n> Handlebars is a simple templating language.\n>\n> It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.\n>\n> ```html\n> <p>{{curly \"firstname\"}} {{curly \"lastname\"}}</p>\n> ```\n>\n> A handlebars expression is a double curly bracket, some contents, followed by a set of closing double curly brackets. When the template is executed, these expressions are replaced with values from an input object.\n\n---\n\nFor our cases, we use handlebars to replace specific parts of markdown with the values included in a given howler hit. For example:\n\n```markdown\nThis analytic is **{{curly \"howler.analytic\"}}**\n```\n\nbecomes:\n\n> This analytic is **{{howler.analytic}}**.\n\nFor more information on handlebars, check out:\n\n- [What is Handlebars?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Handlebars Expressions](https://handlebarsjs.com/guide/expressions.html)\n\n## Combining Markdown and Handlebars\n\nYou can use handlebars for template replacement throughout your markdown. Below is an example table using handlebars and markdown:\n\n```markdown\n| Source IP             | Destination IP             |\n| --------------------- | -------------------------- |\n| {{curly \"source.ip\"}} | {{curly \"destination.ip\"}} |\n```\n\nrenders as:\n\n| Source IP     | Destination IP     |\n| ------------- | ------------------ |\n| {{source.ip}} | {{destination.ip}} |\n\n## Advanced Handlebars\n\nHowler integrates a number of helper functions for you to work with.\n\n### Control Expressions\n\nFor use as subexpressions, we expose a number of conditional checks:\n\n**Equality:**\n\nGiven `howler.status` is {{howler.status}}:\n\n```markdown\n{{curly '#if (equals howler.status \"open\")'}}\nHit is open!\n{{curly \"/if\"}}\n{{curly '#if (equals howler.status \"resolved\")'}}\nHit is resolved!\n{{curly \"/if\"}}\n```\n\n{{#if (equals howler.status \"open\")}}\nHit is open!\n{{/if}}\n{{#if (equals howler.status \"resolved\")}}\nHit is resolved!\n{{/if}}\n\n**AND/OR/NOT:**\n\nGiven `howler.status` is {{howler.status}}, and `howler.escalation` is {{howler.escalation}}:\n\n```markdown\n{{curly '#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))'}}\nThis is correct!\n{{curly \"/if\"}}\n{{curly '#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))'}}\nThis is wrong!\n{{curly \"/if\"}}\n```\n\n{{#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))}}\nThis is correct!\n{{/if}}\n{{#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))}}\nThis is wrong!\n{{/if}}\n\n```markdown\n{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}\nAlways shows!\n{{curly \"/if\"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nAlways shows!\n{{/if}}\n\n---\n\n### String Operations\n\n**String Concatenation:**\n\n```markdown\n{{curly 'join \"string one \" \"string two\"'}}\n```\n\n{{join \"string one \" \"string two\"}}\n\n**Uppercase/Lowercase:**\n\n```markdown\n{{curly 'upper \"make this uppercase\"'}}\n{{curly 'lower \"MAKE THIS LOWERCASE\"'}}\n```\n\n{{upper \"make this uppercase\"}}\n\n{{lower \"MAKE THIS LOWERCASE\"}}\n\n---\n\n### Fetching Data\n\nYou can also make basic fetch requests for, and parse, JSON data from external sources:\n\n```markdown\n{{curly 'fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"'}}\n```\n\n{{fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"}}\n\n## Full Helper List\n"

package/components/routes/overviews/template/fr.md.js

@@ -1 +1 @@
-export default "# Cr\u00e9er un aper\u00e7u\n\nLes aper\u00e7us peuvent \u00eatre utilis\u00e9s pour modifier la fa\u00e7on dont les donn\u00e9es sont pr\u00e9sent\u00e9es sur les alertes qui correspondent aux param\u00e8tres de l'aper\u00e7u. Les aper\u00e7us sont, par conception, faciles \u00e0 cr\u00e9er et assez flexibles.\n\n## Premiers pas\n\nLes \u00e9l\u00e9ments de base des aper\u00e7us sont :\n\n1. Markdown\n2. Handlebars\n\nNous allons rapidement expliquer ces \u00e9l\u00e9ments.\n\n### Markdown\n\nCitation de l'excellent [markdownguide.org](https://www.markdownguide.org/getting-started/) :\n\n> Markdown est un langage de balisage l\u00e9ger que vous pouvez utiliser pour ajouter des \u00e9l\u00e9ments de formatage aux documents texte en texte brut. Cr\u00e9\u00e9 par [John Gruber](https://daringfireball.net/projects/markdown/) en 2004, Markdown est maintenant l'un des langages de balisage les plus populaires au monde.\n>\n> L'utilisation de Markdown est diff\u00e9rente de l'utilisation d'un \u00e9diteur [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG). Dans une application comme Microsoft Word, vous cliquez sur des boutons pour formater les mots et les phrases, et les changements sont visibles imm\u00e9diatement. Markdown n'est pas comme cela. Lorsque vous cr\u00e9ez un fichier format\u00e9 en Markdown, vous ajoutez une syntaxe Markdown au texte pour indiquer quels mots et phrases doivent appara\u00eetre diff\u00e9remment.\n>\n> Par exemple, pour d\u00e9signer un titre, vous ajoutez un signe di\u00e8se avant celui-ci (par ex., `# Titre Un`). Ou pour mettre une phrase en gras, vous ajoutez deux ast\u00e9risques avant et apr\u00e8s (par ex., `**ce texte est en gras**`). Il peut falloir un certain temps pour s'habituer \u00e0 voir la syntaxe Markdown dans votre texte, surtout si vous \u00eates habitu\u00e9 aux applications WYSIWYG.\n\n---\n\n### Handlebars\n\nCitation de [handlebarsjs.com](https://handlebarsjs.com/guide/) :\n\n> Handlebars est un langage de template simple.\n>\n> Il utilise un template et un objet d'entr\u00e9e pour g\u00e9n\u00e9rer du HTML ou d'autres formats de texte. Les templates Handlebars ressemblent \u00e0 du texte normal avec des expressions Handlebars int\u00e9gr\u00e9es.\n>\n>```html\n> <p>{{curly \"firstname\"}} {{curly \"lastname\"}}</p>\n>```\n>\n> Une expression handlebars est une double accolade, du contenu, suivi d'un ensemble d'accolades fermantes doubles. Lorsque le template est ex\u00e9cut\u00e9, ces expressions sont remplac\u00e9es par des valeurs d'un objet d'entr\u00e9e.\n\n---\n\nDans nos cas, nous utilisons handlebars pour remplacer des parties sp\u00e9cifiques du markdown par les valeurs incluses dans un r\u00e9sultat howler donn\u00e9. Par exemple :\n\n```markdown\nCette analytique est **{{curly \"howler.analytic\"}}**\n```\n\ndevient :\n\n> Cette analytique est **{{howler.analytic}}**.\n\nPour plus d'informations sur handlebars, consultez :\n\n- [Qu'est-ce que Handlebars ?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Expressions Handlebars](https://handlebarsjs.com/guide/expressions.html)\n\n## Combiner Markdown et Handlebars\n\nVous pouvez utiliser handlebars pour le remplacement de template dans tout votre markdown. Voici un exemple de tableau utilisant handlebars et markdown :\n\n```markdown\n\n| IP Source | IP Destination |\n| --- | --- |\n| {{curly \"source.ip\"}} |{{curly \"destination.ip\"}} |\n```\n\ns'affiche comme :\n\n| IP Source | IP Destination |\n| --- | --- |\n| {{source.ip}} |{{destination.ip}} |\n\n## Handlebars avanc\u00e9s\n\nHowler int\u00e8gre un certain nombre de fonctions d'aide avec lesquelles vous pouvez travailler.\n\n### Expressions de contr\u00f4le\n\nPour utilisation comme sous-expressions, nous exposons un certain nombre de v\u00e9rifications conditionnelles :\n\n**\u00c9galit\u00e9 :**\n\n\u00c9tant donn\u00e9 que `howler.status` est {{howler.status}} :\n\n```markdown\n{{curly '#if (equals howler.status \"open\")'}}\nLe r\u00e9sultat est ouvert !\n{{curly \"/if\"}}\n{{curly '#if (equals howler.status \"resolved\")'}}\nLe r\u00e9sultat est r\u00e9solu !\n{{curly \"/if\"}}\n```\n\n{{#if (equals howler.status \"open\")}}\nLe r\u00e9sultat est ouvert !\n{{/if}}\n{{#if (equals howler.status \"resolved\")}}\nLe r\u00e9sultat est r\u00e9solu !\n{{/if}}\n\n**ET/OU/NON :**\n\n\u00c9tant donn\u00e9 que `howler.status` est {{howler.status}}, et `howler.escalation` est {{howler.escalation}} :\n\n```markdown\n{{curly '#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))'}}\nC'est correct !\n{{curly \"/if\"}}\n{{curly '#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))'}}\nC'est incorrect !\n{{curly \"/if\"}}\n```\n\n{{#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))}}\nC'est correct !\n{{/if}}\n{{#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))}}\nC'est incorrect !\n{{/if}}\n\n```markdown\n{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}\nS'affiche toujours !\n{{curly \"/if\"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nS'affiche toujours !\n{{/if}}\n\n---\n\n### Op\u00e9rations sur les cha\u00eenes\n\n**Concat\u00e9nation de cha\u00eenes :**\n\n```markdown\n{{curly 'join \"cha\u00eene une \" \"cha\u00eene deux\"'}}\n```\n\n{{join \"cha\u00eene une \" \"cha\u00eene deux\"}}\n\n**Majuscules/Minuscules :**\n\n```markdown\n{{curly 'upper \"mettre ceci en majuscules\"'}}\n{{curly 'lower \"METTRE CECI EN MINUSCULES\"'}}\n```\n\n{{upper \"mettre ceci en majuscules\"}}\n\n{{lower \"METTRE CECI EN MINUSCULES\"}}\n\n---\n\n### R\u00e9cup\u00e9ration de donn\u00e9es\n\nVous pouvez \u00e9galement faire des requ\u00eates fetch de base pour r\u00e9cup\u00e9rer et analyser des donn\u00e9es JSON de sources externes :\n\n```markdown\n{{curly 'fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"'}}\n```\n\n{{fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"}}\n\n## Liste compl\u00e8te des assistants\n"
+export default "# Cr\u00e9er un aper\u00e7u\n\nLes aper\u00e7us peuvent \u00eatre utilis\u00e9s pour modifier la fa\u00e7on dont les donn\u00e9es sont pr\u00e9sent\u00e9es sur les alertes qui correspondent aux param\u00e8tres de l'aper\u00e7u. Les aper\u00e7us sont, par conception, faciles \u00e0 cr\u00e9er et assez flexibles.\n\n## Premiers pas\n\nLes \u00e9l\u00e9ments de base des aper\u00e7us sont :\n\n1. Markdown\n2. Handlebars\n\nNous allons rapidement expliquer ces \u00e9l\u00e9ments.\n\n### Markdown\n\nCitation de l'excellent [markdownguide.org](https://www.markdownguide.org/getting-started/) :\n\n> Markdown est un langage de balisage l\u00e9ger que vous pouvez utiliser pour ajouter des \u00e9l\u00e9ments de formatage aux documents texte en texte brut. Cr\u00e9\u00e9 par [John Gruber](https://daringfireball.net/projects/markdown/) en 2004, Markdown est maintenant l'un des langages de balisage les plus populaires au monde.\n>\n> L'utilisation de Markdown est diff\u00e9rente de l'utilisation d'un \u00e9diteur [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG). Dans une application comme Microsoft Word, vous cliquez sur des boutons pour formater les mots et les phrases, et les changements sont visibles imm\u00e9diatement. Markdown n'est pas comme cela. Lorsque vous cr\u00e9ez un fichier format\u00e9 en Markdown, vous ajoutez une syntaxe Markdown au texte pour indiquer quels mots et phrases doivent appara\u00eetre diff\u00e9remment.\n>\n> Par exemple, pour d\u00e9signer un titre, vous ajoutez un signe di\u00e8se avant celui-ci (par ex., `# Titre Un`). Ou pour mettre une phrase en gras, vous ajoutez deux ast\u00e9risques avant et apr\u00e8s (par ex., `**ce texte est en gras**`). Il peut falloir un certain temps pour s'habituer \u00e0 voir la syntaxe Markdown dans votre texte, surtout si vous \u00eates habitu\u00e9 aux applications WYSIWYG.\n\n---\n\n### Handlebars\n\nCitation de [handlebarsjs.com](https://handlebarsjs.com/guide/) :\n\n> Handlebars est un langage de template simple.\n>\n> Il utilise un template et un objet d'entr\u00e9e pour g\u00e9n\u00e9rer du HTML ou d'autres formats de texte. Les templates Handlebars ressemblent \u00e0 du texte normal avec des expressions Handlebars int\u00e9gr\u00e9es.\n>\n> ```html\n> <p>{{curly \"firstname\"}} {{curly \"lastname\"}}</p>\n> ```\n>\n> Une expression handlebars est une double accolade, du contenu, suivi d'un ensemble d'accolades fermantes doubles. Lorsque le template est ex\u00e9cut\u00e9, ces expressions sont remplac\u00e9es par des valeurs d'un objet d'entr\u00e9e.\n\n---\n\nDans nos cas, nous utilisons handlebars pour remplacer des parties sp\u00e9cifiques du markdown par les valeurs incluses dans un r\u00e9sultat howler donn\u00e9. Par exemple :\n\n```markdown\nCette analytique est **{{curly \"howler.analytic\"}}**\n```\n\ndevient :\n\n> Cette analytique est **{{howler.analytic}}**.\n\nPour plus d'informations sur handlebars, consultez :\n\n- [Qu'est-ce que Handlebars ?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Expressions Handlebars](https://handlebarsjs.com/guide/expressions.html)\n\n## Combiner Markdown et Handlebars\n\nVous pouvez utiliser handlebars pour le remplacement de template dans tout votre markdown. Voici un exemple de tableau utilisant handlebars et markdown :\n\n```markdown\n| IP Source             | IP Destination             |\n| --------------------- | -------------------------- |\n| {{curly \"source.ip\"}} | {{curly \"destination.ip\"}} |\n```\n\ns'affiche comme :\n\n| IP Source     | IP Destination     |\n| ------------- | ------------------ |\n| {{source.ip}} | {{destination.ip}} |\n\n## Handlebars avanc\u00e9s\n\nHowler int\u00e8gre un certain nombre de fonctions d'aide avec lesquelles vous pouvez travailler.\n\n### Expressions de contr\u00f4le\n\nPour utilisation comme sous-expressions, nous exposons un certain nombre de v\u00e9rifications conditionnelles :\n\n**\u00c9galit\u00e9 :**\n\n\u00c9tant donn\u00e9 que `howler.status` est {{howler.status}} :\n\n```markdown\n{{curly '#if (equals howler.status \"open\")'}}\nLe r\u00e9sultat est ouvert !\n{{curly \"/if\"}}\n{{curly '#if (equals howler.status \"resolved\")'}}\nLe r\u00e9sultat est r\u00e9solu !\n{{curly \"/if\"}}\n```\n\n{{#if (equals howler.status \"open\")}}\nLe r\u00e9sultat est ouvert !\n{{/if}}\n{{#if (equals howler.status \"resolved\")}}\nLe r\u00e9sultat est r\u00e9solu !\n{{/if}}\n\n**ET/OU/NON :**\n\n\u00c9tant donn\u00e9 que `howler.status` est {{howler.status}}, et `howler.escalation` est {{howler.escalation}} :\n\n```markdown\n{{curly '#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))'}}\nC'est correct !\n{{curly \"/if\"}}\n{{curly '#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))'}}\nC'est incorrect !\n{{curly \"/if\"}}\n```\n\n{{#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))}}\nC'est correct !\n{{/if}}\n{{#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))}}\nC'est incorrect !\n{{/if}}\n\n```markdown\n{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}\nS'affiche toujours !\n{{curly \"/if\"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nS'affiche toujours !\n{{/if}}\n\n---\n\n### Op\u00e9rations sur les cha\u00eenes\n\n**Concat\u00e9nation de cha\u00eenes :**\n\n```markdown\n{{curly 'join \"cha\u00eene une \" \"cha\u00eene deux\"'}}\n```\n\n{{join \"cha\u00eene une \" \"cha\u00eene deux\"}}\n\n**Majuscules/Minuscules :**\n\n```markdown\n{{curly 'upper \"mettre ceci en majuscules\"'}}\n{{curly 'lower \"METTRE CECI EN MINUSCULES\"'}}\n```\n\n{{upper \"mettre ceci en majuscules\"}}\n\n{{lower \"METTRE CECI EN MINUSCULES\"}}\n\n---\n\n### R\u00e9cup\u00e9ration de donn\u00e9es\n\nVous pouvez \u00e9galement faire des requ\u00eates fetch de base pour r\u00e9cup\u00e9rer et analyser des donn\u00e9es JSON de sources externes :\n\n```markdown\n{{curly 'fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"'}}\n```\n\n{{fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"}}\n\n## Liste compl\u00e8te des assistants\n"

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;