From 91ce285067bd42262c8651555673f3f49fc6e646 Mon Sep 17 00:00:00 2001
From: David Cruciani <david.cruciani@circl.lu>
Date: Tue, 20 Feb 2024 14:12:26 +0100
Subject: [PATCH] chg: [website] UI

---
 website/app/home.py              |   2 +-
 website/app/static/css/core.css  |   2 +-
 website/app/templates/home.html  | 101 ++++++++++---------
 website/app/templates/query.html | 163 ++++++++++++++-----------------
 4 files changed, 130 insertions(+), 138 deletions(-)

diff --git a/website/app/home.py b/website/app/home.py
index acc7824..6c2ea42 100644
--- a/website/app/home.py
+++ b/website/app/home.py
@@ -41,7 +41,7 @@ def query(sid):
                                sid=sid, 
                                input_query=session.input_query, 
                                modules=json.loads(session.modules_list), 
-                               query_date=session.query_date.strftime('%Y-%m-%d'))
+                               query_date=session.query_date.strftime('%Y-%m-%d %H:%M'))
     return render_template("404.html")
 
 
diff --git a/website/app/static/css/core.css b/website/app/static/css/core.css
index 3735d35..7da1b98 100644
--- a/website/app/static/css/core.css
+++ b/website/app/static/css/core.css
@@ -7,7 +7,7 @@ body {
 }
 
 
-span#goTop, span#project-version{
+span#goTop{
   position: fixed;
   right: 1em;
   bottom: 1em;
diff --git a/website/app/templates/home.html b/website/app/templates/home.html
index 28c4101..78197a7 100644
--- a/website/app/templates/home.html
+++ b/website/app/templates/home.html
@@ -13,59 +13,64 @@
 
     <hr>
     <br>
-    <div style="width:50%; transform: translate(50%, 0);">
-        <div>
-            <input type="hidden" id="parent_id" value="{{sid}}">
-            <input type="text" value="{{query}}" id="process-query" placeholder="Enter here..." autofocus class="form-control" style="border-radius: 5px;" />
+    <div class="row">
+        <div class="col-1">
+            <button style="position: fixed; top: 35%" class="btn btn-primary" @click="actionQuery()">Query</button>
         </div>
-        <span v-if="status_site" id="status">[[status_site]]</span>
-    </div>
-
-    <br>
-    <!-- Attributes selection -->
-    <div v-if="misp_attributes_list.length" style="margin-top: 10px; transform: translate(25%, 0);">
-        <div>
-            <h4>Input Attributes</h4>
-        </div>
-        <div>
-            <select data-placeholder="Input" class="select2-input form-control" name="input_select" id="input_select">
-                <option value="None">--</option>
-                <template v-for="attributes in misp_attributes_list">
-                    <option :value="attributes">[[attributes]]</option>
-                </template>
-            </select>
-        </div>
-    </div>
-
-    <!-- Results modules selection -->
-    <template v-if="modules_list.length">
-        <div v-if="attr_selected.length" style="margin-top: 10px; width: 50%; transform: translate(50%, 0);">
-            <h4>Modules</h4>
-            <select data-placeholder="Modules" class="select2-modules form-control" multiple name="modules_select" id="modules_select">
-                <template v-for="key in modules_list">
-                    <option v-if="key.mispattributes.input.includes(attr_selected)" :value="key.name" :title="key.meta.description">[[key.name]]</option>
-                </template>
-            </select>
-        </div>
-    </template>
-
-    <!-- Display in case a module as reauest_on_query activate -->
-    <div v-if="config_query.length" style="margin-top: 10px; padding: 5px" class="row">
-        <h4>Config</h4>
-        <div class="card col-4" style="margin-top: 10px; padding: 15px" v-for="module in config_query">
-            <h4>[[module.name]]</h4>
-            <div v-for="conf in module.meta.config" class="mb-3">
-                <label :for="'form-'+conf+'-'+module.name" class="form-label">[[conf]]</label>
-                <input type="text" class="form-control" :id="'form-'+conf+'-'+module.name">
-                <span style="color: brown;" :id="'error-'+conf+'-'+module.name"></span>
+        <div class="col-11">
+            <div style="width:50%; transform: translate(50%, 0);">
+                <div>
+                    <input type="hidden" id="parent_id" value="{{sid}}">
+                    <input type="text" value="{{query}}" id="process-query" placeholder="Enter here..." autofocus class="form-control" style="border-radius: 5px;" />
+                </div>
+                <span v-if="status_site" id="status">[[status_site]]</span>
             </div>
+        
+            <br>
+            <!-- Attributes selection -->
+            <div v-if="misp_attributes_list.length" style="margin-top: 10px; transform: translate(25%, 0);">
+                <div>
+                    <h4>Input Attributes</h4>
+                </div>
+                <div>
+                    <select data-placeholder="Input" class="select2-input form-control" name="input_select" id="input_select">
+                        <option value="None">--</option>
+                        <template v-for="attributes in misp_attributes_list">
+                            <option :value="attributes">[[attributes]]</option>
+                        </template>
+                    </select>
+                </div>
+            </div>
+        
+            <!-- Results modules selection -->
+            <template v-if="modules_list.length">
+                <div v-if="attr_selected.length" style="margin-top: 10px; width: 50%; transform: translate(50%, 0);">
+                    <h4>Modules</h4>
+                    <select data-placeholder="Modules" class="select2-modules form-control" multiple name="modules_select" id="modules_select">
+                        <template v-for="key in modules_list">
+                            <option v-if="key.mispattributes.input.includes(attr_selected)" :value="key.name" :title="key.meta.description">[[key.name]]</option>
+                        </template>
+                    </select>
+                </div>
+            </template>
+        
+            <!-- Display in case a module as reauest_on_query activate -->
+            <div v-if="config_query.length" style="margin-top: 10px; padding: 5px" class="row">
+                <h4>Config</h4>
+                <div class="card col-4" style="margin-top: 10px; padding: 15px" v-for="module in config_query">
+                    <h4>[[module.name]]</h4>
+                    <div v-for="conf in module.meta.config" class="mb-3">
+                        <label :for="'form-'+conf+'-'+module.name" class="form-label">[[conf]]</label>
+                        <input type="text" class="form-control" :id="'form-'+conf+'-'+module.name">
+                        <span style="color: brown;" :id="'error-'+conf+'-'+module.name"></span>
+                    </div>
+                </div>
+            </div>
+        
+            <br/>
         </div>
     </div>
 
-    <br/>
-
-    <button class="btn btn-primary" @click="actionQuery()">Query</button>
-
 {% endblock %}
 
 {% block script %}
diff --git a/website/app/templates/query.html b/website/app/templates/query.html
index ffb58c1..813391f 100644
--- a/website/app/templates/query.html
+++ b/website/app/templates/query.html
@@ -5,46 +5,37 @@
 {% 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>
+    <br> <br>
+    <input type="hidden" id="share" value="{{sid}}">
+    <div id="top" style="display: ruby; margin-top: 40px;">
+        <h2>{{query}}</h2>
     </div>
 
+    <a style="float: right;" class="btn btn-primary" href="/">New query</a>
 
-    <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 class="card card-body">
+        <div class="row">
+            <div class="col">
+                <h4>Input Attribute:</h4>
+                {{input_query}}
             </div>
-            <div class="d-flex w-100 justify-content-between">
-                <div></div>
-                <small><i>{{query_date}}</i></small>
+            <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 style="margin-top: 10px;"><a href="/">New query</a></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/>
 
@@ -132,56 +123,20 @@
     </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">
+        <div class="accordion" v-if="Object.keys(modules_res).length" style="width: 95%">
+            <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]]
@@ -189,13 +144,45 @@
                                         <div>
                                             Value: [[attr.value]]
                                         </div>
+                                        <a v-if="attr.type != 'counter' && attr.type != 'datetime'" :href="'/home/{{sid}}?query='+attr.value">query</a>
                                     </div>
-                                    <hr>
-                                </template>
-                            </div>
+                                </div>
+                                <hr>
+                            </template>
                         </div>
-                    </template>
-                </div>
+                    </div>
+                </template>
+            </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" 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>
     </template>