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

refacto: second round (moved some fct to util + better code reuse)

megaRefact
Sami Mokaddem 2018-08-30 08:04:42 +00:00
parent 55bb335f4c
commit 9421e1fd0d
2 changed files with 75 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/css/treeFromJson.css
View File

@ -11,7 +11,7 @@
cursor: pointer; cursor: pointer;
} }
.node.nodeNoInteraction { .noInteraction {
cursor: default; cursor: default;
} }
@ -43,9 +43,10 @@
stroke-width: 2px; stroke-width: 2px;
} }
.mappingTable { table.mappingTable {
display: inline-table !important; display: inline-table !important;
cursor: pointer; cursor: pointer;
margin-bottom: 5px;
min-width: 50%; min-width: 50%;
max-width: 75%; max-width: 75%;
} }

139
static/js/treeFromJson.js
View File

@ -13,7 +13,7 @@
this.container = container; this.container = container;
this._default_options = { this._default_options = {
margin: {top: 20, right: 20, bottom: 20, left: 20}, margin: {top: 20, right: 20, bottom: 20, left: 20},
width: container.width() > 800 ? container.width()/2-24 : 800, width: container.width() > 800 ? container.width()/2-32 : 800,
height: container.height() > 800 ? container.height()/2 : 800, height: container.height() > 800 ? container.height()/2 : 800,
treeNodes : { treeNodes : {
width: 3, width: 3,
@ -29,18 +29,18 @@
this.options = $.extend({}, this._default_options, options); this.options = $.extend({}, this._default_options, options);
this.data = data; this.data = data;
this.treeData = [this.create_tree(data, '', this.options.treeNodes.depth, this.options.treeNodes.depth, this.options.treeNodes.width)]; this.treeData = [this.generate_d3_tree_from_json(data, '', this.options.treeNodes.depth, this.options.treeNodes.depth, this.options.treeNodes.width)];
this._letterWidth = 8; // width to estimate the width space taken by a letter this._letterWidth = 8; // width to estimate the width space taken by a letter
this.width = this.options.width - this.options.margin.right - this.options.margin.left,
this.height = this.options.height - this.options.margin.top - this.options.margin.bottom;
this.treeDiv = $('<div class="treeDiv panel panel-default panel-body"></div>'); this.treeDiv = $('<div class="treeDiv panel panel-default panel-body"></div>');
this.treeDiv.css('max-width', this.options.width+this.options.margin.left+this.options.margin.right+'px'); this.treeDiv.css('max-width', this.options.width+this.options.margin.left+this.options.margin.right+'px');
this.container.append( this.container.append(
$('<div></div>').append(this.treeDiv) $('<div class="treeContainer"></div>').append(this.treeDiv)
); );
this.width = this.options.width - this.options.margin.right - this.options.margin.left,
this.height = this.options.height - this.options.margin.top - this.options.margin.bottom;
this.itemColors = new Map(); // the map from item to color this.itemColors = new Map(); // the map from item to color
this.mappingDomTable; // link to the jquery object of the mapping table this.mappingDomTable; // link to the jquery object of the mapping table
this.currentPicking; // the selected entry to be picked this.currentPicking; // the selected entry to be picked
@ -82,7 +82,7 @@
this.jsonDivIn = $('<div class="jsonDiv panel panel-default panel-body"></div>'); this.jsonDivIn = $('<div class="jsonDiv panel panel-default panel-body"></div>');
this.treeDiv.append(this.jsonDivIn); this.treeDiv.append(this.jsonDivIn);
var j = this.syntaxHighlightJson(this.data); var j = this.util.syntaxHighlightJson(this.data);
this.jsonDivIn.html(j); this.jsonDivIn.html(j);
// append result tree if interaction mode is on // append result tree if interaction mode is on
@ -90,7 +90,8 @@
this.treeDivResult = $('<div class="resultTree"></div>'); this.treeDivResult = $('<div class="resultTree"></div>');
this.jsonDivOut = $('<div class="jsonDiv"></div>'); this.jsonDivOut = $('<div class="jsonDiv"></div>');
this.treeDivResult.append(this.jsonDivOut); this.treeDivResult.append(this.jsonDivOut);
this.container.children().append( var child = this.container.find('.treeContainer');
child.append(
this.treeDivResult this.treeDivResult
); );
this.update_result_tree(); this.update_result_tree();
@ -142,7 +143,7 @@
}) })
.on("click", function(d, i) { that.click(d, i, this); }); .on("click", function(d, i) { that.click(d, i, this); });
} else { } else {
nodeEnter.attr("class", "node nodeNoInteraction"); nodeEnter.attr("class", "node noInteraction");
} }
var nodeEnterLeaf = nodeEnter.filter(function(d) { var nodeEnterLeaf = nodeEnter.filter(function(d) {
@ -170,7 +171,7 @@
nodeEnterObject nodeEnterObject
.append("polygon") .append("polygon")
.attr("points", this.getPointsHexagon(0)) .attr("points", this.util.getPointsHexagon(0))
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnterArray nodeEnterArray
@ -184,7 +185,7 @@
.attr("x", function(d) { return d.children || d._children ? -13 : 13; }) .attr("x", function(d) { return d.children || d._children ? -13 : 13; })
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; }) .text(function(d) { return that.adjust_text_length(d.name); })
.style("fill-opacity", 1e-6); .style("fill-opacity", 1e-6);
@ -198,7 +199,7 @@
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("polygon") nodeUpdate.select("polygon")
.attr("points", this.getPointsHexagon(11.5)) .attr("points", this.util.getPointsHexagon(11.5))
nodeUpdate.select("rect") nodeUpdate.select("rect")
.attr("width", 20) .attr("width", 20)
@ -218,7 +219,7 @@
.attr("r", 1e-6); .attr("r", 1e-6);
nodeExit.select("polygon") nodeExit.select("polygon")
.attr("points", this.getPointsHexagon(0)); .attr("points", this.util.getPointsHexagon(0));
nodeExit.select("rect") nodeExit.select("rect")
.attr("width", 0) .attr("width", 0)
@ -240,6 +241,7 @@
let u_id = d.source.id + '-' + d.target.id; let u_id = d.source.id + '-' + d.target.id;
return u_id; return u_id;
}); });
linkEnter.append("path") linkEnter.append("path")
.attr("class", "link") .attr("class", "link")
.attr("d", function(d) { .attr("d", function(d) {
@ -247,7 +249,6 @@
return that.diagonal({source: o, target: o}); return that.diagonal({source: o, target: o});
}); });
linkEnter.append('rect') linkEnter.append('rect')
.attr("class", "rectText linkLabel") .attr("class", "rectText linkLabel")
.attr("rx", 5) .attr("rx", 5)
@ -404,7 +405,7 @@
} else { // children may be leaves } else { // children may be leaves
// check if children are leaf // check if children are leaf
var child = clicked.data()[0].children[0]; var child = clicked.data()[0].children[0];
if (that.isObject(child) || Array.isArray(child)) { // children are not leaves if (that.is_object(child) || Array.isArray(child)) { // children are not leaves
// First child is not a node, should highlight all labels instead // First child is not a node, should highlight all labels instead
var itemColor = this.itemColors.get(this.currentPicking); var itemColor = this.itemColors.get(this.currentPicking);
@ -904,7 +905,7 @@
return flag_continue; return flag_continue;
}, },
isObject: function(v) { is_object: function(v) {
return v !== null && typeof v === 'object'; return v !== null && typeof v === 'object';
}, },
@ -920,7 +921,7 @@
return textSliced; return textSliced;
}, },
create_tree: function(root, linkname, depth, maxDepth, maxWidth) { generate_d3_tree_from_json: function(root, linkname, depth, maxDepth, maxWidth) {
if (depth == 0) { if (depth == 0) {
return; return;
} }
@ -929,22 +930,16 @@
linkname: linkname linkname: linkname
}; };
var remaining = 0;
if (Array.isArray(root)) { if (Array.isArray(root)) {
child.children = []; child.children = [];
for (var node of root.slice(0, maxWidth)) { for (var node of root.slice(0, maxWidth)) {
child.children.push(this.create_tree(node, '', depth-1, maxDepth, maxWidth)); child.children.push(this.generate_d3_tree_from_json(node, '', depth-1, maxDepth, maxWidth));
}
if (root.length > maxWidth) {
var addNode = {};
var remaining = root.length - maxWidth;
addNode.name = '['+remaining+' more]';
addNode.parent = null;
addNode.additionalNode = true;
child['children'].push(addNode);
} }
remaining = root.length - maxWidth;
} else if (this.isObject(root)) { } else if (this.is_object(root)) {
child.children = []; child.children = [];
var i = 0; var i = 0;
@ -953,57 +948,67 @@
break; break;
} }
var node = root[k]; var node = root[k];
child.children.push(this.create_tree(node, k, depth-1, maxDepth, maxWidth)); child.children.push(this.generate_d3_tree_from_json(node, k, depth-1, maxDepth, maxWidth));
i++; i++;
} }
if (Object.keys(root).length > maxWidth) { remaining = Object.keys(root).length - maxWidth;
var addNode = {};
var remaining = Object.keys(root).length - maxWidth;
addNode.name = '['+remaining+' more]';
addNode.parent = null;
addNode.additionalNode = true;
child.children.push(addNode);
}
} else { } else {
child.name = root; child.name = root;
} }
// add false remaining node
if (remaining > 0) {
var addNode = {};
addNode.parent = null;
addNode.additionalNode = true;
var remaining = root.length - maxWidth;
addNode.name = '['+remaining+' more]';
child.children.push(addNode);
}
return child; return child;
}, },
getPointsHexagon: function(size) { util: {
let pts = [
0+','+size,
size*0.87 + ',' + size*0.5,
size*0.87 + ',' + -size*0.5,
0 + ',' + -size,
-size*0.87 + ',' + -size*0.5,
-size*0.87 + ',' + size*0.5,
];
return pts.join(', ');
},
syntaxHighlightJson: function(json) { syntaxHighlightJson: function(json) {
if (typeof json == 'string') { if (typeof json == 'string') {
json = JSON.parse(json); json = JSON.parse(json);
} }
json = JSON.stringify(json, undefined, 2); json = JSON.stringify(json, undefined, 2);
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/ /g, '&nbsp;'); json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/ /g, '&nbsp;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'json_number'; var cls = 'json_number';
if (/^"/.test(match)) { if (/^"/.test(match)) {
if (/:$/.test(match)) { if (/:$/.test(match)) {
cls = 'json_key'; cls = 'json_key';
} else { } else {
cls = 'json_string'; cls = 'json_string';
}
} else if (/true|false/.test(match)) {
cls = 'json_boolean';
} else if (/null/.test(match)) {
cls = 'json_null';
} }
} else if (/true|false/.test(match)) { return '<span class="' + cls + '">' + match + '</span>';
cls = 'json_boolean'; });
} else if (/null/.test(match)) { },
cls = 'json_null';
} getPointsHexagon: function(size) {
return '<span class="' + cls + '">' + match + '</span>'; // sin(pi/6) = 0.87, cos(pi/6) ~= 0.5
}); let pts = [
0+','+size,
size*0.87 + ',' + size*0.5,
size*0.87 + ',' + -size*0.5,
0 + ',' + -size,
-size*0.87 + ',' + -size*0.5,
-size*0.87 + ',' + size*0.5,
];
return pts.join(', ');
},
} }