This commit is contained in:
310
iris-web/source/app/blueprints/alerts/templates/alerts.html
Normal file
310
iris-web/source/app/blueprints/alerts/templates/alerts.html
Normal file
@ -0,0 +1,310 @@
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Alerts {% endblock title %}
|
||||
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" href="/static/assets/css/suggestags.css">
|
||||
<link rel="stylesheet" href="/static/assets/css/alerts.css">
|
||||
|
||||
{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-inner">
|
||||
<div class="">
|
||||
{{ form.csrf_token }}
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-between align-items-center">
|
||||
<div class="card-title mb-2">
|
||||
<span id="alertsInfoFilter">Loading..</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-between align-items-center">
|
||||
<div class="col">
|
||||
<div class="card-subtitle mt-2">
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-sm" href="#filterCardBody" title="Filter" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="filterCardBody">Filter</button>
|
||||
<div class="preset-dropdown-container">
|
||||
<div id="savedFiltersDropdown" class="dropdown"></div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-dark ml-2" id="resetFilters" style="display: none;">Clear Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="card-subtitle mt-2">
|
||||
<div class="d-flex">
|
||||
<div id="alerts-batch-actions" style="display:none;" class="mr-4">
|
||||
<button type="button" class="btn btn-sm ml-2 btn-alert-primary" onclick="mergeMultipleAlertsModal();">Merge</button>
|
||||
<div class="dropdown ml-2 d-inline-block">
|
||||
<button type="button" class="btn btn-alert-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Assign
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#" onclick="updateBatchAlerts({alert_owner_id: userWhoami.user_id});">Assign to me</a>
|
||||
<a class="dropdown-item" href="#" onclick="changeBatchAlertOwner();">Assign</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown ml-2 d-inline-block">
|
||||
<button type="button" class="btn btn-alert-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Set status
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#" onclick="changeStatusBatchAlerts('New');">New</a>
|
||||
<a class="dropdown-item" href="#" onclick="changeStatusBatchAlerts('In progress');">In progress</a>
|
||||
<a class="dropdown-item" href="#" onclick="changeStatusBatchAlerts('Pending');">Pending</a>
|
||||
<a class="dropdown-item" href="#" onclick="changeStatusBatchAlerts('Closed');">Closed</a>
|
||||
<a class="dropdown-item" href="#" onclick="changeStatusBatchAlerts('Merged');">Merged</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-alert-danger btn-sm ml-2" onclick="deleteBatchAlerts();"><i class="fa fa-trash mr-2"></i>Delete</button>
|
||||
</div>
|
||||
<button class="btn btn-sm mr-2" id="select-deselect-all" style="display:none;">Select all</button>
|
||||
|
||||
<button class="btn btn-sm mr-2" id="toggle-selection-mode">Select</button>
|
||||
<button class="btn btn-sm mr-2" id="orderAlertsBtn"><i class="fas fa-arrow-up-short-wide"></i></button>
|
||||
<button id="toggleAllAlertsBtn" class="btn btn-sm mr-2" onclick="toggleCollapseAllAlerts()" data-is-expanded="false">Expand All</button>
|
||||
<div class="d-inline-block position-relative">
|
||||
<button class="btn btn-sm mr-2 ml-2" onclick="refreshAlerts();">Refresh</button>
|
||||
<span class="badge badge-pill badge-danger position-absolute" id="newAlertsBadge" style="top: -10px; right: -10px; display: none;">0</span>
|
||||
</div>
|
||||
<div class="pagination-dropdown-container ml-3 mt-1">
|
||||
<label for="alertsPerPage">Alerts per page:</label>
|
||||
<select id="alertsPerPage">
|
||||
<option value="5">5</option>
|
||||
<option value="10" selected>10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
<option value="200">200</option>
|
||||
<option value="500">500</option>
|
||||
<option value="1000">1000</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="filterCardBody">
|
||||
<form id="alertFilterForm" class="container mt-4">
|
||||
<div class="form-row">
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_title">Title</label>
|
||||
<input type="text" class="form-control" id="alert_title" name="alert_title">
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_description">Description</label>
|
||||
<input type="text" class="form-control" id="alert_description" name="alert_description">
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_source">Source</label>
|
||||
<input type="text" class="form-control" id="alert_source" name="alert_source">
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_tags">Tags</label>
|
||||
<input type="text" class="form-control" id="alert_tags" name="alert_tags">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_status_id">Status</label>
|
||||
<select class="form-control" id="alert_status_id" name="alert_status_id">
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_severity_id">Severity</label>
|
||||
<select class="form-control" id="alert_severity_id" name="alert_severity_id">
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_classification_id">Classification</label>
|
||||
<select class="form-control" id="alert_classification_id" name="alert_classification_id">
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_customer_id">Customer</label>
|
||||
<select class="form-control" id="alert_customer_id" name="alert_customer_id">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="source_start_date">Start Date</label>
|
||||
<input type="date" class="form-control" id="source_start_date" name="source_start_date">
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="source_end_date">End Date</label>
|
||||
<input type="date" class="form-control" id="source_end_date" name="source_end_date">
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_assets">Asset(s) name</label>
|
||||
<input class="form-control" id="alert_assets" name="alert_assets">
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_iocs">IOC(s)</label>
|
||||
<input class="form-control" id="alert_iocs" name="alert_iocs">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_ids">Alert(s) ID</label>
|
||||
<input class="form-control" id="alert_ids" name="alert_ids">
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="case_id">Case ID</label>
|
||||
<input type="number" class="form-control" id="case_id" name="case_id">
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_owner_id">Owner</label>
|
||||
<select class="form-control" id="alert_owner_id" name="alert_owner_id">
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label for="alert_resolution_id">Resolution Status</label>
|
||||
<select class="form-control" id="alert_resolution_id" name="alert_resolution_id">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row mt-3">
|
||||
<div class="col centered">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Apply Filters</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-success float-right" id="saveFilters">Save as filter</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4 mb-4 ml-1">
|
||||
<div class="col">
|
||||
<span id="alertsInfoFilterTags"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-2">
|
||||
<div class="col">
|
||||
<nav class="mt-3 float-right">
|
||||
<ul class="pagination pagination-container">
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group alerts-container">
|
||||
</div>
|
||||
<nav class="mt-3 float-right">
|
||||
<ul class="pagination pagination-container">
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="context-menu-relationships" style="display: none;">
|
||||
<a id="view-alert" class="dropdown-item" style="cursor: pointer;" onclick="viewAlertGraph();">
|
||||
<i class="fas fa-eye mr-2"></i><span id="view-alert-text">View Alert</span></a>
|
||||
</div>
|
||||
|
||||
<div class="modal" role="dialog" tabindex="-1" id="modal_comment" data-backdrop="false">
|
||||
<div class="modal-lg modal-dialog modal-comment" role="document">
|
||||
<div class="modal-content shadow-xl" id="modal_comment_content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" role="dialog" tabindex="-1" id="modal_graph_options" data-backdrop="false">
|
||||
<div class="modal-lg modal-dialog modal-comment" role="document">
|
||||
<div class="modal-content shadow-xl" id="modal_graph_options_content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" role="dialog" tabindex="-1" id="modal_alert_history">
|
||||
<div class="modal-lg modal-dialog" role="document">
|
||||
<div class="modal-content shadow-lg">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Alert history</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" id="modal_alert_history_content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" id="editAlertModal" tabindex="-1" role="dialog" aria-labelledby="closeAlertModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="closeAlertModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Resolution status</label><br>
|
||||
<div class="selectgroup ml-auto mr-auto">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="resolutionStatus" value="not_applicable" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button">Not applicable</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="resolutionStatus" value="false_positive" class="selectgroup-input">
|
||||
<span class="selectgroup-button">False positive</span>
|
||||
</label>
|
||||
<label class="selectgroup-item selectgroup-warning">
|
||||
<input type="radio" name="resolutionStatus" value="true_positive_without_impact" class="selectgroup-input">
|
||||
<span class="selectgroup-button">True positive without impact</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="resolutionStatus" value="true_positive_with_impact" class="selectgroup-input">
|
||||
<span class="selectgroup-button">True positive with impact</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
||||
<label for="editAlertNote">Note</label>
|
||||
<textarea class="form-control" id="editAlertNote" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editAlertTags">Tags</label>
|
||||
<input type="text" class="form-control" id="editAlertTags">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div class="form-group alert-edition-part">
|
||||
<label for="editAlertClassification">Classification</label>
|
||||
<select class="form-control" id="editAlertClassification">
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group alert-edition-part">
|
||||
<label for="editAlertSeverity">Severity</label>
|
||||
<select class="form-control" id="editAlertSeverity">
|
||||
</select>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="button" class="btn btn-primary float-right mr-2" id="confirmAlertEdition">Close Alert</button>
|
||||
<button type="button" class="btn btn-dark float-right mr-2" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% include 'modal_escalate.html' %}
|
||||
{% include 'modal_enrichment.html' %}
|
||||
{% include 'modal_new_alert_owner.html' %}
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
{% block javascripts %}
|
||||
<script src="/static/assets/js/plugin/vis/vis.min.js"></script>
|
||||
<script src="/static/assets/js/plugin/vis/vis-network.min.js"></script>
|
||||
<script src="/static/assets/js/iris/alerts.js"></script>
|
||||
<script src="/static/assets/js/iris/comments.js"></script>
|
||||
<script src="/static/assets/js/core/socket.io.js"></script>
|
||||
{% endblock javascripts %}
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
<div class="modal" id="enrichmentModal" tabindex="-1" role="dialog" aria-labelledby="enrichmentModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="enrichmentModalLabel">Enrichment</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="enrichmentData"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,86 @@
|
||||
<div class="modal" id="escalateModal" tabindex="-1" role="dialog" aria-labelledby="escalateModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="escalateModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group row" id="modalAlertTitleContainer">
|
||||
<div class="col">
|
||||
<label for="modalAlertTitle">Alert title</label>
|
||||
<input type="text" class="form-control" id="modalAlertTitle" readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Merge options</label><br/>
|
||||
<div class="selectgroup ml-auto mr-auto">
|
||||
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="mergeOption" value="new_case" class="selectgroup-input" checked>
|
||||
<span class="selectgroup-button">Merge into a new case</span>
|
||||
</label>
|
||||
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="mergeOption" value="existing_case" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Merge into existing case</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group"><span id="escalateModalExplanation"></span></div>
|
||||
<div class="form-group" id="modalEscalateCaseTitleContainer" style="display:none;">
|
||||
<label>New case title *</label>
|
||||
<input type="text" class="form-control" id="modalEscalateCaseTitle" name="new_case_title">
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="mergeAlertCaseSelectSection" style="display:none;">
|
||||
<label for="mergeAlertCaseSelect">Select case to merge into *</label>
|
||||
<select class="selectpicker form-control" data-dropup-auto="false" data-live-search="true" id="mergeAlertCaseSelect">
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="mergeAlertCaseTemplateSection">
|
||||
<label for="mergeAlertCaseTemplate">Select case template</label>
|
||||
<select class="selectpicker form-control" data-dropup-auto="false" data-live-search="true" id="mergeAlertCaseTemplateSelect">
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group mt-4" id="ioc-container" style="display:none;">
|
||||
<label>IOCs to import</label>
|
||||
<button type="button" class="btn btn-sm btn-light ml-2 float-right" id="toggle-iocs">Deselect All</button>
|
||||
<div class="form-control" id="ioCsList" style="height: auto; overflow-y: scroll; max-height: 150px;"></div>
|
||||
</div>
|
||||
<div class="form-group mt-4" id="asset-container" style="display:none;">
|
||||
<label>Assets to import</label>
|
||||
<button type="button" class="btn btn-sm btn-light ml-2 float-right" id="toggle-assets">Deselect All</button>
|
||||
<div class="form-control" id="assetsList" style="height: auto; overflow-y: scroll; max-height: 150px;"></div>
|
||||
</div>
|
||||
<div class="form-group mt-4">
|
||||
<label for="note">Escalation note</label>
|
||||
<textarea class="form-control" id="note" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="case_tags">Case tags</label>
|
||||
<input type="text" id="case_tags"
|
||||
class="form-control col-md-12"/>
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label mt-3">
|
||||
<input checked="" class="form-check-input" id="importAsEvent" name="import_as_event" type="checkbox" value="y">
|
||||
<span class="form-check-sign"> Add alert as event in the timeline
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-dark" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="escalateOrMergeButton">Merge</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="modal" tabindex="-1" id="changeAlertOwnerModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Reassign Alert #<span id="alertIDAssignModal"></span></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="changeOwnerAlertSelect">New Owner</label>
|
||||
<select class="form-control" id="changeOwnerAlertSelect"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-dark" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="assign-owner-button">Assign</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user