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

chg: improvement of proxyMapper UI

megaRefact
Sami Mokaddem 2018-08-22 07:27:07 +00:00
parent 9ffe8ed30d
commit 9e657ea415
3 changed files with 114 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/js/proxyMapper.js
View File

@ -35,7 +35,6 @@
constructor: ProxyMapper,
perform_mapping: function(data) {
console.log(this.mapping);
if (this.mapping.dates.length > 0) {
this.c_dates(this.data, this.mapping.dates); // probe and fetch all dates
}
@ -65,7 +64,9 @@
let label = intermediate[index];
let val = [];
for (var i=0; i<additionalData.valueLength; i++) {
val.push(that.options.fillValue);
if ((that.options.fillValue !== undefined && that.options.fillValue != '')) {
val.push(that.options.fillValue);
}
}
that.result[label] = val;
};

103
static/js/treeFromJson.js
View File

@ -11,14 +11,16 @@
var TreeFromJson = function(container, data, options) {
this.container = container;
console.log(container.width());
this._default_options = {
margin: {top: 20, right: 20, bottom: 20, left: 20},
width: 800,
height: 800,
width: container.width() > 800 ? container.width()/2 : 800,
height: container.height() > 800 ? container.height()/2 : 800,
treeNodes : {
width: 3,
depth: 5
},
maxCharDisplay: 20,
itemColors: ['#fc440f', '#a5e12e', '#5d2e8c', '#2ec4b6', '#65524d', '#adcad6', '#99c24d'],
duration: 500,
interaction: true,
@ -29,7 +31,11 @@
this.data = data;
this.treeData = [this.create_tree(data, '', this.options.treeNodes.depth, this.options.treeNodes.depth, this.options.treeNodes.width)];
this.letterWidth = 10;
this.letterWidth = 8;
this.treeDiv = $('<div class="treeDiv panel panel-default panel-body"></div>');
this.container.append(
$('<div></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;
@ -47,7 +53,7 @@
this.diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
this.svg = d3.select(this.container[0]).append("svg")
this.svg = d3.select(this.treeDiv[0]).append("svg")
.attr("width", this.width + this.options.margin.right + this.options.margin.left)
.attr("height", this.height + this.options.margin.top + this.options.margin.bottom)
.append("g")
@ -70,10 +76,17 @@
this.set_current_mapping_item();
}
this.jsonDivIn = $('<div class="jsonDiv panel panel-default panel-body"></div>');
this.treeDiv.append(this.jsonDivIn);
var j = this.syntaxHighlightJson(this.data);
this.jsonDivIn.html(j);
if (this.options.interaction) {
//var result = new $.proxyMapper(this.instructions, this.treeData, {});
this.treeDivResult = $('<div class="resultTree"></div>');
this.container.append(this.treeDivResult);
this.jsonDivOut = $('<div class="jsonDiv"></div>');
this.treeDivResult.append(this.jsonDivOut);
this.container.children().append(
this.treeDivResult
);
this.update_result_tree();
}
@ -90,8 +103,25 @@
var nodes = this.tree.nodes(this.root).reverse(),
links = this.tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 100; });
// Compute depth size based on the link name
var maxSizePerDepth = [];
nodes.forEach(function(d) {
let m = maxSizePerDepth[d.depth] !== undefined ? maxSizePerDepth[d.depth] : 0;
let text = that.adjust_text_length(d.linkname).length;
let size = d.linkname !== undefined ? text : 0;
maxSizePerDepth[d.depth] = size > m ? size : m;
});
// add previous level together
for (var i=1; i<maxSizePerDepth.length; i++) {
maxSizePerDepth[i] += maxSizePerDepth[i-1];
}
// Normalize for fixed-depth. (+ consider linkname)
//nodes.forEach(function(d) { d.y = d.depth * 100; });
nodes.forEach(function(d) {
let offset = maxSizePerDepth[d.depth]*(that.options.maxCharDisplay-2);
d.y = d.depth * 100 + offset;
});
// Update the nodes…
var node = this.svg.selectAll("g.node")
@ -165,12 +195,16 @@
linkEnter.append('rect')
.attr("class", "rectText")
.attr("rx", 5)
.attr("ry", 5)
.attr("transform", function(d) {
let xoffset = d.target.linkname !== undefined ? that.letterWidth*that.adjust_text_length(d.target.linkname).length/2 : 0;
let yoffset = 10;
return "translate(" +
d.source.y + "," +
d.source.x + ")";
(d.source.y-xoffset) + "," +
(d.source.x-yoffset) + ")";
})
.style("fill-opacity", 1e-6);
.style("opacity", 1e-6);
linkEnter.append('text')
.attr("class", "linkText")
.attr("font-family", "Arial, Helvetica, sans-serif")
@ -183,13 +217,13 @@
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
return d.target.linkname;
return that.adjust_text_length(d.target.linkname);
})
.style("fill-opacity", 1e-6);
// update rectangle size based on text
linkEnter.selectAll("rect")
.attr("width", function(d) { return d.target.linkname !== undefined ? that.letterWidth*d.target.linkname.length : 0; })
.attr("width", function(d) { return d.target.linkname !== undefined ? that.letterWidth*that.adjust_text_length(d.target.linkname).length : 0; })
.attr("height", 22)
@ -201,10 +235,10 @@
linkUpdate.select('rect').transition()
.duration(this.options.duration)
.style("fill-opacity", 1)
.style("opacity", 0.85)
.attr("d", this.diagonal)
.attr("transform", function(d){
let xoffset = d.target.linkname !== undefined ? that.letterWidth*d.target.linkname.length/2 : 0;
let xoffset = d.target.linkname !== undefined ? that.letterWidth*that.adjust_text_length(d.target.linkname).length/2 : 0;
let yoffset = 10;
return "translate(" +
((d.source.y + d.target.y)/2-xoffset) + "," +
@ -476,7 +510,7 @@
//var result = new $.proxyMapper(this.instructions, this.data, {});
var pm_options = {
fillValue: this.fillValueDomInput.val() ? this.fillValueDomInput.val() : 0
fillValue: this.fillValueDomInput.val()
};
var result = new $.proxyMapper(adjusted_instructions, this.data, pm_options);
this.treeDivResult[0].innerHTML = '';
@ -487,6 +521,17 @@
return v !== null && typeof v === 'object';
},
adjust_text_length: function(text) {
if (text === undefined || text === '') {
return '';
}
text = text.slice(0, this.options.maxCharDisplay);
if (text.length > this.options.maxCharDisplay) {
text += '...';
}
return text;
},
create_tree: function(root, linkname, depth, maxDepth, maxWidth) {
if (depth == 0) {
return;
@ -522,7 +567,7 @@
child.children.push(this.create_tree(node, k, depth-1, maxDepth, maxWidth));
i++;
}
if (root.length > maxWidth) {
if (Object.keys(root).length > maxWidth) {
var addNode = {};
addNode.name = '...';
addNode.parent = null;
@ -534,8 +579,32 @@
child.name = root;
}
return child;
},
syntaxHighlightJson: function(json) {
if (typeof json == 'string') {
json = JSON.parse(json);
}
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;');
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';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'json_key';
} else {
cls = 'json_string';
}
} else if (/true|false/.test(match)) {
cls = 'json_boolean';
} else if (/null/.test(match)) {
cls = 'json_null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
}
$.treeFromJson = TreeFromJson;

78
templates/test.html
View File

@ -23,9 +23,15 @@
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<style>
.resultTree {
float: right;
.treeDiv {
display: inline-block;
}
.resultTree {
vertical-align: top;
display: inline-block;
}
.node {
cursor: pointer;
}
@ -71,11 +77,26 @@
}
.linkText {
font-size: 18px;
/*font-size: 18px;*/
fill: #000;
}
.rectText {
fill: #fff;
fill: #f5f5f5;
stroke: #ddd;
stroke-width: 2;
}
.json_key {
color: #690;
font-weight: bold;
}
.json_string, .json_boolean, .json_number {
color: #905;
}
.json_null {
color: #a8a8a8;
}
</style>
@ -87,55 +108,6 @@
<div id='treediv'></div>
<script>
//function isObject(v) {
// return v !== null && typeof v === 'object';
//}
//function create_tree(root, depth, maxDepth, maxWidth) {
// if (depth == 0) {
// return;
// }
// var child = {
// parent: null
// };
// if (Array.isArray(root)) {
// child.children = [];
// for (var node of root.slice(0, maxWidth)) {
// child['children'].push(create_tree(node, depth-1, maxDepth, maxWidth));
// }
// if (root.length > maxWidth) {
// var addNode = {};
// addNode.name = '...';
// addNode.parent = null;
// addNode.additionalNode = true;
// child['children'].push(addNode);
// }
// return child;
// } else if (isObject(root)) {
// child.children = {};
// for (var k in root.slice(0, maxWidth)) {
// var node = root[k];
// child['children'] = create_tree(node, depth-1, maxDepth, maxWidth);
// }
// if (root.length > maxWidth) {
// var addNode = {};
// addNode.name = '...';
// addNode.parent = null;
// addNode.additionalNode = true;
// child['children'].push(addNode);
// }
// return child;
// } else {
// child.name = root;
// return child;
// }
//}
</script>
<script>