Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cogburn/det panel plus #695

Merged
merged 2 commits into from
Dec 17, 2024
Merged

Cogburn/det panel plus #695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc61683
Details Panel ++
coreyogburn Dec 16, 2024
94d54bd
Added Id for tests
coreyogburn Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion html/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -923,7 +923,6 @@ ul ul ul {
.quicklinks {
display: flex;
flex-direction: row;
justify-content: space-around;
}

.quicklinks > i {
Expand Down
58 changes: 39 additions & 19 deletions html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,7 @@ <h2 v-text="i18n.home"></h2>
<script type="text/x-template" id="page-hunt">
<v-container fluid data-aid="hunt_screen">
<v-row>
<v-col :cols="highlightedDetection ? 9 : 12">
<v-col :cols="showDetailsPanel ? 9 : 12">
<v-row>
<v-col cols="12" lg="3">
<h2 v-text="i18n[category]"></h2>
Expand All @@ -350,6 +350,9 @@ <h2 v-text="i18n[category]"></h2>
@update:modelValue="filterToggled($event, toggle); notifyInputsChanged()"
:label="$root.localizeMessage(toggle.name)" color="primary"></v-switch>
</span>
<span data-aid="show_detection_panel">
<v-switch v-if="isCategory('alerts')" id="detection-panel-toggle" :disabled="loading()" v-model="showDetailsPanel" density="compact" hide-details class="my-0" :label="i18n.showDetailsPanel"></v-switch>
</span>
<span :data-aid="'autorefresh_select_' + category" v-if="!isCategory('detections')">
<v-select id="autoRefresh" class="ml-" :disabled="loading()" v-model="autoRefreshInterval" :items="autoRefreshIntervals" :hint="i18n.autoRefresh" persistent-hint variant="underlined" prepend-icon="fa-hourglass-half" />
</span>
Expand Down Expand Up @@ -609,20 +612,24 @@ <h4 v-if="loaded" :data-aid="'event_total_' + category">{{ i18n.eventTotal }} {{
</tr>
</template>
<template v-if="!group.maximized" #item="{ item, index }">
<tr :class="{'highlight-row': highlightedDetection && highlightedDetection.publicId === item['rule.uuid']}">
<tr :class="{'highlight-row': highlightedAlertInfo && highlightedAlertInfo.item === item}">
<td v-if="aggregationActionsEnabled">
<v-btn id="alertButton" v-if="ackEnabled && item['event.severity_label']" class="mx-2" variant="text" size="x-small" icon
<v-btn id="alertButton" v-if="ackEnabled && item['event.severity_label']" variant="text" size="x-small" icon
@click="ack(item, !isFilterToggleEnabled('acknowledged'), false, null, groupIdx)"
:color="colorSeverity(item['event.severity_label'] + '_' + isFilterToggleEnabled('acknowledged'))"
:data-aid="'groups_ack_' + category">
<v-icon :title="isFilterToggleEnabled('acknowledged') ? i18n.alertUndoAcknowledge : i18n.alertAcknowledge">fa-bell</v-icon>
</v-btn>
<v-btn id="escalateButton" v-if="escalateEnabled" class="mx-2" variant="text" size="x-small" icon
<v-btn id="escalateButton" v-if="escalateEnabled" variant="text" size="x-small" icon
@click="toggleEscalationMenu($event, item, groupIdx)"
:color="isFilterToggleEnabled('escalated') || item['event.escalated'] == true ? 'secondary' : 'primary'"
:data-aid="'groups_escalate_' + category">
<v-icon :title="isFilterToggleEnabled('escalated') || item['event.escalated'] == true ? i18n.alertEscalated : i18n.escalate">fa-exclamation-triangle</v-icon>
</v-btn>
<v-btn id="infoButton" v-if="item['rule.uuid'] && showDetailsPanel" variant="text" size="x-small" icon @click="highlightDetection(item['rule.uuid'], item, groupIdx)">
<v-icon v-if="highlightedDetection && highlightedDetection.publicId === item['rule.uuid']" color="green">fa-thumbtack</v-icon>
<v-icon v-else>fa-info</v-icon>
</v-btn>
</td>
<td>
<v-tooltip bottom v-if="loaded && eventsEnabled && metricsEnabled && ( (group.headers.length==3 && group.headers[1]['value']=='count' ) || (group.headers.length==6 && group.headers[1]['value']=='count' && group.headers[2]['value']=='rule.name' && group.headers[3]['value']=='event.module' && group.headers[4]['value']=='event.severity_label' && group.headers[5]['value']=='rule.uuid') ) "
Expand Down Expand Up @@ -747,7 +754,7 @@ <h4 v-if="loaded" :data-aid="'event_total_' + category">{{ i18n.eventTotal }} {{
</tr>
</template>
<template #item="{ item, index, isExpanded, toggleExpand, internalItem }">
<tr :data-aid="'events_item_' + category" :class="{'highlight-row': highlightedDetection && highlightedDetection.publicId === item['rule.uuid']}">
<tr :data-aid="'events_item_' + category" :class="{'highlight-row': highlightedAlertInfo && highlightedAlertInfo.item === item}">
<td>
<v-btn id="expandEvent" variant="text" icon size="x-small" @click="toggleExpand(internalItem)" class="theme-icon">
<v-icon v-if="isExpanded(internalItem)" :alt="i18n.eventExpand" :title="i18n.eventExpandHelp" :data-aid="'events_item_collapse_' + category">fa-angle-down</v-icon>
Expand All @@ -765,6 +772,10 @@ <h4 v-if="loaded" :data-aid="'event_total_' + category">{{ i18n.eventTotal }} {{
:color="isFilterToggleEnabled('escalated') || item['event.escalated'] == true ? 'secondary' : 'primary'">
<v-icon :title="isFilterToggleEnabled('escalated') || item['event.escalated'] == true ? i18n.alertEscalated : i18n.escalate">fa-exclamation-triangle</v-icon>
</v-btn>
<v-btn id="infoButton" v-if="item['rule.uuid'] && showDetailsPanel" variant="text" size="x-small" icon @click="highlightDetection(item['rule.uuid'], item, groupIdx)" :title="i18n.openInPanel">
<v-icon v-if="highlightedDetection && highlightedDetection.publicId === item['rule.uuid']" color="primary">fa-thumbtack</v-icon>
<v-icon v-else>fa-info</v-icon>
</v-btn>
<span :data-aid="'events_select_' + category">
<v-checkbox class="detection-selection no-details" color="primary" @change="updateBulkSelector(item)" v-if="isMultiSelect()" v-model="item._isSelected">
</v-checkbox>
Expand Down Expand Up @@ -823,21 +834,33 @@ <h4 v-if="loaded" :data-aid="'event_total_' + category">{{ i18n.eventTotal }} {{
<v-spacer></v-spacer>
</v-row>
</v-col>
<v-col v-if="isCategory('alerts') && highlightedDetection" cols="3" class="pa-0">
<v-col id="details-col" v-if="isCategory('alerts') && showDetailsPanel" cols="3" class="pa-0">
<Detection-Panel
v-if="highlightedDetection"
:detection="highlightedDetection"
:zone="zone"
:alertInfo="highlightedAlertInfo"
:ackColor="colorSeverity(highlightedAlertInfo.item['event.severity_label'] + '_' + isFilterToggleEnabled('acknowledged'))"
:ackColor="colorSeverity((highlightedAlertInfo?.item?.['event.severity_label'] || '') + '_' + isFilterToggleEnabled('acknowledged'))"
@close="highlightedDetection = highlightedAlertInfo = null;"
@ack="panelAck($event)"
@chooseCase="toggleEscalationMenu(...$event)"
/>
<v-expansion-panels v-else focusable v-model="openPanel" class="mt-2">
<v-expansion-panel>
<v-expansion-panel-title expand-icon="fa-chevron-down" collapse-icon="fa-chevron-up" data-aid="detection_panel_overview_header">
<h3>
{{ i18n.overview }}
</h3>
</v-expansion-panel-title>
<v-expansion-panel-text>
{{i18n.detailsPanelHelp}}
</v-expansion-panel-text>
</v-expansion-panels>
</v-col>
</v-row>
<v-menu v-model="quickActionVisible" :target="quickActionTarget" :data-aid="'context_menu_' + category">
<div class="d-flex">
<v-list id="hunt-quick-action">
<v-list id="hunt-quick-action" v-model:opened="quickActionsOpen">
<v-list-item density="compact" id="actionFilterInclude" :to="filterRouteInclude" v-bind:title.attr="i18n.filterIncludeHelp" :data-aid="'context_menu_filter_include_' + category" active-class="">
<template #prepend>
<v-icon :alt="i18n.filterInclude" class="theme-icon">fa-search-plus</v-icon>
Expand Down Expand Up @@ -902,7 +925,7 @@ <h4 v-if="loaded" :data-aid="'event_total_' + category">{{ i18n.eventTotal }} {{
{{ i18n.groupNew }}
</v-list-item-title>
</v-list-item>
<v-list-group density="compact" :value="false" @click.stop v-if="quickActionVisible && quickActionIsNumeric" :data-aid="'context_menu_compare_' + category" class="deep-theme-text">
<v-list-group density="compact" :value="'numeric'" @click.stop v-if="quickActionVisible && quickActionIsNumeric" :data-aid="'context_menu_compare_' + category" class="deep-theme-text">
<template #activator="{ props, isOpen }">
<v-list-item v-bind="props" class="v-list-item--active">
<template #prepend>
Expand Down Expand Up @@ -941,7 +964,7 @@ <h4 v-if="loaded" :data-aid="'event_total_' + category">{{ i18n.eventTotal }} {{
</v-list-item-title>
</v-list-item>
</v-list-group>
<v-list-group density="compact" @click.stop class="deep-theme-text" :data-aid="'context_menu_clipboard_' + category">
<v-list-group density="compact" :value="'clipboard'" @click.stop class="deep-theme-text" :data-aid="'context_menu_clipboard_' + category">
<template #activator="{ props, isOpen }">
<v-list-item v-bind="props" class="v-list-item--active">
<template #prepend>
Expand Down Expand Up @@ -988,7 +1011,7 @@ <h4 v-if="loaded" :data-aid="'event_total_' + category">{{ i18n.eventTotal }} {{
</v-list-item-title>
</v-list-item>
</v-list-group>
<v-list-group v-if="!!actions && actions.length" density="compact" @click.stop class="deep-theme-text" :data-aid="'context_menu_quickaction_' + category">
<v-list-group v-if="!!actions && actions.length" :value="'actions'" density="compact" @click.stop class="deep-theme-text" :data-aid="'context_menu_quickaction_' + category">
<template #activator="{ props, isOpen }">
<v-list-item v-bind="props" class="v-list-item--active">
<template #prepend>
Expand Down Expand Up @@ -3018,7 +3041,7 @@ <h2>{{ i18n.description }}</h2>
<div tabindex="0" class="clicktoedit d-flex align-start pa-2" v-if="!isEdit('case-description')" @click="startEdit('case-desc-input', caseObj.description, 'case-description', 'description', modifyCase, [], true)"
@keypress.space.prevent="startEdit('case-desc-input', caseObj.description, 'case-description', 'description', modifyCase, [], true)">
<div class="d-block" style="width: 100%;">
<div id="case-description" class="rounded case detail-field markdown-body" :inner-html.prop="formatMarkdown(caseObj.description)"></div>
<div id="case-description" class="rounded case detail-field markdown-body" v-html="formatMarkdown(caseObj.description)"></div>
</div>
</div>
<div class="d-flex flex-column" v-if="isEdit('case-description')">
Expand Down Expand Up @@ -5813,10 +5836,7 @@ <h2 v-text="i18n.gridMembers"></h2>

<script type="text/x-template" id="component-detection-panel">
<div v-if="detection" id="detection-col" class="theme-background theme-text pa-0">
<v-btn icon variant="text" size="small" class="float-end">
<v-icon @click="closeDetectionPanel()" data-aid="detection_panel_close">fa-times</v-icon>
</v-btn>
<v-expansion-panels multiple focusable v-model="panels">
<v-expansion-panels multiple focusable v-model="panels" class="mt-2">
<v-expansion-panel>
<v-expansion-panel-title expand-icon="fa-chevron-down" collapse-icon="fa-chevron-up" data-aid="detection_panel_overview_header">
<h3>
Expand All @@ -5838,13 +5858,13 @@ <h3 class="my-2" data-aid="detection_panel_title">{{detection.title}}</h3>
</div>
</div>
<div class="quicklinks pt-2">
<v-btn id="detection-panel-ack" icon variant="text" size="small" @click="ack()" data-aid="detection_panel_ack">
<v-btn id="detection-panel-ack" icon variant="text" size="small" @click="ack()" data-aid="detection_panel_ack" :title="i18n.alertAcknowledge">
<v-icon :color="ackColor">fa-bell</v-icon>
</v-btn>
<v-btn id="detection-panel-escalate" icon variant="text" size="small" @click="escalate($event)" data-aid="detection_panel_escalate">
<v-btn id="detection-panel-escalate" icon variant="text" size="small" @click="escalate($event)" data-aid="detection_panel_escalate" :title="i18n.escalate">
<v-icon color="primary">fa-exclamation-triangle</v-icon>
</v-btn>
<v-btn id="detection-panel-open" icon variant="text" size="small" class="no-link" :to="{name:'detection',params: {id:detection.id}}" target="_blank" data-aid="detection_panel_open_detection">
<v-btn id="detection-panel-open" icon variant="text" size="small" class="no-link" :to="{name:'detection',params: {id:detection.id}}" target="_blank" data-aid="detection_panel_open_detection" :title="i18n.viewDetection">
<v-icon color="primary">fa-magnifying-glass</v-icon>
</v-btn>
</div>
Expand Down
6 changes: 4 additions & 2 deletions html/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,9 +300,11 @@ $(document).ready(function () {
};

content = content.replace("{" + field + "}", encode(value));
content = content.replace("{" + field + "|base64}", encode(this.base64encode(value)));
if (content.indexOf("{" + field + "|base64}") !== -1)
content = content.replace("{" + field + "|base64}", encode(this.base64encode(value)));
content = content.replace("{" + field + "|escape}", encode(this.escape(value)));
content = content.replace("{" + field + "|escape|base64}", encode(this.base64encode(this.escape(value))));
if (content.indexOf("{" + field + "|escape|base64}") !== -1)
content = content.replace("{" + field + "|escape|base64}", encode(this.base64encode(this.escape(value))));
content = content.replace("{" + field + "|processAncestors}", encode(this.processAncestors(value)));
return content;
},
Expand Down
4 changes: 4 additions & 0 deletions html/js/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,7 @@ const i18n = {
description: 'Description',
destination: 'Destination',
details: 'Details',
detailsPanelHelp: 'Click an alert to see details about the Detection that triggered it.',
detection: 'Detection',
detections: 'Detections',
detectionDirtyTitle: 'Unsaved Changes to Source',
Expand Down Expand Up @@ -682,6 +683,7 @@ const i18n = {
ok: 'OK',
offline: 'Offline',
online: 'Online',
openInPanel: 'Open in Details Panel',
operation: 'Operation',
operations: 'Operations',
options: 'Options',
Expand Down Expand Up @@ -835,6 +837,7 @@ const i18n = {
sha256: 'SHA256',
share: 'Clipboard',
showAll: 'Show all...',
showDetailsPanel: 'Show Details Panel',
'so-desktop': 'Desktop',
'so-desktop-keywords': 'Analyst, Desktop, sod, windows, wireshark, networkminer, miner, gui, workstation',
'so-eval': 'Evaluation',
Expand Down Expand Up @@ -995,6 +998,7 @@ const i18n = {
version: 'Version',
view: 'View',
viewCase: 'Case Details',
viewDetection: 'View Detection',
viewInDiscover: 'Test in Kibana',
viewResults: 'View Results',
webauthn: 'Security Keys (WebAuthn / PassKey)',
Expand Down
Loading
Loading