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/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');