@cccsaurora/howler-ui 2.17.2-patch.629 → 2.17.2-patch.631
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Add, Check } from '@mui/icons-material';
|
|
3
|
-
import { Autocomplete, Chip, Divider, Grid, IconButton,
|
|
2
|
+
import { Add, Check, Settings, TableChart } from '@mui/icons-material';
|
|
3
|
+
import { Autocomplete, Chip, Divider, Grid, IconButton, Stack, TextField } from '@mui/material';
|
|
4
4
|
import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
|
|
5
5
|
import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
|
|
6
6
|
import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
|
|
7
|
+
import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
|
|
7
8
|
import { has, sortBy, uniq } from 'lodash-es';
|
|
8
9
|
import { memo, useContext, useEffect, useMemo, useState } from 'react';
|
|
9
10
|
import { useTranslation } from 'react-i18next';
|
|
10
11
|
import { useContextSelector } from 'use-context-selector';
|
|
11
|
-
const AddColumnModal = ({
|
|
12
|
+
const AddColumnModal = ({ addColumn, columns }) => {
|
|
12
13
|
const { t } = useTranslation();
|
|
13
14
|
const { hitFields } = useContext(FieldContext);
|
|
14
15
|
const response = useContextSelector(HitSearchContext, ctx => ctx.response);
|
|
@@ -21,7 +22,7 @@ const AddColumnModal = ({ open, onClose, anchorEl, addColumn, columns }) => {
|
|
|
21
22
|
setSuggestions(uniq((await Promise.all((response?.items ?? []).map(async (_hit) => (has(_hit, '__template') ? _hit.__template?.keys : (await getMatchingTemplate(_hit))?.keys) ?? []))).flat()));
|
|
22
23
|
})();
|
|
23
24
|
}, [getMatchingTemplate, response?.items]);
|
|
24
|
-
return (_jsx(
|
|
25
|
+
return (_jsx(ChipPopper, { icon: _jsx(TableChart, {}), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {
|
|
25
26
|
addColumn(columnToAdd);
|
|
26
27
|
setColumnToAdd(null);
|
|
27
28
|
}, children: _jsx(Add, {}) })] }), _jsx(Divider, { orientation: "horizontal" }), _jsx(Grid, { container: true, spacing: 1, children: sortBy(suggestions.map(key => ({ key, used: columns.includes(key) })), 'used').map(({ key, used }) => {
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { DndContext, KeyboardSensor, PointerSensor, pointerWithin, useSensor, useSensors } from '@dnd-kit/core';
|
|
3
3
|
import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
|
|
4
|
-
import {
|
|
4
|
+
import { FormatIndentDecrease, FormatIndentIncrease, Info, List, Search, TableChart } from '@mui/icons-material';
|
|
5
5
|
import { IconButton, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
|
|
6
6
|
import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
|
|
7
7
|
import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
|
|
8
8
|
import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
|
|
9
9
|
import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
|
|
10
|
-
import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
|
|
11
10
|
import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
|
|
12
11
|
import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
|
|
13
|
-
import DevelopmentIcon from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentIcon';
|
|
14
12
|
import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
|
|
15
13
|
import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
|
|
16
14
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
@@ -38,16 +36,14 @@ const HitGrid = () => {
|
|
|
38
36
|
const query = useContextSelector(ParameterContext, ctx => ctx.query);
|
|
39
37
|
const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
|
|
40
38
|
const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
|
|
41
|
-
const [
|
|
42
|
-
const columnModalRef = useRef();
|
|
43
|
-
const [columns, setColumns] = useState([
|
|
39
|
+
const [columns, setColumns] = useMyLocalStorageItem(StorageKey.GRID_COLUMNS, [
|
|
44
40
|
'howler.outline.threat',
|
|
45
41
|
'howler.outline.target',
|
|
46
42
|
'howler.outline.indicators',
|
|
47
43
|
'howler.outline.summary'
|
|
48
44
|
]);
|
|
49
|
-
const [columnWidths, setColumnWidths] =
|
|
50
|
-
const [
|
|
45
|
+
const [columnWidths, setColumnWidths] = useMyLocalStorageItem(StorageKey.GRID_COLUMN_WIDTHS, {});
|
|
46
|
+
const [analyticIds, setAnalyticIds] = useState({});
|
|
51
47
|
const resizingCol = useRef();
|
|
52
48
|
const showSelectBar = useMemo(() => {
|
|
53
49
|
if (selectedHits.length > 1) {
|
|
@@ -78,10 +74,10 @@ const HitGrid = () => {
|
|
|
78
74
|
}, []);
|
|
79
75
|
const onMouseUp = useCallback(() => {
|
|
80
76
|
const [col, element] = resizingCol.current;
|
|
81
|
-
setColumnWidths(
|
|
82
|
-
...
|
|
77
|
+
setColumnWidths({
|
|
78
|
+
...columnWidths,
|
|
83
79
|
[col]: element.style.width
|
|
84
|
-
})
|
|
80
|
+
});
|
|
85
81
|
element.style.width = null;
|
|
86
82
|
element.style.maxWidth = null;
|
|
87
83
|
document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
|
|
@@ -90,7 +86,7 @@ const HitGrid = () => {
|
|
|
90
86
|
});
|
|
91
87
|
window.removeEventListener('mousemove', onMouseMove);
|
|
92
88
|
window.removeEventListener('mouseup', onMouseUp);
|
|
93
|
-
}, [onMouseMove]);
|
|
89
|
+
}, [columnWidths, onMouseMove, setColumnWidths]);
|
|
94
90
|
const onMouseDown = useCallback((col, event) => {
|
|
95
91
|
event.stopPropagation();
|
|
96
92
|
event.preventDefault();
|
|
@@ -111,7 +107,7 @@ const HitGrid = () => {
|
|
|
111
107
|
const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
|
|
112
108
|
setColumns(arrayMove(columns, oldIndex, newIndex));
|
|
113
109
|
}
|
|
114
|
-
}, [columns]);
|
|
110
|
+
}, [columns, setColumns]);
|
|
115
111
|
const getSelectedId = useCallback((event) => {
|
|
116
112
|
const target = event.target;
|
|
117
113
|
const selectedElement = target.closest('[id]');
|
|
@@ -120,14 +116,14 @@ const HitGrid = () => {
|
|
|
120
116
|
}
|
|
121
117
|
return selectedElement.id;
|
|
122
118
|
}, []);
|
|
123
|
-
return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between",
|
|
119
|
+
return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), _jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
|
|
124
120
|
position: 'absolute',
|
|
125
121
|
left: 0,
|
|
126
122
|
right: 0,
|
|
127
123
|
bottom: 0,
|
|
128
124
|
borderBottomLeftRadius: theme.shape.borderRadius,
|
|
129
125
|
borderBottomRightRadius: theme.shape.borderRadius
|
|
130
|
-
} }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%",
|
|
126
|
+
} }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => setColumns([...columns, key]) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
|
|
131
127
|
borderRight: 'thin solid',
|
|
132
128
|
borderRightColor: 'divider'
|
|
133
129
|
}, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(HitContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
|
package/package.json
CHANGED
package/utils/constants.d.ts
CHANGED
|
@@ -55,6 +55,8 @@ export declare enum StorageKey {
|
|
|
55
55
|
SEARCH_PANE_WIDTH = "search_pane_width",
|
|
56
56
|
TEMPLATE_FIELD_COUNT = "template_field_count",
|
|
57
57
|
GRID_COLLAPSE_COLUMN = "grid_collapse_column",
|
|
58
|
+
GRID_COLUMNS = "grid_columns",
|
|
59
|
+
GRID_COLUMN_WIDTHS = "grid_column_widths",
|
|
58
60
|
QUERY_HISTORY = "query_history",
|
|
59
61
|
LOGIN_NONCE = "login_nonce",
|
|
60
62
|
DISPLAY_TYPE = "display_type"
|
package/utils/constants.js
CHANGED
|
@@ -60,6 +60,8 @@ export var StorageKey;
|
|
|
60
60
|
StorageKey["SEARCH_PANE_WIDTH"] = "search_pane_width";
|
|
61
61
|
StorageKey["TEMPLATE_FIELD_COUNT"] = "template_field_count";
|
|
62
62
|
StorageKey["GRID_COLLAPSE_COLUMN"] = "grid_collapse_column";
|
|
63
|
+
StorageKey["GRID_COLUMNS"] = "grid_columns";
|
|
64
|
+
StorageKey["GRID_COLUMN_WIDTHS"] = "grid_column_widths";
|
|
63
65
|
StorageKey["QUERY_HISTORY"] = "query_history";
|
|
64
66
|
StorageKey["LOGIN_NONCE"] = "login_nonce";
|
|
65
67
|
StorageKey["DISPLAY_TYPE"] = "display_type";
|