Skip to content

Commit

Permalink
Fixed window resize grabs showing through windows, windows bring to f…
Browse files Browse the repository at this point in the history 
…ront on click fixed, auto/max window size when popping up, spinner on "Running graph layout" status
  • Loading branch information
@lkarlslund
lkarlslund committed May 30, 2022
1 parent 37cbbfc commit ad64eec
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 56 deletions.
112 changes: 67 additions & 45 deletions modules/analyze/html/custom.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
function makePopper(ele) {
let ref = ele.popperRef(); // used only for positioning
var ref = ele.popperRef(); // used only for positioning
ele.tippy = tippy(ref, {
// tippy options:
content: () => {
Expand Down Expand Up @@ -33,7 +33,7 @@ function setquery(
if (methods) {
// Clear all
$('#pwnfilter > div > label .active').button('toggle');
marr = methods.split(' ');
var marr = methods.split(' ');
if (marr.indexOf('default') > -1) {
$('#pwnfilter > div > label > input [default]').button('toggle');
}
Expand Down Expand Up @@ -69,31 +69,28 @@ function set_querymode(mode) {
$('#querymode_sourcetarget').prop('checked', mode == 'sourcetarget');
}

function window_front(win) {
if (!win.hasClass('window-front')) {
$('#windows div').removeClass('window-front');
win.addClass('window-front');
}
}

function newwindow(id, title, content, height, width) {
mywindow = $(`#windows #window_${id}`);
itsnew = false;
// Other windows are not in from
$('#windows div').removeClass('window-front');

if (!height) {
height = 300
}
if (!width) {
width = 300
}
var mywindow = $(`#windows #window_${id}`);
var itsnew = false;

var maxheight = $(window).height() * 0.8;
var maxwidth = $(window).width() * 0.5;

// add the new one
if (mywindow.length == 0) {
itsnew = true;
// `< div class="window d-inline-block position-absolute shadow p-5 bg-dark border pointer-events-auto container-fluid window-front" id="window_${id}">

mywindow = $(
`<div class="window position-absolute shadow p-5 bg-dark border pointer-events-auto container-fluid" id="window_${id}">
<div id="wrapper">
`<div class="window d-inline-block position-absolute shadow bg-dark border pointer-events-auto window-front" style id="window_${id}">
<div class="s ui-resizable-handle ui-resizable-s"></div>
<div class="e ui-resizable-handle ui-resizable-e"></div>
<div class="se ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
<div id="wrapper" class="p-5 d-inline-block">
<div id='header' class='row mb-5'>
<div id="title" class="col"></div>
<div class="col-auto-1 no-wrap"><!-- button id="rollup" class="btn btn-primary btn-sm">_</button --> <button id="close" class="btn btn-primary btn-sm">X</button></div>
Expand All @@ -115,64 +112,87 @@ function newwindow(id, title, content, height, width) {
$(this).parents('.window').remove();
});

mywindow.mousedown(function () {
window_front(mywindow)
});

mywindow.draggable({
scroll: false,
cancel: '#contents',
});



mywindow.resizable({
containment: '#windows',
handles: {
'se': '.se',
'e': '.e',
's': '.s',
},
create: function (event, ui) {
// ui has no data
},
resize: function (event, ui) {
console.log(event)
// console.log(event)
$('#contents', ui.element).width(ui.size.width-12);
$('#contents', ui.element).height(ui.size.height-$('#header', ui.element).height()-12);
},

// animate: true,
// helper: "ui-resizable-helper",
// maxHeight: 50,
// maxWidth: 350,
maxHeight: maxheight,
maxWidth: maxwidth,
minHeight: 150,
minWidth: 200,
});

mywindow.height(height);
mywindow.width(width);
if (height) {
mywindow.height(height);
}
if (width) {
mywindow.width(width);
}

}

$('#title', mywindow).html(title);
$('#contents', mywindow).html(content);

if (itsnew) {
$('#windows').append(mywindow);

if ($('#contents', mywindow).width() > maxwidth-12) {
$('#contents', mywindow).width(maxwidth-12);
}
if ($('#contents', mywindow).height() > maxheight-$('#header', mywindow).height()-12) {
$('#contents', mywindow).height(maxheight-$('#header', mywindow).height()-12);
}
}

// Fix initial content height
console.log($('#header', mywindow).height())
$('#contents', mywindow).height(mywindow.height() - $('#header', mywindow).height() - 12);

window_front(mywindow);
// console.log($('#header', mywindow).height())
// $('#contents', mywindow).height(mywindow.height() - $('#header', mywindow).height() - 12);

// Bring to front on mouse down
mywindow.mousedown(function () {
var win = $(this);
if (!win.hasClass('window-front')) {
$('#windows div').removeClass('window-front');
win.addClass('window-front');
}
});
}

function analyze(e) {
$('#status')
.html(
`<span class="text-center">Analyzing</span>
`<div class="text-center">Analyzing</div>
<div class="p-10">
<div class="sk-center sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>`
</div>
</div>`
)
.show();

Expand All @@ -199,15 +219,15 @@ function analyze(e) {
// Hide status
$('#status').hide();

info =
var info =
data.targets +
' targets can ' +
(!data.reversed ? 'be reached via ' : 'reach ') +
data.links +
' possible pwns ' +
(!data.reversed ? 'from' : 'to') +
':<hr/>';
for (let objecttype in data.resulttypes) {
for (var objecttype in data.resulttypes) {
info += data.resulttypes[objecttype] + ' ' + objecttype + '<br>';
}
info += data.total + ' total objects in analysis';
Expand Down Expand Up @@ -256,6 +276,8 @@ $(function () {
$('#optionswrap').animate({ width: 'toggle' }, 400);
});

// autosize($('#querytext'));

$('#explore').on('click', function () {
newwindow(
'explore',
Expand Down Expand Up @@ -294,7 +316,7 @@ $(function () {
dataType: "json",
success: function (data) {
// details = rendernode(data)
details = renderdetails(data)
var details = renderdetails(data)
newwindow("details_"+d.node.id, "Item details", details);
},
// error: function (xhr, status, error) {
Expand Down Expand Up @@ -423,13 +445,13 @@ $(function () {
buttons += '<tr class="pb-5">';

buttons +=
`<td class="overflow-hidden font-size-12 align-middle">` +
`<td class="overflow-hidden font-size-12 align-middle" lookup="`+method.name+`">` +
method.name;
`</td>`;

buttons += '<td class="checkbox-button no-wrap">';
buttons +=
`<input type="checkbox" ` +
`<input type="checkbox" data-column="first" data-default=`+method.defaultenabled_f+` ` +
(method.defaultenabled_f ? 'checked' : '') +
` id="` +
method.lookup +
Expand All @@ -441,7 +463,7 @@ $(function () {
method.lookup +
`_f" class ="btn btn-sm mb-0">F</label>`;
buttons +=
`<input type="checkbox" ` +
`<input type="checkbox" data-column="middle" data-default=` + method.defaultenabled_m +` ` +
(method.defaultenabled_m ? 'checked' : '') +
` id="` +
method.lookup +
Expand All @@ -453,7 +475,7 @@ $(function () {
method.lookup +
`_m" class ="btn btn-sm mb-0">M</label>`;
buttons +=
`<input type="checkbox" ` +
`<input type="checkbox" data-column="last" data-default=` + method.defaultenabled_l +` ` +
(method.defaultenabled_l ? 'checked' : '') +
` id="` +
method.lookup +
Expand All @@ -479,13 +501,13 @@ $(function () {
buttons += '<tr class="pb-5">';

buttons +=
`<td class="overflow-hidden font-size-12 align-middle">` +
`<td class="overflow-hidden font-size-12 align-middle" lookup="`+objecttype.name+`">` +
objecttype.name;
`</td>`;
buttons += '<td class="checkbox-button no-wrap pb-5">';

buttons +=
`<input type="checkbox" ` +
`<input type="checkbox" data-column="first" data-default=` + objecttype.defaultenabled_f +` ` +
(objecttype.defaultenabled_f ? 'checked' : '') +
` id="` +
objecttype.lookup +
Expand All @@ -497,7 +519,7 @@ $(function () {
objecttype.lookup +
`_f" class ="btn btn-sm mb-0">F</label>`;
buttons +=
`<input type="checkbox" ` +
`<input type="checkbox" data-column="middle" data-default=` + objecttype.defaultenabled_m +` `+
(objecttype.defaultenabled_m ? 'checked' : '') +
` id="` +
objecttype.lookup +
Expand All @@ -509,7 +531,7 @@ $(function () {
objecttype.lookup +
`_m" class ="btn btn-sm mb-0">M</label>`;
buttons +=
`<input type="checkbox" ` +
`<input type="checkbox" data-column="last" data-default=` + objecttype.defaultenabled_l +` `+
(objecttype.defaultenabled_l ? 'checked' : '') +
` id="` +
objecttype.lookup +
Expand Down
27 changes: 18 additions & 9 deletions modules/analyze/html/graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -545,7 +545,7 @@ var cytostyle = [{
];

function getGraphlayout(choice) {
layouttemplate = fcoselayout
var layouttemplate = fcoselayout
switch (choice) {
case "cose":
layouttemplate = coselayout
Expand All @@ -567,10 +567,20 @@ function getGraphlayout(choice) {
break
}

layout = cy.layout(layouttemplate)
var layout = cy.layout(layouttemplate)

layout.on("layoutstart", function (event) {
$("#status").html("Running graph layout").show()
$("#status").html(`<div>Running graph layout</div>
<div class= "p-10" >
<div class="sk-center sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</div>`).show()
})
layout.on("layoutstop", function (event) {
$("#status").hide()
Expand All @@ -581,8 +591,7 @@ function getGraphlayout(choice) {
function nodelabel(ele) {
switch ($("#graphlabels").val()) {
case "normal":
label = ele.data("label");
return label
return ele.data("label");
case "off":
return "";
case "anonymize":
Expand All @@ -598,8 +607,8 @@ function renderedge(ele) {
}

function rendermethods(methods) {
prob = edgeprobability(methods);
s = '<span class="badge badge-';
var prob = edgeprobability(methods);
var s = '<span class="badge badge-';
if (prob < 33) {
s += 'danger';
} else if (prob < 67) {
Expand All @@ -617,7 +626,7 @@ function rendermethods(methods) {
}

function rendernode(ele) {
s = '<div>' + nodelabel(ele);
var s = '<div>' + nodelabel(ele);
if (ele.data("engine.SAMAccountName")) s += ' (' + ele.data("engine.SAMAccountName") + ')';
s += '</div>';
if (ele.data("distinguishedName")) s += '<div>' + ele.data("distinguishedName") + '</div>';
Expand All @@ -626,7 +635,7 @@ function rendernode(ele) {

// Object with values from AD and possibly other places
function renderdetails(data) {
result = "<table>"
var result = "<table>"
for (var attr in data.attributes) {
result += "<tr><td>" + attr + "</td><td>"
attrvalues = data.attributes[attr]
Expand Down
3 changes: 2 additions & 1 deletion modules/analyze/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<script src="external/jquery-3.6.0.min.js"></script>
<script src="external/jqueryui/jquery-ui.min.js"></script>
<script src="external/jstree/jstree.min.js"></script>
<script src="external/autosize.js"></script>

<script src="external/cytoscape.min.js"></script>
<script src="external/cytoscape-context-menus.js"></script>
Expand Down Expand Up @@ -51,7 +52,7 @@
</head>

<body class="dark-mode z-0">
<div id="windows">
<div id="windows" class="position-absolute">
<div class="sticky-alerts"></div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion modules/analyze/html/preferences.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function saveprefs() {
}

function getpref(key, defvalue) {
value = prefs[key];
var value = prefs[key];
if (value != null) {
return value
}
Expand Down

0 comments on commit ad64eec

Please sign in to comment.