Refactor of History module (#184)

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #184
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/assets/css/tools/mock/common.css

@@ -6,6 +6,8 @@
 @import url('r11tooltip.css');
 @import url('r11modal.css');
 @import url('r11flexbox.css');
+@import url('r11popup.css');
+@import url('../../highlight.css');
 
 @font-face {
     font-family: 'Material Icons';

Frontend/assets/css/tools/mock/r11addons.css

@@ -69,4 +69,27 @@
 .content p {
     margin: 0;
     padding: 0;
-}
+}
+
+.refresh-button{
+    float: right; 
+    border: none; 
+    background-color: unset; 
+    font-size: xx-large; 
+}
+
+.refresh-button:hover{
+  animation-name: rotation;
+  animation-duration: 0.8s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes rotation{
+    from{
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }

Frontend/assets/css/tools/mock/r11popup.css

@@ -0,0 +1,83 @@
+.popup-flex:not(.hiddable-container){
+    animation: blur 0.5s ease-in-out ;
+    animation-fill-mode: forwards;
+}
+.popup-flex{
+    display: flex; 
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    z-index: 50;
+    flex-direction: column;
+    gap: 2%;
+    position: fixed;
+    justify-content: center;
+}
+
+.popup-body{
+    min-width: 33%;
+    max-width: 60%;
+    max-height: 70%;
+    background-color: white;
+    box-shadow: 10px 10px 5px lightblue;
+    min-height: 45%;
+    border-radius: 1em;
+    text-align: center;
+    padding: 10px 15px 15px 15px;
+    color: black;
+    border: 1px #2A93B0 solid;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+}
+
+.popup-button-close-container{
+    text-align: right;
+    margin-right: 2%;
+    margin-top: 1%;
+    font-size: xx-large;
+    font-weight: bold;
+    position: sticky;
+    top:0
+}
+
+.hiddable-popup-option{
+    flex-grow: 1;
+    overflow: auto;
+    padding: 1.5%;
+}
+
+.popup-button-close{
+    background: padding-box;
+    border: 0;
+}
+
+.popup-button-close:hover{
+    color: #2A93B0;
+}
+
+.hiddable-container{
+    display:none;
+}
+
+.hidden-popup-type{
+    display: none;
+}
+
+#history-request-body{
+    text-align: justify;
+}
+
+@keyframes blur {
+    0% {
+      backdrop-filter: blur(0px);
+    }
+
+    50% {
+      backdrop-filter: blur(5px);
+    }
+
+    100% {
+      backdrop-filter: blur(10px);
+    }
+  }

Frontend/assets/css/tools/mock/r11tables.css

@@ -68,4 +68,29 @@
     background-color: #3bc4f1;
     text-align: left;
     color: white;
+}
+
+.table-default td{
+    text-align: center;
+}
+
+#header-table tr td {
+    border: 1px black solid;
+    padding: 1.5%;
+    
+}
+
+#header-table{
+    border-collapse: collapse;
+    width: 100%;
+    height: 100%;
+}
+
+.history-header-name{
+    min-width: 10vw;
+}
+
+#historyTable, td{
+    padding: 1%;
+    overflow-x: scroll;
 }

Frontend/assets/scripts/tools/mock/datatransfer.js

@@ -470,7 +470,7 @@ function selectMessage(id){
     $('.tile[tileid="'+id+'"]').addClass("active");
     
     initializeHistory();
-    refreshHeaderTable(innerHTML);
+    refreshHeaderTable(document.innerHTML);
 }
 
 

Frontend/assets/scripts/tools/mock/historyloader.js

@@ -46,13 +46,36 @@ function historyToHtml(){
     for(let i=0; i<iterations; i++){
         let style = i%2==0 ? ' class="even"' : '';
         innerHTML += '<tr' + style + '>' +
-            '<td>' + historyJson[i].dateTimeStamp + '</td>' +
-            '<td>' + historyJson[i].interfaceName + '</td>' +
+            '<td>' + parseTimeStamp(historyJson[i].dateTimeStamp) + '</td>' +
+            '<td>' + historyJson[i].httpMethod + '</td>' +
+            '<td>' + parseRequestBody(historyJson[i].requestBody, i) + '</td>' +
+            '<td> <button id="'+i+'" class="showHeaderButton" onClick="showHeadersHistory(this);"> Show headers </button> </td>' + 
         '</tr>';
     }
     return innerHTML;
 }
 
+function parseRequestBody(requestBody,i){
+    return requestBody.length == 0 ?
+     "No request body" :
+     '<button id="'+i+'" class="showRequestBodyButton" onClick="showRequestBody(this);"> Show request body </button>'
+}
+
+function parseTimeStamp(timeStamp){
+    return timeStamp.substring(0,19).replace('T',' ');
+}
+
+function parseHeaders(pos){
+    parsedJson = new Map();
+    headers = historyJson[pos].headers
+    Object.keys( headers ).forEach(
+        (jsonKey) => {
+            parsedJson.set( jsonKey , headers[jsonKey] );
+        }
+    )
+    return parsedJson;
+}
+
 function displayHistory(){
     $('#historyTable tbody').html(historyToHtml());
 }

Frontend/assets/scripts/tools/mock/popup.js

@@ -0,0 +1,34 @@
+
+function switchPopups (neededPopupOption) { 
+    $('.hiddable-popup-option').addClass('hidden-popup-type');
+    $('#'+neededPopupOption).removeClass('hidden-popup-type');
+ }
+
+function showPopup(){
+    $('.popup-flex').removeClass('hiddable-container');
+}
+
+function hidePopup(){
+    $('.popup-flex').addClass('hiddable-container');
+    $('.hiddable-popup-option').addClass('hidden-popup-type');
+}
+
+/*
+* Event listener that's close the popup when user clicks out of a popup.
+*/
+
+window.addEventListener(
+    'click' ,
+    (clickedElement) => {
+        if(!document.getElementById('popup-body').contains(clickedElement.target) && clickedElement.target.className == 'popup-flex' ) {
+            hidePopup();
+        }
+    }
+);
+
+$('.popup-button-close').click(
+    () => {
+        hidePopup();
+        $('.hiddable-popup-option').addClass('hidden-popup-type')
+    }
+);

Frontend/assets/scripts/tools/mock/uianimation.js

@@ -35,7 +35,6 @@ $('#historyTab').click(showHistory);
 $('#btn-history-filter').click(historyFilterSwitch);
 
 
-
 const tabitem = $('.tabitem');
 function showHistory(){
     $('#headersTab').click(showHeaders);
@@ -52,8 +51,6 @@ function initializeHistory(){
     getLast24hHistoryData();
 }
 
-
-
 function showHeaders(){
     $('#historyTab').click(showHistory);
     tabitem.removeClass('active');
@@ -63,6 +60,109 @@ function showHeaders(){
     $('#headersTab').off('click');
 }
 
+function showHeadersHistory(element){
+   historyTable = '';
+   headers = parseHeaders(element.id)
+   headers.forEach(
+    (value,key) => {
+        historyTable +=
+        '<tr>' +
+        '<td class="history-header-name">'+ key + '</td>' +
+        '<td class="history-header-value">'+ value + '</td>' +
+        '</tr>'
+    }
+   );
+    document.getElementById('header-history-table-body').innerHTML = historyTable;
+    switchPopups('history-headers-table');
+    showPopup();
+}
+
+async function formatJSON(json) {
+    const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting";
+
+    var init = {
+        body: json,
+        method: "POST"
+    };
+    var request = new Request(address, init);
+    
+    var result = await fetch(request).then(response => {
+        return response.text().then(function (text) {
+            var json = JSON.parse(text);
+            json.status = response.status;
+            return json;
+        });
+        
+    });
+    return result;
+}
+
+async function formatXML(xml) {
+    const address = window.location.protocol + "//" + window.location.hostname + ":" + 8082 + "/prettify";
+    var data = {
+        data: xml,
+        process: "",
+        processor: "libxml",
+        version: "1.0"
+    }
+
+    var init = {
+        body: JSON.stringify(data),
+        method: "POST"
+    };
+    var request = new Request(address, init);
+    
+    var result = await fetch(request).then(response => {
+        return response.text().then(function (text) {
+            return JSON.parse(text);
+        });
+        
+    });
+    return result;
+}
+
+function showRequestBody(element){
+    var historyRequestBody = historyJson[element.id].requestBody;
+    const popupContent = document.getElementById('code-highlight-content')
+    
+    document.getElementById('code-highlight-content').innerText = "Loading...";
+    switch(historyJson[element.id].headers["content-type"]){
+        case "application/json":{
+            formatJSON(historyRequestBody).then(function(result) {
+                
+                if (result.status == "200") {
+                    popupContent.innerText = result.data;
+                    highlightSyntax('code-highlight-content');
+                }
+                else {
+                    popupContent.innerText = historyRequestBody;
+                }
+            });
+            break;
+        }
+        case "application/xml":{
+            formatXML(historyRequestBody).then(function(result) {
+                if (result.status == "OK") {
+                    popupContent.innerText = result.result;
+                    highlightSyntax('code-highlight-content');
+                }
+                else {
+                    popupContent.innerText = historyRequestBody;
+                }
+                
+            });
+            
+            break;
+        }
+        default:{
+            popupContent.innerText = historyRequestBody;
+            highlightSyntax('code-highlight-content');
+        }
+    }
+    switchPopups('history-request-body');
+    showPopup();
+}
+
 function focusInTip(element){
     showTip(element);
     focusedField = true;
@@ -73,6 +173,10 @@ function focusOutTip(element){
     hidTip(element);
 }
 
+function refreshHistoryRecords(){
+    getLast24hHistoryData();
+}
+
 function hidTip(element){
     if(focusedField) return;
     $('#'+element).removeClass('active');