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

<!-- 
    Author: David Cruciani
-->

{% extends 'base.html' %}

{% block content %}
    <br> <br>
    <input type="hidden" id="share" value="{{sid}}">
    <div id="top" style="display: ruby; margin-top: 40px;">
        <h2>{{query}}</h2>
    </div>

    <div class="btn-group" style="float: right;" role="group" aria-label="Basic mixed styles example">
        <a style="float: right;" class="btn btn-primary" href="/" title="Do a new query with no relation with this one">New query</a>
        <a style="float: right;" class="btn btn-secondary" href="/?query={{query}}" title="New query with same name">Query</a>
      </div>
    

    <div class="card card-body">
        <div class="row">
            <div class="col">
                <h4>Input Attribute:</h4>
                {{input_query}}
            </div>
            <div class="col">
                <h4>Modules:</h4>
                {{", ".join(modules)}}
            </div>
        </div>
        <div class="d-flex w-100 justify-content-between">
            <div></div>
            <small><i>{{query_date}}</i></small>
        </div>
    </div>
    
    <div style="margin-top: 10px;" v-if="is_searching" class="progress" >
        <div class="progress-bar" id="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" :style="'width:'+progress + '%;'">
            [[progress]]%
        </div>
    </div>
    <span v-if="status_site" style="margin-left: 5px; font-size: 13px; float: right;">[[status_site]]</span>

    <br/>

    <button class="btn btn-outline-primary" style="position: fixed; right: 0px; margin-top:30px" 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-visual" @click="active_tab('visual')">Visual</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" id="tab-json" aria-current="page" @click="active_tab('json')">Json</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" id="tab-markdown" @click="active_tab('markdown')">Markdown</button>
        </li>
    </ul>

    <div class="row">
        <div class="col-10">          
            <template v-if="tab_list == 'visual'">
                <div data-bs-spy="scroll" data-bs-target="#list-result" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
                    <div class="accordion" v-if="Object.keys(modules_res).length" style="width: 95%">
                        <div class="accordion-item" :id="'list-item-'+key" 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 in result.results.Object">
                                            <div v-html="parseMispObject(obj, '/home/{{sid}}?query=', query_as_same)[0].outerHTML"></div>
                                        </template>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>

            <template v-else-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 data-bs-spy="scroll" data-bs-target="#list-result" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
                            <div class="accordion">
                                <div class="accordion-item" :id="'list-item-'+key" 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">
                                            <a class="btn btn-primary" :href="`/download/${sid}?module=${key}`" title="Download the json" style="padding: 5px; margin-left: 5px; margin-top: 5px;">Download</a>
                                            <div class="accordion-body" v-html="generateCoreFormatUI(result)[0].outerHTML"></div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>

                        <!-- Errors Part -->
                        <hr style="margin-top: 50px">
                        <h3 id="errors_part">Errors</h3>
                        <div data-bs-spy="scroll" data-bs-target="#list-error" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
                            <div class="accordion">
                                <div class="accordion-item" :id="'list-item-'+key" 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>
                    
                </div>
            </template>

            <template v-else-if="tab_list == 'markdown'">
                <div v-if="Object.keys(modules_res).length" class="accordion" style="width: 95%">
                    <div class="accordion-item" :id="'list-item-'+key" 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">
                                        <pre>
#### [[obj.name]]
<template v-for="attr, key_attr in obj.Attribute">
###### [[attr.object_relation]]
Type: [[attr.type]]
Value: [[attr.value]]
</template>
                                        </pre>
                                        <hr>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>

        <div id="list-result" class="list-group col-2" style="position: fixed; right: 0px;">
            <a class="list-group-item list-group-item-action" v-if="tab_list == 'json'" style="background-color: #0d6efd; color:white" href="#results_part">Results</a>
            
            <template v-for="result, key in modules_res">
                <a class="list-group-item list-group-item-action" v-if="!('error' in result)" :href="'#list-item-'+key">[[key]]</a>
            </template>
            
            <template v-if="tab_list == 'json'">
                <a class="list-group-item list-group-item-action" style="background-color: #0d6efd; color:white" href="#errors_part">Errors</a>
                <div id="list-error" class="list-group">
                    <template v-for="result, key in modules_res">
                        <a class="list-group-item list-group-item-action" v-if="'error' in result" :href="'#list-item-'+key" style="border-radius: 0;">[[key]]</a>
                    </template>
                </div>
            </template>
        </div>          
    </div>

    <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("visual")
            const history = ref({})
            const query_info = ref({})


            function actionQuery(){
                is_searching.value = true
                pollScan();
            }

            async function queryInfo(){
                sid.value = $("#share").val()
                let res = await fetch("/get_query_info/" + sid.value)
                let loc = await res.json()
                query_info.value = loc
            }

            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-visual").classList.remove("active")
                        document.getElementById("tab-markdown").classList.remove("active")
                    }
                }else if(active_tab == "visual"){
                    tab_list.value = "visual"
                    if ( !document.getElementById("tab-visual").classList.contains("active") ){
                        document.getElementById("tab-visual").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-visual").classList.remove("active")
                    }
                }
            }

            async function get_history_session(){
                let res = await fetch("/get_current_query_history")
                let loc = await res.json()
                history.value = loc
            }

            async function query_as_same(value){
                let result_dict = {"modules": query_info.value["modules"], 
                                    "input": query_info.value["input_query"],
                                    "query": value,
                                    "parent_id": sid.value,
                                    "query_as_same": true,
                                    "config": {}
                                }
                const res = await fetch('/run_modules',{
                                headers: { "X-CSRFToken": $("#csrf_token").val(), "Content-Type": "application/json" },
                                method: "POST",
                                body: JSON.stringify(result_dict)
                            })
                if(await res.status == 201){
                    let loc = await res.json()
                    await nextTick()
                    window.location.href="/query/" + loc['id']
                }
            }

            onMounted(() => {
                queryInfo()
                actionQuery()
                get_history_session()
                window._query_as_same = query_as_same
            })

            return {
                message_list,
                sid,
                query_info,
                progress,
                status_site,
                is_searching,
                modules_res,
                tab_list,
                history,
                generateCoreFormatUI,
                parseMispObject,
                active_tab,
                query_as_same
            }
        }
    }).mount('.container-fluid')

</script>
{% endblock %}