mirror of https://github.com/MISP/MISP
chg: [workflow:editor] Added support of collapse in hashpath picker
Sami Mokaddem
parent
fad61eb3f5
commit
fdbb88505b
|
|
@ -357,6 +357,7 @@
|
|||
border: 1px solid #e1e1e1;
|
||||
}
|
||||
#core-format-picker .selectable-key {
|
||||
font-weight: bold;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
#core-format-picker .selectable-key:hover {
|
||||
|
|
@ -373,6 +374,22 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#core-format-picker .children-counter {
|
||||
background-color: #6b6b6b;
|
||||
color: #f2f2f2;
|
||||
padding: 2px 5px;
|
||||
margin: 0px 0.25rem;
|
||||
font-size: smaller;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#core-format-picker .collaspe-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
#core-format-picker .collaspe-button:hover {
|
||||
color: #292929;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Custom input/output CSS */
|
||||
/* .drawflow .drawflow-node.expect-misp-core-format>.inputs>.input {
|
||||
background-color: #2fa1db;
|
||||
|
|
|
|||
|
|
@ -2298,7 +2298,7 @@ function getPathFiltering(key, value) {
|
|||
}
|
||||
|
||||
function generateCoreFormatUI(event, associatedParamId) {
|
||||
var indent_size = 'calc(1em)'
|
||||
var indent_size = 'calc(1.25em)'
|
||||
var color_key = '#005cd5'
|
||||
var color_index = '#727272'
|
||||
var color_string = '#cf5900'
|
||||
|
|
@ -2306,20 +2306,30 @@ function generateCoreFormatUI(event, associatedParamId) {
|
|||
var color_bool = '#004bad'
|
||||
var color_brace = '#727272'
|
||||
var color_column = '#727272'
|
||||
var color_collapse = '#727272'
|
||||
var defaultCollapseList = ['Org', 'Orgc']
|
||||
|
||||
function generate(item, depth, path) {
|
||||
function generate(item, depth, path, forceObjectCollaspe) {
|
||||
if (Array.isArray(item)) {
|
||||
var $container = $('<span>').append(
|
||||
depth == 1 ? '' : braceOpen(true),
|
||||
depth == 1 ? '' : childrenCount(item),
|
||||
genArray(item, depth, path),
|
||||
depth == 1 ? '' : braceClose(true),
|
||||
)
|
||||
if (depth > 2) {
|
||||
$container.children("div").toggleClass("hidden")
|
||||
}
|
||||
} else if (typeof item === 'object' && item !== null) {
|
||||
var $container = $('<span>').append(
|
||||
depth == 1 ? '' : braceOpen(),
|
||||
depth == 1 ? '' : childrenCount(item),
|
||||
genObject(item, depth, path),
|
||||
depth == 1 ? '' : braceClose(),
|
||||
)
|
||||
if (forceObjectCollaspe === true) {
|
||||
$container.children("div").toggleClass("hidden")
|
||||
}
|
||||
} else {
|
||||
var $container = genValue(item, path)
|
||||
}
|
||||
|
|
@ -2345,10 +2355,18 @@ function generateCoreFormatUI(event, associatedParamId) {
|
|||
Object.keys(obj).forEach(function (k) {
|
||||
var nextPath = path + '.' + k
|
||||
var v = obj[k]
|
||||
var forceCollaspe = defaultCollapseList.includes(k)
|
||||
var $key = genKey(k, nextPath)
|
||||
var $value = generate(v, depth+1, nextPath)
|
||||
var $value = generate(v, depth+1, nextPath, forceCollaspe)
|
||||
var $div = $('<div>')
|
||||
$div.append($key, column(), $value)
|
||||
var $collase = ''
|
||||
if (isIterable(v)) {
|
||||
$collase = collapseIcon()
|
||||
if (depth > 1 && (Array.isArray(v) || forceCollaspe)) {
|
||||
$collase.addClass('fa-rotate-270')
|
||||
}
|
||||
}
|
||||
$div.append($collase, $key, column(), $value)
|
||||
$container.append($div)
|
||||
})
|
||||
setDepth($container, depth)
|
||||
|
|
@ -2359,7 +2377,7 @@ function generateCoreFormatUI(event, associatedParamId) {
|
|||
var exploded_path = path.split('.')
|
||||
var path_without_last_key = exploded_path.slice(0, -1).join('.')
|
||||
var key = exploded_path.pop()
|
||||
var path_filtered_by_value = path_without_last_key// + addFiltering(key, val)
|
||||
var path_filtered_by_value = path_without_last_key
|
||||
var $value
|
||||
if (val === null) {
|
||||
$value = $('<span>').text('null').css({'color': color_null })
|
||||
|
|
@ -2380,10 +2398,7 @@ function generateCoreFormatUI(event, associatedParamId) {
|
|||
function genKey(key, path) {
|
||||
return $('<span>')
|
||||
.text(key)
|
||||
.css({
|
||||
'color': color_key,
|
||||
'font-weight': 'bold',
|
||||
})
|
||||
.css({ 'color': color_key })
|
||||
.addClass('selectable-key')
|
||||
.attr('data-hashpath', path.slice(1))
|
||||
.attr('onclick', 'setHashpathOnInput(this, "' + associatedParamId + '")')
|
||||
|
|
@ -2406,6 +2421,21 @@ function generateCoreFormatUI(event, associatedParamId) {
|
|||
return $('<div>').append(braceClose())
|
||||
}
|
||||
|
||||
function collapseIcon() {
|
||||
return $('<i>')
|
||||
.addClass(['fas fa-caret-down', 'collaspe-button'])
|
||||
.css({ 'color': color_collapse, 'margin-right': '0.25rem', 'font-size': '1.25em' })
|
||||
.attr('onclick', '$(this).toggleClass("fa-rotate-270").parent().children().last().children("div").toggleClass("hidden")')
|
||||
}
|
||||
function childrenCount(iterable) {
|
||||
var count = getChildrenCount(iterable)
|
||||
var $span = $('<span>').text(count).addClass('children-counter')
|
||||
if (count === 0) {
|
||||
$span.css('background-color', '#a3a3a3')
|
||||
}
|
||||
return $span
|
||||
}
|
||||
|
||||
function braceOpen(isArray) {
|
||||
return $('<span>').text(isArray ? '[' : '{').css({ 'color': color_brace, margin: '0 0.25em' })
|
||||
}
|
||||
|
|
@ -2415,10 +2445,24 @@ function generateCoreFormatUI(event, associatedParamId) {
|
|||
function column() {
|
||||
return $('<span>').text(':').css({ 'color': color_column, margin: '0 0.25em' })
|
||||
}
|
||||
|
||||
function setDepth($obj) {
|
||||
$obj.css('margin-left', 'calc( ' + indent_size + ' )')
|
||||
}
|
||||
|
||||
function isIterable(obj) {
|
||||
return typeof obj === 'object' && obj !== null
|
||||
}
|
||||
function getChildrenCount(iterable) {
|
||||
var count = 0
|
||||
if (Array.isArray(iterable)) {
|
||||
count = iterable.length
|
||||
} else if (typeof iterable === 'object') {
|
||||
count = Object.keys(iterable).length
|
||||
}
|
||||
return count
|
||||
}
|
||||
|
||||
var $mainContainer = $('<div id="core-format-picker">')
|
||||
$mainContainer.append(header(), generate(event, 1, ''), footer())
|
||||
return $mainContainer
|
||||
|
|
|
|||
Loading…
Reference in New Issue