misp-modules/website/app/templates/query.html

316 lines
14 KiB
HTML

<!--
Author: David Cruciani
-->
{% extends 'base.html' %}
{% block content %}
<h1 id="top">MISP Modules</h1>
<hr>
<br>
<div style="width:50%; transform: translate(50%, 0);">
<div>
<input type="hidden" id="share" value="{{sid}}">
<input type="text" id="process-query" value="{{query}}" class="form-control" style="border-radius: 5px;" />
</div>
<div v-if="is_searching" class="progress" >
<div class="progress-bar progress-bar-striped active" id="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" :style="'width:'+progress + '%;'">
</div>
</div>
<span v-if="status_site" id="status">[[status_site]]</span>
</div>
<button style="margin-top: 10px;" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseInfo" aria-expanded="false" aria-controls="collapseInfo">
More Info
</button>
<div class="collapse" id="collapseInfo">
<div class="card card-body">
<div class="row">
<div class="col">
<h4>Input Attribute:</h4>
{{input_query}}
</div>
<div class="col">
<h4>Modules:</h4>
{%for module in modules%} {{module}}, {%endfor%}
</div>
</div>
<div class="d-flex w-100 justify-content-between">
<div></div>
<small><i>{{query_date}}</i></small>
</div>
</div>
</div>
<div style="margin-top: 10px;"><a href="/">New query</a></div>
<br/>
<button class="btn btn-outline-primary" style="position: fixed; right: 0px; top: 50%" title="Session history" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">
<i class="fa-solid fa-bars"></i>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Current History query</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div style="margin-left: 18px;">
<a class="btn btn-secondary btn-sm" href="/history_session">Complete view</a>
</div>
<div class="offcanvas-body">
<ul>
<li><a :href="'/query/'+history.uuid" :title="'Attribute: \n' +history.input+ '\n\nModules: \n' + history.modules">[[history.query]]</a></li>
<ul>
<template v-for="child in history.children">
<history_view :history="child"></history_view>
</template>
</ul>
</ul>
</div>
</div>
<!-- Results Part -->
<hr>
<ul class="nav nav-tabs" style="margin-bottom: 10px;">
<li class="nav-item">
<button class="nav-link active" id="tab-json" aria-current="page" @click="active_tab('json')">Json</button>
</li>
<li class="nav-item">
<button class="nav-link" id="tab-parser" @click="active_tab('parser')">Parser</button>
</li>
<li class="nav-item">
<button class="nav-link" id="tab-markdown" @click="active_tab('markdown')">Markdown</button>
</li>
</ul>
<template v-if="tab_list == 'json'">
<div class="row" v-if="Object.keys(modules_res).length">
<div class="col-10">
<h3 id="results_part">Results</h3>
<div class="accordion">
<div class="accordion-item" v-for="result, key in modules_res">
<template v-if="!('error' in result)">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="'#panelsStayOpen-'+key" aria-expanded="true" :aria-controls="'panelsStayOpen-'+key">
[[key]]
</button>
</h2>
<div :id="'panelsStayOpen-'+key" class="accordion-collapse collapse show">
<div class="accordion-body" v-html="generateCoreFormatUI(result)[0].outerHTML"></div>
</div>
</template>
</div>
</div>
<!-- Errors Part -->
<hr style="margin-top: 50px">
<h3 id="errors_part">Errors</h3>
<div class="accordion">
<div class="accordion-item" v-for="result, key in modules_res">
<template v-if="'error' in result">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="'#panelsStayOpen-'+key" aria-expanded="true" :aria-controls="'panelsStayOpen-'+key">
[[key]]
<span style="margin-left: 5px;" title="Error"></span>
</button>
</h2>
<div :id="'panelsStayOpen-'+key" class="accordion-collapse collapse show">
<div class="accordion-body" v-html="generateCoreFormatUI(result)[0].outerHTML"></div>
</div>
</template>
</div>
</div>
</div>
<div class="col-1" style="position: fixed; right: 0px; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);">
<div style="padding: 10px;"><a style="text-decoration: none;" href="#results_part">Results</a></div>
<div style="padding: 10px;"><a style="text-decoration: none;" href="#errors_part">Errors</a></div>
</div>
</div>
</template>
<template v-else-if="tab_list == 'parser'">
<div v-if="Object.keys(modules_res).length">
<div class="accordion">
<div class="accordion-item" v-for="result, key in modules_res">
<template v-if="!('error' in result)">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="'#panelsStayOpen-'+key" aria-expanded="true" :aria-controls="'panelsStayOpen-'+key">
[[key]]
</button>
</h2>
<div :id="'panelsStayOpen-'+key" class="accordion-collapse collapse show">
<div class="accordion-body row">
<template v-for="obj, key_obj in result.results.Object">
<h4>Object #[[key_obj+1]] - <small>[[obj.name]]</small></h4>
<div class="row" style="margin: 5px; padding: 5px;">
<div class="col-4 mb-3" style="border: 1px solid #939393; border-radius: 10px;" v-for="attr, key_attr in obj.Attribute">
<h6>Attributes #[[key_attr+1]]</h6>
<div>
Type: [[attr.type]]
</div>
<div>
Value: [[attr.value]]
</div>
<a v-if="attr.type != 'counter' && attr.type != 'datetime'" :href="'/home/{{sid}}?query='+attr.value">query</a>
</div>
</div>
<hr>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<template v-else-if="tab_list == 'markdown'">
<div v-if="Object.keys(modules_res).length">
<div class="accordion">
<div class="accordion-item" v-for="result, key in modules_res">
<template v-if="!('error' in result)">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="'#panelsStayOpen-'+key" aria-expanded="true" :aria-controls="'panelsStayOpen-'+key">
[[key]]
</button>
</h2>
<div :id="'panelsStayOpen-'+key" class="accordion-collapse collapse show">
<div class="accordion-body row">
<template v-for="obj, key_obj in result.results.Object">
<h4>Object #[[key_obj+1]] - <small>[[obj.name]]</small></h4>
<div style="margin-bottom: 10px;" v-for="attr, key_attr in obj.Attribute">
<h6>Attributes #[[key_attr+1]]</h6>
<div>
Type: [[attr.type]]
</div>
<div>
Value: [[attr.value]]
</div>
</div>
<hr>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<span id="goTop">[<a href="#top">Go Back Top</a>]</span>
{% endblock %}
{% block script %}
<script type="module">
const { createApp, ref, onMounted, nextTick, defineComponent} = Vue
import {message_list} from '/static/js/toaster.js'
import history_view from '/static/js/history/history_tree_query.js'
createApp({
delimiters: ['[[', ']]'],
components: {
history_view
},
setup() {
const is_searching = ref(false)
const sid = ref(null)
let last_registered = 0
const modules_res = ref({})
const progress = ref(0)
const status_site = ref()
const tab_list = ref("json")
const history = ref({})
function actionQuery(){
is_searching.value = true
sid.value = $("#share").val()
pollScan();
}
function pollScan() {
// Loop function to update the list of identified domains
$.getJSON('/status/' + sid.value, function(data) {
progress.value = Math.round((data['complete']/data['total'])*100)
status_site.value = 'Processed ' + data['complete'] + ' of ' + data['total']
if (data['remaining'] > 0) {
setTimeout(pollScan, 3000);
} else {
let sum = data['complete'] - data["nb_errors"]
// Button Stop pressed
if (data['stopped']){
status_site.value = 'Stopped ! ' + sum + ' Success. ' + data["nb_errors"] + ' Errors. ' + data['complete'] + ' Total.'
// Display result of the search
}else{
status_site.value = sum + ' Success. ' + data["nb_errors"] + ' Errors. ' + data['complete'] + ' Total.'
}
}
if (last_registered < data['registered']) {
last_registered = data['registered']
fetchResult();
}
});
}
async function fetchResult(){
modules_res.value = {}
const res = await fetch("/result/"+sid.value)
let loc = await res.json()
modules_res.value = loc
}
function active_tab(active_tab){
if(active_tab == "json"){
tab_list.value = "json"
if ( !document.getElementById("tab-json").classList.contains("active") ){
document.getElementById("tab-json").classList.add("active")
document.getElementById("tab-parser").classList.remove("active")
document.getElementById("tab-markdown").classList.remove("active")
}
}else if(active_tab == "parser"){
tab_list.value = "parser"
if ( !document.getElementById("tab-parser").classList.contains("active") ){
document.getElementById("tab-parser").classList.add("active")
document.getElementById("tab-json").classList.remove("active")
document.getElementById("tab-markdown").classList.remove("active")
}
}else if(active_tab == "markdown"){
tab_list.value = "markdown"
if ( !document.getElementById("tab-markdown").classList.contains("active") ){
document.getElementById("tab-markdown").classList.add("active")
document.getElementById("tab-json").classList.remove("active")
document.getElementById("tab-parser").classList.remove("active")
}
}
}
async function get_history_session(){
let res = await fetch("/get_current_query_history")
let loc = await res.json()
history.value = loc
}
onMounted(() => {
actionQuery()
get_history_session()
})
return {
message_list,
progress,
status_site,
is_searching,
modules_res,
tab_list,
history,
generateCoreFormatUI,
active_tab
}
}
}).mount('.container-fluid')
</script>
{% endblock %}