@cccsaurora/howler-ui 2.15.0-dev.283 → 2.15.0-dev.288

package/api/search/explain/hit.d.ts

@@ -0,0 +1,3 @@
+import type { HowlerExplainSearchRequest, HowlerExplainSearchResponse } from '@cccsaurora/howler-ui/api/search';
+export declare const uri: () => string;
+export declare const post: (request?: HowlerExplainSearchRequest) => Promise<HowlerExplainSearchResponse>;

package/api/search/explain/hit.js

@@ -0,0 +1,8 @@
+import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { uri as parentUri } from '@cccsaurora/howler-ui/api/search';
+export const uri = () => {
+    return joinAllUri(parentUri(), 'hit', 'explain');
+};
+export const post = (request) => {
+    return hpost(uri(), { ...(request || {}), eql_query: request?.query || 'howler.id:*' });
+};

package/api/search/hit.d.ts

@@ -1,7 +1,8 @@
 import type { HowlerSearchRequest, HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import * as eql from '@cccsaurora/howler-ui/api/search/eql/hit';
+import * as explain from '@cccsaurora/howler-ui/api/search/explain/hit';
 import * as sigma from '@cccsaurora/howler-ui/api/search/sigma/hit';
 export declare const uri: () => string;
 export declare const post: (request?: HowlerSearchRequest) => Promise<HowlerSearchResponse<Hit>>;
-export { eql, sigma };
+export { eql, explain, sigma };

package/api/search/hit.js

@@ -1,6 +1,7 @@
 import { hpost, joinUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/search';
 import * as eql from '@cccsaurora/howler-ui/api/search/eql/hit';
+import * as explain from '@cccsaurora/howler-ui/api/search/explain/hit';
 import * as sigma from '@cccsaurora/howler-ui/api/search/sigma/hit';
 export const uri = () => {
     return joinUri(parentUri(), 'hit');
@@ -8,4 +9,4 @@ export const uri = () => {
 export const post = (request) => {
     return hpost(uri(), { ...(request || {}), query: request?.query || 'howler.id:*' });
 };
-export { eql, sigma };
+export { eql, explain, sigma };

package/api/search/index.d.ts

@@ -50,4 +50,14 @@ export type HowlerSigmaSearchRequest = {
     timeout?: number;
     filters?: string[];
 };
+export type HowlerExplainSearchRequest = {
+    query: string;
+};
+export type HowlerExplainSearchResponse = {
+    valid: boolean;
+    explanations: {
+        valid: boolean;
+        explanation: string;
+    }[];
+};
 export { action, analytic, count, dossier, facet, fields, grouped, histogram, hit, overview, template, user, view };

package/components/routes/advanced/QueryBuilder.js

@@ -62,7 +62,12 @@ falsepositives:
 level: informational
 `
 };
-const LUCENE_QUERY_OPTIONS = ['default', 'facet', 'groupby'];
+const LUCENE_QUERY_OPTIONS = [
+    'default',
+    'facet',
+    'groupby',
+    'explain'
+];
 const CustomPopper = (props) => {
     return _jsx(Popper, { ...props, style: { width: 'fit-content' }, placement: "bottom-start" });
 };
@@ -110,6 +115,11 @@ const QueryBuilder = () => {
                         ...searchProperties
                     });
                 }
+                else if (queryType === 'explain') {
+                    result = await api.search.hit.explain.post({
+                        query: sanitizeMultilineLucene(query)
+                    });
+                }
                 else {
                     result = await api.search.hit.post({
                         query: sanitizeMultilineLucene(query),
@@ -218,12 +228,12 @@ const QueryBuilder = () => {
                             display: 'flex',
                             alignSelf: 'stretch'
                         }
-                    }, children: [smallButtons ? (_jsx(Tooltip, { title: t('route.actions.execute'), children: _jsx(IconButton, { size: "small", sx: { alignSelf: 'start' }, color: "success", onClick: execute, disabled: searchDisabled, children: loading ? (_jsx(CircularProgress, { size: 18, color: "success" })) : (_jsx(PlayArrowOutlined, { color: searchDisabled ? 'disabled' : 'success' })) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", startIcon: loading ? (_jsx(CircularProgress, { size: 18, color: "success" })) : (_jsx(PlayArrowOutlined, { color: searchDisabled ? 'disabled' : 'success', sx: { '& path': { stroke: 'currentcolor', strokeWidth: '1px' } } })), color: "success", onClick: execute, disabled: searchDisabled, children: t('route.actions.execute') })), _jsxs(Stack, { direction: compactLayout ? 'column' : 'row', spacing: 1, children: [_jsx(Autocomplete, { value: type, onChange: (__, value) => setType(value), options: QUERY_TYPES, getOptionLabel: option => t(`route.advanced.query.${option}`), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.${option}`), secondary: t(`route.advanced.query.${option}.description`) })), renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('route.advanced.type'), sx: { minWidth: '250px' } })), sx: [
+                    }, children: [smallButtons ? (_jsx(Tooltip, { title: t('route.actions.execute'), children: _jsx(IconButton, { size: "small", sx: { alignSelf: 'start' }, color: "success", onClick: execute, disabled: searchDisabled, children: loading ? (_jsx(CircularProgress, { size: 18, color: "success" })) : (_jsx(PlayArrowOutlined, { color: searchDisabled ? 'disabled' : 'success' })) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", startIcon: loading ? (_jsx(CircularProgress, { size: 18, color: "success" })) : (_jsx(PlayArrowOutlined, { color: searchDisabled ? 'disabled' : 'success', sx: { '& path': { stroke: 'currentcolor', strokeWidth: '1px' } } })), color: "success", onClick: execute, disabled: searchDisabled, children: t('route.actions.execute') })), _jsxs(Stack, { direction: compactLayout ? 'column' : 'row', spacing: 1, children: [_jsx(Autocomplete, { value: type, onChange: (__, value) => setType(value), options: QUERY_TYPES, getOptionLabel: option => t(`route.advanced.query.${option}`), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.${option}`), secondary: t(`route.advanced.query.${option}.description`) })), renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('route.advanced.query.type'), sx: { minWidth: '250px' } })), sx: [
                                         !compactLayout && {
                                             height: '100%',
                                             '& .MuiFormControl-root': { height: '100%', '& > div': { height: '100%' } }
                                         }
-                                    ], slotProps: { paper: { sx: { minWidth: '600px' } } } }), _jsx(Card, { variant: "outlined", sx: { flex: 1, maxWidth: '350px', minWidth: '210px' }, children: _jsxs(Stack, { spacing: 0.5, sx: { px: 1, alignItems: 'start' }, children: [_jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: [t('route.advanced.rows'), ": ", STEPS[rows]] }), _jsx(Slider, { size: "small", valueLabelDisplay: "off", value: rows, onChange: (_, value) => setRows(value), min: 0, max: 9, step: 1, marks: true, track: false, sx: { py: 0.5 } })] }) })] }), type === 'lucene' && (_jsx(Autocomplete, { size: "small", getOptionLabel: opt => t(`route.advanced.query.type.${opt}`), options: LUCENE_QUERY_OPTIONS, value: queryType, onChange: (_event, value) => setQueryType(value), renderInput: params => (_jsx(TextField, { ...params, label: t('route.advanced.query.type'), sx: { minWidth: '200px' } })) })), queryType === 'groupby' && (_jsx(Autocomplete, { size: "small", options: fieldOptions, value: groupByField, onChange: (__, value) => setGroupByField(value), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.pivot.field') }), sx: { minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), allFields && queryType !== 'facet' ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: allFields, onChange: (__, checked) => setAllFields(checked) }), label: t('route.advanced.fields.all'), sx: { '& > span': { color: 'text.secondary' }, alignSelf: 'start' } })) : (_jsx(Autocomplete, { fullWidth: true, renderTags: values => values.length <= 3 ? (_jsx(Stack, { direction: "row", spacing: 0.5, children: values.map(_value => (_jsx(Chip, { size: "small", label: _value }, _value))) })) : (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 1, children: values.map(_value => (_jsx("span", { children: _value }, _value))) }), children: _jsx(Chip, { size: "small", label: values.length }) })), multiple: true, size: "small", options: fieldOptions, value: fields, onChange: (__, values) => (values.length > 0 ? setFields(values) : setAllFields(true)), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.fields') }), sx: { maxWidth: '500px', width: '20vw', minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), _jsx(FlexOne, {}), type === 'lucene' &&
+                                    ], slotProps: { paper: { sx: { minWidth: '600px' } } } }), _jsx(Card, { variant: "outlined", sx: { flex: 1, maxWidth: '350px', minWidth: '210px' }, children: _jsxs(Stack, { spacing: 0.5, sx: { px: 1, alignItems: 'start' }, children: [_jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: [t('route.advanced.rows'), ": ", STEPS[rows]] }), _jsx(Slider, { size: "small", valueLabelDisplay: "off", value: rows, onChange: (_, value) => setRows(value), min: 0, max: 9, step: 1, marks: true, track: false, sx: { py: 0.5 } })] }) })] }), type === 'lucene' && (_jsx(Autocomplete, { size: "small", getOptionLabel: opt => t(`route.advanced.query.type.${opt}`), options: LUCENE_QUERY_OPTIONS, value: queryType, onChange: (_event, value) => setQueryType(value), renderInput: params => (_jsx(TextField, { ...params, label: t('route.advanced.query.lucene.type'), sx: { minWidth: '230px' } })), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.type.${option}`), secondary: t(`route.advanced.query.type.${option}.description`) })) })), queryType === 'groupby' && (_jsx(Autocomplete, { size: "small", options: fieldOptions, value: groupByField, onChange: (__, value) => setGroupByField(value), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.pivot.field') }), sx: { minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), allFields && queryType !== 'facet' ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: allFields, onChange: (__, checked) => setAllFields(checked) }), label: t('route.advanced.fields.all'), sx: { '& > span': { color: 'text.secondary' }, alignSelf: 'start' } })) : (_jsx(Autocomplete, { fullWidth: true, renderTags: values => values.length <= 3 ? (_jsx(Stack, { direction: "row", spacing: 0.5, children: values.map(_value => (_jsx(Chip, { size: "small", label: _value }, _value))) })) : (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 1, children: values.map(_value => (_jsx("span", { children: _value }, _value))) }), children: _jsx(Chip, { size: "small", label: values.length }) })), multiple: true, size: "small", options: fieldOptions, value: fields, onChange: (__, values) => (values.length > 0 ? setFields(values) : setAllFields(true)), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.fields') }), sx: { maxWidth: '500px', width: '20vw', minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), _jsx(FlexOne, {}), type === 'lucene' &&
                             (smallButtons ? (_jsx(Tooltip, { title: t('route.advanced.open'), children: _jsx(IconButton, { color: "primary", sx: { alignSelf: 'center' }, component: Link, disabled: !response, to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}`, children: _jsx(OpenInNew, { fontSize: "small" }) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", startIcon: _jsx(OpenInNew, {}), component: Link, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, children: t('route.advanced.open') }))), smallButtons ? (_jsx(Tooltip, { title: response ? t('route.advanced.create.rule') : t('route.advanced.create.rule.disabled'), children: _jsx(IconButton, { size: "small", sx: { alignSelf: 'center' }, color: "info", onClick: onCreateRule, disabled: !response, children: _jsx(SsidChart, {}) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", color: "info", startIcon: _jsx(SsidChart, {}), onClick: onCreateRule, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, tooltip: !response && t('route.advanced.create.rule.disabled'), children: t('route.advanced.create.rule') }))] }), _jsxs(Box, { width: "100%", height: "calc(100vh - 112px)", sx: { position: 'relative', overflow: 'hidden', borderTop: `thin solid ${theme.palette.divider}` }, children: [_jsx(Box, { sx: {
                                 position: 'absolute',
                                 top: 0,

package/locales/en/translation.json

@@ -436,8 +436,14 @@
     "route.advanced.pivot.field": "Group By Field",
     "route.advanced.query.type": "Query Type",
     "route.advanced.query.type.default": "Default",
+    "route.advanced.query.type.default.description": "Exceute a regular Howler search query in Lucene Syntax.",
     "route.advanced.query.type.facet": "Facet",
+    "route.advanced.query.type.facet.description": "Provides the counts of each value for a field. When faceting on an array field, each unique value will be included in the response. Each value is only counted once.",
     "route.advanced.query.type.groupby": "Group By",
+    "route.advanced.query.type.groupby.description": "Grouped results based on shared fields.",
+    "route.advanced.query.type.explain": "Explain",
+    "route.advanced.query.type.explain.description": "Get the elasticsearch explanation (i.e. the raw query executed against the cluster) of a given lucene query. Useful for debugging buggy lucene queries.",
+    "route.advanced.query.lucene.type": "Query Method",
     "route.analytics": "Analytics",
     "route.analytics.deleted": "Deleted Rule!",
     "route.analytics.detections": "Detections:",

package/locales/fr/translation.json

@@ -99,6 +99,7 @@
     "date.select.end": "Sélectionner la date de fin",
     "date.search.range": "Plage de dates de recherche",
     "deprecated": "Obsolète",
+    "description": "Description",
     "divider": "OU",
     "direction": "Direction",
     "deprecation.instructions": "Instructions de mise à niveau",
@@ -260,6 +261,7 @@
     "hit.viewer.data": "Données brutes",
     "hit.viewer.details": "Détails",
     "hit.viewer.json": "JSON",
+    "hit.viewer.overview": "Vue d'ensemble",
     "hit.view.overview": "Vue d'ensemble",
     "hit.viewer.worklog": "Journal de Bord",
     "hit.viewer.related": "Liens connexes",
@@ -424,6 +426,7 @@
     "route.advanced.rows": "Nombre de lignes à renvoyer",
     "route.advanced.create.rule": "Créer une règle",
     "route.advanced.create.rule.disabled": "Vous devez d'abord lancer votre recherche pour vous assurer qu'elle est valide",
+    "route.advanced.execute.query": "Exécuter la requête",
     "route.advanced.query.lucene": "Requête Lucene",
     "route.advanced.query.lucene.description": "Apache Lucence est une syntaxe de recherche utilisée par elasticsearch, Howler et apache lucene. Voir notre documentation pour plus d'informations à ce sujet.",
     "route.advanced.query.eql": "Requête EQL",
@@ -436,8 +439,14 @@
     "route.advanced.pivot.field": "Champ à regrouper par",
     "route.advanced.query.type": "Type de requête",
     "route.advanced.query.type.default": "Défaut",
+    "route.advanced.query.type.default.description": "Exécuter une requête de recherche Howler normale en syntaxe Lucene.",
     "route.advanced.query.type.facet": "Facette",
+    "route.advanced.query.type.facet.description": "Fournit les comptages de chaque valeur pour un champ. Lors du facettage sur un champ de tableau, chaque valeur unique sera incluse dans la réponse. Chaque valeur n'est comptée qu'une seule fois.",
     "route.advanced.query.type.groupby": "Regrouper",
+    "route.advanced.query.type.groupby.description": "Résultats groupés basés sur des champs partagés.",
+    "route.advanced.query.type.explain": "Expliquer",
+    "route.advanced.query.type.explain.description": "Obtenir l'explication elasticsearch (c'est-à-dire la requête brute exécutée contre le cluster) d'une requête lucene donnée. Utile pour déboguer des requêtes lucene défectueuses.",
+    "route.advanced.query.lucene.type": "Méthode de requête",
     "route.analytics": "Analyses",
     "route.analytics.deleted": "Règle supprimée!",
     "route.analytics.detections": "Détections:",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.15.0-dev.283",
+  "version": "2.15.0-dev.288",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -145,6 +145,7 @@
     "./api/hit/comments": "./api/hit/comments/index.js",
     "./api/search/facet/*": "./api/search/facet/*.js",
     "./api/search/facet": "./api/search/facet/index.js",
+    "./api/search/explain/*": "./api/search/explain/*.js",
     "./api/search/count/*": "./api/search/count/*.js",
     "./api/search/count": "./api/search/count/index.js",
     "./api/search/fields/*": "./api/search/fields/*.js",