@cccsaurora/howler-ui 2.17.0-dev.525 → 2.17.0-dev.526
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.
- package/components/routes/cases/CaseCard.js +7 -2
- package/components/routes/cases/components/StatusIcon.d.ts +5 -0
- package/components/routes/cases/components/StatusIcon.js +13 -0
- package/components/routes/cases/modals/ResolveModal.js +4 -1
- package/package.json +2 -1
- package/components/routes/cases/detail/Untitled-1.md.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { CheckCircleOutline, HourglassBottom, RadioButtonUnchecked, UpdateOutlined } from '@mui/icons-material';
|
|
3
|
-
import { Card, Chip, Divider, Grid, Skeleton, Stack, Tooltip, Typography } from '@mui/material';
|
|
3
|
+
import { Card, Chip, Divider, Grid, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
|
|
4
4
|
import api from '@cccsaurora/howler-ui/api';
|
|
5
5
|
import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
|
|
6
6
|
import PluginChip from '@cccsaurora/howler-ui/components/elements/PluginChip';
|
|
@@ -10,9 +10,14 @@ import { countBy } from 'lodash-es';
|
|
|
10
10
|
import { useEffect, useState } from 'react';
|
|
11
11
|
import { useTranslation } from 'react-i18next';
|
|
12
12
|
import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
|
|
13
|
+
import StatusIcon from './components/StatusIcon';
|
|
14
|
+
const STATUS_COLORS = {
|
|
15
|
+
resolved: 'success'
|
|
16
|
+
};
|
|
13
17
|
const CaseCard = ({ case: providedCase, caseId, className }) => {
|
|
14
18
|
const { t } = useTranslation();
|
|
15
19
|
const { dispatchApi } = useMyApi();
|
|
20
|
+
const theme = useTheme();
|
|
16
21
|
const [_case, setCase] = useState(providedCase);
|
|
17
22
|
useEffect(() => {
|
|
18
23
|
if (providedCase) {
|
|
@@ -27,7 +32,7 @@ const CaseCard = ({ case: providedCase, caseId, className }) => {
|
|
|
27
32
|
if (!_case) {
|
|
28
33
|
return _jsx(Skeleton, { variant: "rounded", height: 250, sx: { mb: 1 }, className: className });
|
|
29
34
|
}
|
|
30
|
-
return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsx(Stack, { direction: "row", alignItems: "start", spacing: 1, children: _jsxs(Stack, { sx: { flex: 1 }, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Typography, { variant: "h6", display: "flex", alignItems: "start",
|
|
35
|
+
return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, borderColor: theme.palette[STATUS_COLORS[_case.status]]?.main }, className: className, children: _jsx(Stack, { direction: "row", alignItems: "start", spacing: 1, children: _jsxs(Stack, { sx: { flex: 1 }, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", display: "flex", alignItems: "start", children: _case.title }), _jsx(StatusIcon, { status: _case.status }), _jsx("div", { style: { flex: 1 } }), _case.start && _case.end && (_jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(HourglassBottom, { fontSize: "small" }), size: "small", label: twitterShort(_case.start) + ' - ' + twitterShort(_case.end) }) })), _jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(UpdateOutlined, { fontSize: "small" }), size: "small", label: twitterShort(_case.updated) }) })] }), _jsx(Typography, { variant: "caption", color: "textSecondary", children: _case.summary.trim().split('\n')[0] }), _case.participants?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsx(Stack, { direction: "row", spacing: 1, children: _case.participants?.map(participant => (_jsx(HowlerAvatar, { sx: { height: '20px', width: '20px' }, userId: participant }, participant))) })] })), _jsx(Divider, { flexItem: true }), _jsxs(Grid, { container: true, spacing: 1, children: [_case.targets?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "primary", context: "casecard", variant: "outlined", value: indicator, label: indicator }) }, indicator))), _case.targets?.length > 0 && (_case.indicators?.length > 0 || _case.threats?.length > 0) && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.indicators?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator))), _case.indicators?.length > 0 && _case.threats?.length > 0 && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.threats?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "warning", variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator)))] }), _case.tasks?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsxs(Stack, { spacing: 0.5, alignItems: "start", children: [_case.tasks.some(task => task.complete) && (_jsx(Chip, { size: "small", color: "success", icon: _jsx(CheckCircleOutline, {}), label: `${countBy(_case.tasks, task => task.complete).true} ${t('complete')}` })), _case.tasks
|
|
31
36
|
.filter(task => !task.complete)
|
|
32
37
|
.map(task => (_jsx(Chip, { icon: _jsx(RadioButtonUnchecked, {}), label: task.summary }, task.id)))] })] }))] }) }) }, _case.case_id));
|
|
33
38
|
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Check, HourglassBottom, Pause, Troubleshoot } from '@mui/icons-material';
|
|
3
|
+
import { Tooltip } from '@mui/material';
|
|
4
|
+
import { useTranslation } from 'react-i18next';
|
|
5
|
+
const StatusIcon = ({ status }) => {
|
|
6
|
+
const { t } = useTranslation();
|
|
7
|
+
return (_jsx(Tooltip, { title: t(`page.cases.status.${status}`), children: {
|
|
8
|
+
'in-progress': _jsx(HourglassBottom, { color: "warning" }),
|
|
9
|
+
'on-hold': _jsx(Pause, { color: "disabled" }),
|
|
10
|
+
resolved: _jsx(Check, { color: "success" })
|
|
11
|
+
}[status] ?? _jsx(Troubleshoot, { color: "primary" }) }));
|
|
12
|
+
};
|
|
13
|
+
export default StatusIcon;
|
|
@@ -29,7 +29,10 @@ const ResolveModal = ({ case: _case, onConfirm }) => {
|
|
|
29
29
|
useEffect(() => {
|
|
30
30
|
(async () => {
|
|
31
31
|
try {
|
|
32
|
-
const result = await dispatchApi(api.search.hit.post({
|
|
32
|
+
const result = await dispatchApi(api.search.hit.post({
|
|
33
|
+
query: `howler.id:(${hitIds.join(' OR ')}) AND -howler.status:resolved`,
|
|
34
|
+
metadata: ['analytic']
|
|
35
|
+
}));
|
|
33
36
|
setHits(result.items);
|
|
34
37
|
}
|
|
35
38
|
finally {
|
package/package.json
CHANGED
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"internal-slot": "1.0.7"
|
|
102
102
|
},
|
|
103
103
|
"type": "module",
|
|
104
|
-
"version": "2.17.0-dev.
|
|
104
|
+
"version": "2.17.0-dev.526",
|
|
105
105
|
"exports": {
|
|
106
106
|
"./i18n": "./i18n.js",
|
|
107
107
|
"./index.css": "./index.css",
|
|
@@ -188,6 +188,7 @@
|
|
|
188
188
|
"./components/routes/help/markdown/fr/*.md": "./components/routes/help/markdown/fr/*.md.js",
|
|
189
189
|
"./components/routes/help/markdown/en/*.md": "./components/routes/help/markdown/en/*.md.js",
|
|
190
190
|
"./components/routes/admin/users/*": "./components/routes/admin/users/*.js",
|
|
191
|
+
"./components/routes/cases/components/*": "./components/routes/cases/components/*.js",
|
|
191
192
|
"./components/routes/cases/modals/*": "./components/routes/cases/modals/*.js",
|
|
192
193
|
"./components/routes/cases/hooks/*": "./components/routes/cases/hooks/*.js",
|
|
193
194
|
"./components/routes/cases/detail/*": "./components/routes/cases/detail/*.js",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default "<h3>Actions</h3>\n\n<ul class=\"actions_list\">\n\n<li>\n\n</li>\n\n<li>\n\n</li>\n\n</ul>\n\n<h3>Data</h3>\n\n<table class=\"table_overview\">\n\n<tbody>\n\n<tr>\n\n<td style=\"padding:8px;font-weight:bold;\">Tangent</td>\n\n<td style=\"padding:8px;\">Triangle</td>\n\n</tr>\n\n<tr>\n\n<td style=\"padding:8px;font-weight:bold;\">Start date</td>\n\n<td style=\"padding:8px;\">1</td>\n\n</tr>\n\n<tr>\n\n<td style=\"padding:8px;font-weight:bold;\">End date</td>\n\n<td style=\"padding:8px;\">1</td>\n\n</tr>\n\n<tr>\n\n<td style=\"padding:8px;font-weight:bold;\">Country</td>\n\n<td style=\"padding:8px;\"><span style=\"text-transform: uppercase;\">Canada</span> / <span style=\"text-transform: capitalize;\">Canada / <span style=\"text-transform: capitalize;\">Canada</span></td>\n\n</tr>\n\n</tbody>\n\n</table>\n\n<h3>Visualization</h3>\n\n```mermaid\n\ngraph LR\n\nA[Password Spraying IP] -- Login Failure Account A --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account B --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account C --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account D --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account E --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account E --> D{ Entra ID }\n\nA[Password Spraying IP] == Login Attempt Account E ==> D{ Entra ID }\n\nD{ Entra ID } == \u00a0Entra ID Returns Code {{error.code}} ==> A\n\nclassDef orange fill:#f96,stroke:#333,stroke-width:2px\n\nclassDef blue fill:#32bedd,stroke:#333,stroke-width:2px\n\nclass D blue\n\nclass A orange\n\n```\n\n<style>\n\n/* Actions */\n\n.actions_list li {\n\ndisplay:inline!important;\n\nmargin-right: 45px!important;\n\nmargin-bottom: 15px!important;\n\n}\n\n.actions_list {\n\nlist-style: none!important;\n\nmargin: 0px!important;\n\npadding: 0px!important;\n\n}\n\n.actions_list img {\n\nheight:20px!important;\n\nmargin-bottom:-7px!important;\n\npadding-right:5px!important;\n\n}\n\n/* Tables */\n\n.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiTableContainer-root {\n\nbox-shadow:unset !important;\n\nwidth: fit-content !important;\n\n}\n\n/* General */\n\nh3 {\n\nborder-bottom: 2px solid #2d7dc9;\n\n/*border-bottom: 5px solid rgba(255, 255, 255, 0.12);*/\n\n/*color: #393939;*/\n\n}\n\n/* Visualization */\n\n.mermaid {\n\nbackground-color:#fff;\n\npadding:15px;\n\ntext-align: center;\n\n}\n\n/* Boites */\n\n.actor.actor-top {\n\nstroke: #393939 !important;\n\nfill: lightgrey !important;\n\n}\n\n/* T\u00eate du bonhomme */\n\n.actor-man circle {\n\nstroke: #393939 !important;\n\nfill: #28A745 !important;\n\n}\n\n/* Corps du bonhomme */\n\n.actor-man line {\n\nstroke: #393939 !important;\n\nfill: #393939 !important;\n\n}\n\n/* Lignes verticales */\n\n.actor-line {\n\nstroke: #393939 !important;\n\nfill: #393939 !important;\n\n}\n\n/* Description des fl\u00e8ches horizontales */\n\n.messageText {\n\nfill: #393939 !important;\n\nstroke: none;\n\n}\n\n/* T\u00eates de fl\u00e8ches */\n\nmarker#arrowhead path {\n\nfill: #DC3545 !important;\n\n}\n\n/* Texte en-dessous du bonhomme */\n\ntext.actor > tspan {\n\nfill: #393939 !important;\n\n}\n\n/* Fl\u00e8ches horizontales */\n\n.messageLine0, .messageLine1 {\n\nstroke-width: 1.5;\n\nstroke-dasharray: none;\n\nstroke: #393939 !important;\n\n}\n\n/* Texte dans boites */\n\n.actor-box {\n\nfont-weight: bold !important;\n\ncolor: #393939 !important;\n\n}\n\n/* Cacher le bonhomme du bas */\n\n.actor-bottom {\n\ndisplay:None;\n\n}\n\n</style>\n"
|