mirror of https://github.com/MISP/MISP
new: [attackMatrix] legend scale of the heatmap with dynamic updates
Sami Mokaddem
parent
4fdf7f6340
commit
5d8c2ccf5e
|
|
@ -4579,6 +4579,7 @@ class EventsController extends AppController {
|
|||
$tags = array('eventTags' => $eventTags, 'attributeTags' => $attributeTags);
|
||||
|
||||
$scores = array();
|
||||
$maxScore = 0;
|
||||
foreach ($attributeTags as $name) {
|
||||
if (strpos($name, $type) === false) { // do not belong to mitre attack
|
||||
continue;
|
||||
|
|
@ -4587,6 +4588,7 @@ class EventsController extends AppController {
|
|||
$scores[$name] = 0;
|
||||
}
|
||||
$scores[$name]++;
|
||||
$maxScore = $scores[$name] > $maxScore ? $scores[$name] : $maxScore;
|
||||
}
|
||||
|
||||
App::uses('ColourGradientTool', 'Tools');
|
||||
|
|
@ -4594,9 +4596,10 @@ class EventsController extends AppController {
|
|||
$colours = $gradientTool->createGradientFromValues($scores);
|
||||
|
||||
$this->set('killChainOrder', $killChainOrder);
|
||||
$this->set('killChainNames', array_keys($attackClusters));
|
||||
$this->set('killChainNames', $killChainOrder);
|
||||
$this->set('attackClusters', $attackClusters);
|
||||
$this->set('scores', $scores);
|
||||
$this->set('maxScore', $maxScore);
|
||||
$this->set('colours', $colours);
|
||||
$this->set('heatMap', true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -392,8 +392,7 @@
|
|||
</div>
|
||||
<div id="correlationgraph_div" class="info_container_eventgraph_network" style="display: none;" data-fullscreen="false">
|
||||
</div>
|
||||
<div id="attackmatrix_div" class="info_container_eventgraph_network" style="display: none; border-color: #363636;" data-fullscreen="false">
|
||||
<?php echo $this->element('view_attack_matrix'); ?>
|
||||
<div id="attackmatrix_div" class="info_container_eventgraph_network" style="display: none; border-color: #363636; overflow: visible; height: 700px; margin-top: 30px;" data-fullscreen="false">
|
||||
</div>
|
||||
<div id="attributes_div">
|
||||
<?php echo $this->element('eventattribute'); ?>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,20 @@
|
|||
//debug($killChainOrder);
|
||||
//debug($attackClusters[$killChainOrder[0]]);
|
||||
?>
|
||||
<div id="matrix_container" class="fixed-table-container-inner" style="padding-top: 30px;">
|
||||
<div class="attack-matrix-options">
|
||||
<span id="matrix-heatmap-legend-caret">
|
||||
<span id="matrix-heatmap-legend-caret-value">0</span>
|
||||
<span class="fa fa-caret-down"></span>
|
||||
</span>
|
||||
<div>
|
||||
<span>0</span>
|
||||
<div id="matrix-heatmap-legend"></div>
|
||||
<span id="matrix-heatmap-maxval"><?php echo h($maxScore); ?></span>
|
||||
</div>
|
||||
<label style="display: inline-block; margin-left: 30px;"><input type="checkbox" id="checkbox_attackMatrix_showAll"><span class="fa fa-filter"> Show all</span></input></label>
|
||||
</div>
|
||||
|
||||
<div id="matrix_container" class="fixed-table-container-inner">
|
||||
<div class="header-background"></div>
|
||||
<div class="fixed-table-container-inner">
|
||||
<table class="table table-condensed matrix-table">
|
||||
|
|
@ -32,9 +45,11 @@
|
|||
$td = '<td ';
|
||||
if ($i < count($clusters)) {
|
||||
$tagName = $clusters[$i]['tag_name'];
|
||||
$score = empty($scores[$tagName]) ? 0 : $scores[$tagName];
|
||||
$name = join(" ", array_slice(explode(" ", $clusters[$i]['value']), 0, -2)); // remove " - external_id"
|
||||
$td .= $heatMap ? ' class="heatCell"' : ' class="matrix-interaction"' ;
|
||||
$td .= isset($colours[$tagName]) ? ' style="background: ' . $colours[$tagName] . '; color: ' . $this->TextColour->getTextColour($colours[$tagName]) . '"' : '' ;
|
||||
$td .= ' data-score="'.h($score).'"';
|
||||
$td .= ' data-tag_name="'.h($tagName).'"';
|
||||
$td .= ' title="'.h($clusters[$i]['external_id']).'"';
|
||||
$td .= '>' . h($name);
|
||||
|
|
|
|||
|
|
@ -9,10 +9,14 @@
|
|||
}
|
||||
|
||||
.matrix-table tbody {
|
||||
height: 470px;
|
||||
height: 670px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
table.matrix-table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
td.matrix-interaction {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -25,7 +29,7 @@ td.matrix-interaction:hover {
|
|||
.fixed-table-container-inner {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 470px;
|
||||
height: 670px;
|
||||
}
|
||||
|
||||
.extra-wrap {
|
||||
|
|
@ -50,3 +54,50 @@ td.matrix-interaction:hover {
|
|||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#matrix_container {
|
||||
padding-top: 30px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.attack-matrix-options {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -18px;
|
||||
background: #363636;
|
||||
color: white;
|
||||
padding: 1px 5px;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
.attack-matrix-options input {
|
||||
margin: 0px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
#matrix-heatmap-legend {
|
||||
width: 300px;
|
||||
height: 10px;
|
||||
background: linear-gradient(to right, white, #0000FF);
|
||||
}
|
||||
|
||||
.attack-matrix-options div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#matrix-heatmap-legend-caret {
|
||||
position: absolute;
|
||||
color: black;
|
||||
top: -17px;
|
||||
margin-left: 12px;
|
||||
line-height: 6px;
|
||||
left: 0px;
|
||||
transition: left 0.7s;
|
||||
}
|
||||
|
||||
#matrix-heatmap-legend-caret span {
|
||||
line-height: 9px;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,66 @@ $(document).ready(function() {
|
|||
$('.matrix-interaction').click(function(event) {
|
||||
console.log($(this).attr('data-tag_name'));
|
||||
});
|
||||
|
||||
$('#checkbox_attackMatrix_showAll').click(function() { toggleAttackMatrixCells(); });
|
||||
|
||||
var scoredCells = $('.heatCell').filter(function() {
|
||||
return $(this).attr('data-score') > 0;
|
||||
});
|
||||
|
||||
scoredCells.tooltip({
|
||||
container: 'body',
|
||||
placement: 'right',
|
||||
});
|
||||
|
||||
scoredCells.hover(enteringScoredCell, leavingScoredCell);
|
||||
|
||||
toggleAttackMatrixCells();
|
||||
});
|
||||
|
||||
function toggleAttackMatrixCells() {
|
||||
var visibilityVal, displayVal;
|
||||
if($('#checkbox_attackMatrix_showAll').prop('checked')) {
|
||||
visibilityVal = 'visible';
|
||||
displayVal = 'table-cell';
|
||||
displayVal = '';
|
||||
} else {
|
||||
visibilityVal = 'hidden';
|
||||
displayVal = 'none';
|
||||
}
|
||||
|
||||
$('.heatCell').filter(function() {
|
||||
return $(this).attr('data-score') == 0;
|
||||
}).css({
|
||||
visibility: visibilityVal,
|
||||
});
|
||||
var rowNum = $('.matrix-table > tbody > tr').length;
|
||||
var colNum = $('.matrix-table > thead > tr > th').length;
|
||||
for (var i=0; i<rowNum; i++) {
|
||||
var cellNoValues = $('.matrix-table > tbody > tr:nth-child('+i+') > td').filter(function() {
|
||||
return $(this).attr('data-score') == 0 || $(this).attr('data-score') === undefined;
|
||||
});
|
||||
if (cellNoValues.length == colNum) {
|
||||
$('.matrix-table > tbody > tr:nth-child('+i+')').css({ display: displayVal });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function enteringScoredCell() {
|
||||
var score = $(this).attr('data-score');
|
||||
adjust_caret_on_scale(score);
|
||||
}
|
||||
|
||||
function leavingScoredCell() {
|
||||
adjust_caret_on_scale(0);
|
||||
}
|
||||
|
||||
function adjust_caret_on_scale(score) {
|
||||
var totWidth = $('#matrix-heatmap-legend').width();
|
||||
var maxScore = parseInt($('#matrix-heatmap-maxval').text());
|
||||
var x = (parseInt(score)/maxScore)*totWidth;
|
||||
$('#matrix-heatmap-legend-caret').css({
|
||||
left: x
|
||||
});
|
||||
$('#matrix-heatmap-legend-caret-value').text(score);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue