MISP
/
MISP
mirror of https://github.com/MISP/MISP
2
2
Fork 0
Code Issues Releases Wiki Activity

chg: [eventGraph:search] Usage of chosen instead of bootstrap with non-stripped label

pull/4887/head
mokaddem 2019-07-16 16:04:27 +02:00
parent 6248ae6121
commit a517bbb5d9
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
3 changed files with 47 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/View/Elements/view_event_graph.ctp
View File

@ -14,8 +14,8 @@
<label id="network-filter" class="btn center-in-network-header network-control-btn"><span class="useCursorPointer fa fa-filter" style="margin-right: 3px;"></span><?php echo __('Filters')?></label>
<label id="network-import" class="btn center-in-network-header network-control-btn"><span class="useCursorPointer fa fa-exchange" style="margin-right: 3px;"></span><?php echo __('Export')?></label>
<label id="network-history" class="btn center-in-network-header network-control-btn"><span class="useCursorPointer fa fa-history" style="margin-right: 3px;"></span><?php echo __('History')?></label>
<input type="text" id="network-typeahead" class="center-in-network-header network-typeahead flushright" data-provide="typeahead" size="20" placeholder="<?php echo __('Search for an item');?>">
<select type="text" id="network-typeahead" class="center-in-network-header network-typeahead flushright position-absolute max-width-400"></select>
</div>
<span class="shortcut-help btn btn-xs btn-info">?</span>

8
app/webroot/css/main.css
View File

@ -69,6 +69,14 @@ pre {
border-radius: 0px !important;
}
.position-absolute {
position: absolute !important;
}
.max-width-400 {
max-width: 400px !important;
}
/* MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
.dropdown-menu .sub-menu {
left: 100%;

81
app/webroot/js/event-graph.js
View File

@ -715,7 +715,7 @@ class EventGraph {
code: that.get_FA_icon(node['meta-category']),
}
};
dataHandler.mapping_value_to_nodeID.set(striped_value, node.id);
dataHandler.mapping_value_to_nodeID.set(label, node.id);
} else if (node.node_type == 'tag') {
var tag_color = node.tagContent.colour;
group = 'tag';
@ -740,7 +740,7 @@ class EventGraph {
borderRadius: 6
}
};
dataHandler.mapping_value_to_nodeID.set(striped_value, node.id);
dataHandler.mapping_value_to_nodeID.set(label, node.id);
} else if (node.node_type == 'keyType') {
group = 'keyType';
label = that.scope_keyType + ": " + node.label;
@ -751,7 +751,7 @@ class EventGraph {
title: label,
group: group
};
dataHandler.mapping_value_to_nodeID.set(striped_value, node.id);
dataHandler.mapping_value_to_nodeID.set(label, node.id);
} else {
group = 'attribute';
label = node.type + ': ' + node.label;
@ -770,7 +770,7 @@ class EventGraph {
node_conf.size = $('#slider_display_picture_size').val();
node_conf.image = baseurl + '/attributes/viewPicture/' + node.id + '/1';
}
dataHandler.mapping_value_to_nodeID.set(striped_value, node.id);
dataHandler.mapping_value_to_nodeID.set(label, node.id);
}
newNodes.push(node_conf);
@ -1023,7 +1023,7 @@ class EventGraph {
node.image = baseurl + '/attributes/viewPicture/' + attr.id + '/1';
}
newNodes.push(node);
dataHandler.mapping_obj_relation_value_to_nodeID.set(striped_value, node.id);
dataHandler.mapping_obj_relation_value_to_nodeID.set(attr.value, node.id);
var rel = {
from: parent_id,
@ -2088,18 +2088,11 @@ function enable_interactive_graph() {
});
});
$('#network-typeahead').typeahead(typeaheadOption);
dataHandler = new DataHandler();
eventGraph = new EventGraph(network_options, nodes, edges);
$(document).on("keydown", function(evt) {
if($('#network-typeahead').is(":focus")) {
if (evt.keyCode == 27) { // <ESC>
$('#network-typeahead').blur();
}
return;
}
if (evt.target !== undefined && $(evt.target).is('input')) {
return;
}
@ -2187,7 +2180,35 @@ $(document).on("keyup", function(evt) {
});
eventGraph.update_scope();
dataHandler.fetch_data_and_update();
dataHandler.fetch_data_and_update(true, function() {
var $select = $('#network-typeahead');
dataHandler.get_typeaheadData_search().forEach(function(element) {
$select.append('<option value="' + element + '">' + element + '</option>');
});
$('#network-typeahead').chosen(chosen_options).on('change', function(evt, params) {
var value = params.selected;
var nodeID = dataHandler.mapping_value_to_nodeID.get(value);
// in case we searched for an object relation
nodeID = nodeID === undefined ? dataHandler.mapping_obj_relation_value_to_nodeID.get(value) : nodeID;
// check if node in cluster
nested_length = eventGraph.network.findNode(nodeID).length;
if (nested_length > 1) { // Node is in cluster
// As vis.js cannot supply a way to uncluster a single node, we remove it and add it again
searched_node = eventGraph.nodes.get(nodeID);
// Remove old node and edges
eventGraph.nodes.remove(nodeID);
eventGraph.nodes.add(searched_node);
/* don't need to re-add the edge as it is the same */
eventGraph.focus_on_stabilized(nodeID);
} else {
// set focus to the network
eventGraph.network.focus(nodeID, {animation: true, scale: 1});
}
// select node and focus on it
eventGraph.network.selectNodes([nodeID]);
$("#network-typeahead").blur();
});
});
}, 1);
}
@ -2406,37 +2427,9 @@ var network_options = {
}
};
var default_layout_option = $.extend(true, {}, network_options);
var typeaheadOption = {
source: function (query, process) {
if (typeaheadDataSearch === undefined) { // caching
typeaheadDataSearch = dataHandler.get_typeaheadData_search();
}
process(typeaheadDataSearch);
},
updater: function(value) {
var nodeID = dataHandler.mapping_value_to_nodeID.get(value);
// in case we searched for an object relation
nodeID = nodeID === undefined ? dataHandler.mapping_obj_relation_value_to_nodeID.get(value) : nodeID;
// check if node in cluster
nested_length = eventGraph.network.findNode(nodeID).length;
if (nested_length > 1) { // Node is in cluster
// As vis.js cannot supply a way to uncluster a single node, we remove it and add it again
searched_node = eventGraph.nodes.get(nodeID);
// Remove old node and edges
eventGraph.nodes.remove(nodeID);
eventGraph.nodes.add(searched_node);
/* don't need to re-add the edge as it is the same */
eventGraph.focus_on_stabilized(nodeID);
} else {
// set focus to the network
eventGraph.network.focus(nodeID, {animation: true, scale: 1});
}
// select node and focus on it
eventGraph.network.selectNodes([nodeID]);
$("#network-typeahead").blur();
},
autoSelect: true
var chosen_options = {
max_shown_results: 20,
inherit_select_classes: true
}
var max_displayed_char = 32;
var progressbar_length = 3; // divided by 100