Setup js unit test and code coverage framework

(1) Use frontend-maven-plugin to integrate frontend development
(2) Use jest as test tool
(3) Use webpack to create webapp bundle
(4) Coverage data is saved in target/jscoverage

Issue-ID: POLICY-2311
Signed-off-by: huaxing <huaxing.jin@est.tech>
Change-Id: I34fb7487c1e0ca29114eb7accba8bb7c4812da34

1 files changed, 416 insertions, 0 deletions

diff --git a/gui-pdp-monitoring/src/webapp/js/MonitoringUtils.js b/gui-pdp-monitoring/src/webapp/js/MonitoringUtils.js
new file mode 100644
index 0000000..9c6e076
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/MonitoringUtils.js
@@ -0,0 +1,416 @@
+/*-
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2020 Nordix Foundation.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * ============LICENSE_END=========================================================
+ */
+
+import $ from "jquery";
+import { createEngineServiceTable } from "./PdpInformation";
+import { createEngineSummaryTable } from "./PdpStatisticsSummary";
+import { RenderPdpList } from "./PdpListView";
+
+/*
+ * Crate a dialog with input, attach it to a given parent and show an optional message
+ */
+function papDialogFormActivate(formParent, message) {
+    papUtilsRemoveElement("papDialogDiv");
+
+    var contentelement = document.createElement("papDialogDiv");
+    var formDiv = document.createElement("div");
+    var backgroundDiv = document.createElement("div");
+    backgroundDiv.setAttribute("id", "papDialogDivBackground");
+    backgroundDiv.setAttribute("class", "papDialogDivBackground");
+
+    backgroundDiv.appendChild(formDiv);
+    contentelement.appendChild(backgroundDiv);
+    formParent.appendChild(contentelement);
+
+    formDiv.setAttribute("id", "papDialogDiv");
+    formDiv.setAttribute("class", "papDialogDiv");
+
+    var headingSpan = document.createElement("span");
+    formDiv.appendChild(headingSpan);
+
+    headingSpan.setAttribute("class", "headingSpan");
+    headingSpan.innerHTML = "PAP Configuration";
+
+    var form = document.createElement("papDialog");
+    formDiv.appendChild(form);
+
+    form.setAttribute("id", "papDialog");
+    form.setAttribute("class", "form-style-1");
+    form.setAttribute("method", "post");
+
+    if (message) {
+        var messageLI = document.createElement("li");
+        messageLI.setAttribute("class", "dialogMessage");
+        messageLI.innerHTML = message;
+        form.appendChild(messageLI);
+    }
+
+    var services = localStorage.getItem("pap-monitor-services_old");
+    //url
+    var input = createDialogList(form, "papDialogUrlInput","Pap rest baseURL:", "services_url_input", "http://localhost:12345", (services && services !== "null") ? JSON.parse(services).useHttps + "://" + JSON.parse(services).hostname + ":"
+    + JSON.parse(services).port : "");
+
+    //UserName
+    createDialogList(form, "papDialogUsernameInput","Pap UserName:", "services_username_input", "username", (services && services !== "null") ? JSON.parse(services).username : "");
+
+    //Password
+    createDialogList(form, "papDialogPasswordInput","Pap Password:", "services_password_input", "password", (services && services !== "null") ? JSON.parse(services).password : "");
+
+    //submit
+    var inputLI = document.createElement("li");
+    form.appendChild(inputLI);
+    var submitInput = document.createElement("input");
+    submitInput.setAttribute("id", "submit");
+    submitInput.setAttribute("class", "button ebBtn");
+    submitInput.setAttribute("type", "submit");
+    submitInput.setAttribute("value", "Submit");
+    submitInput.onclick = papDialogFormSubmitPressed;
+    inputLI.appendChild(submitInput);
+
+    // Enter key press triggers submit
+    $(input).keyup(function(event) {
+        if (event.keyCode == 13) {
+            $(submitInput).click();
+        }
+    });
+
+    input.focus();
+}
+
+function createDialogList(form, forA, reminder, id, placeholder, value_old){
+    var diaLI = document.createElement("li");
+    form.appendChild(diaLI);
+
+    var diaLabel = document.createElement("label");
+    diaLI.appendChild(diaLabel);
+
+    diaLabel.setAttribute("for", forA);
+    diaLabel.innerHTML = reminder;
+
+    var diaLabelSpan = document.createElement("span");
+    diaLabel.appendChild(diaLabelSpan);
+
+    diaLabelSpan.setAttribute("class", "required");
+    diaLabelSpan.innerHTML = "*";
+
+    var input = document.createElement("input");
+    input.setAttribute("id", id);
+    input.setAttribute("placeholder", placeholder);
+    input.value = value_old;
+    diaLI.appendChild(input);
+    return input;
+}
+
+/*
+ * Create a dialog for displaying text
+ */
+function papTextDialogActivate(formParent, message, title) {
+    papUtilsRemoveElement("papDialogDiv");
+
+    var contentelement = document.createElement("div");
+    contentelement.setAttribute("id", "papDialogDiv")
+    var formDiv = document.createElement("div");
+    var backgroundDiv = document.createElement("div");
+    backgroundDiv.setAttribute("id", "papDialogDivBackground");
+    backgroundDiv.setAttribute("class", "papDialogDivBackground");
+
+    backgroundDiv.appendChild(formDiv);
+    contentelement.appendChild(backgroundDiv);
+    formParent.appendChild(contentelement);
+
+    formDiv.setAttribute("id", "papErrorDialogDiv");
+    formDiv.setAttribute("class", "papDialogDiv papErrorDialogDiv");
+
+    var headingSpan = document.createElement("span");
+    formDiv.appendChild(headingSpan);
+
+    headingSpan.setAttribute("class", "headingSpan");
+    headingSpan.innerHTML = title;
+
+    var form = document.createElement("div");
+    formDiv.appendChild(form);
+
+    form.setAttribute("id", "papDialog");
+    form.setAttribute("class", "form-style-1");
+    form.setAttribute("method", "post");
+
+    if (message) {
+        var messageLI = document.createElement("li");
+        messageLI.setAttribute("class", "dialogMessage");
+        messageLI.innerHTML = message;
+        form.appendChild(messageLI);
+    }
+
+    var inputLI = document.createElement("li");
+    form.appendChild(inputLI);
+
+    var cancelInput = document.createElement("input");
+    cancelInput.setAttribute("class", "button ebBtn");
+    cancelInput.setAttribute("type", "submit");
+    cancelInput.setAttribute("value", "Close");
+    cancelInput.onclick = newModelFormCancelPressed;
+    form.appendChild(cancelInput);
+}
+
+/*
+ * Create a Success dialog
+ */
+function papSuccessDialogActivate(formParent, message) {
+    papTextDialogActivate(formParent, message, "Success");
+}
+
+/*
+ * Create an Error dialog
+ */
+function papErrorDialogActivate(formParent, message) {
+    papTextDialogActivate(formParent, message, "Error");
+}
+
+/*
+ * Dialog cancel callback
+ */
+function newModelFormCancelPressed() {
+    papUtilsRemoveElement("papDialogDivBackground");
+}
+
+/*
+ * Dialog submit callback
+ */
+function papDialogFormSubmitPressed() {
+    var url = $('#services_url_input').val();
+    var userName = $('#services_username_input').val();
+    var passWord = $('#services_password_input').val();
+    if (url.length > 0 && userName.length > 0 && passWord.length > 0) {
+        var engineConfig = {
+            useHttps : url.split(":")[0] == "https"? "https": "http",
+            hostname : url.split(":")[1].split("//")[1],
+            port : url.split(":")[2],
+            username : userName,
+            password : passWord
+        };
+        localStorage.setItem("pap-monitor-services_old", JSON.stringify(engineConfig));
+        localStorage.setItem("pap-monitor-services", JSON.stringify(engineConfig));
+        papUtilsRemoveElement("papDialogDivBackground");
+        getEngineURL();
+    }
+}
+
+/*
+ * Remove an element from the page
+ */
+function papUtilsRemoveElement(elementname) {
+    var element = document.getElementById(elementname);
+    if (element != null) {
+        element.parentNode.removeChild(element);
+    }
+}
+
+function getHomepageURL() {
+    var homepageURL = location.protocol
+            + "//"
+            + window.location.hostname
+            + (location.port ? ':' + location.port : '')
+            + (location.pathname.endsWith("/monitoring/") ? location.pathname.substring(0, location.pathname
+                    .indexOf("monitoring/")) : location.pathname);
+    location.href = homepageURL;
+}
+
+function removeChildrenElementsByClass(className){
+    var elements = document.getElementsByClassName(className);
+    elements[0].innerHTML = '';
+}
+
+/*
+ * Clears and resets all content on the page
+ */
+function setUpPage(clearPdps) {
+    // Hide all content
+    $('#content').hide();
+
+    // Clear each div
+    $('#content > div').each(function () {
+        $(this).empty();
+    });
+
+    // clear hashchange
+    history.replaceState(null, null, ' ');
+
+    //remove last search result of pdps.
+    if (clearPdps) {
+        removeChildrenElementsByClass('pdps__list');
+    } else {
+        localStorage.setItem("pap-monitor-services", localStorage.getItem("pap-monitor-services_old"));
+    }
+
+    // Reset trackers for tables
+    window.engineStatusTables = [];
+
+    // Set up content div's
+    createEngineServiceTable();
+    createEngineSummaryTable();
+}
+
+/*
+ * Retrieves the engine URL from the cookie. If it has not been set yet, then a
+ * dialog is shown asking for it
+ */
+function getEngineURL(message) {
+    // The engine URL is stored in a cookie using the key
+    // "pap-monitor-services"
+    var services = localStorage.getItem("pap-monitor-services");
+
+    // If an engine URL is stored in the cookie
+    if (services) {
+        // Parse the engine URL
+        window.services = JSON.parse(services);
+
+        // Send a request with that engine URL
+        ajax_get(window.restRootURL, getPdpList,
+            window.services.useHttps, window.services.hostname, window.services.port,
+            window.services.username, window.services.password);
+    } else {
+        // Prompt for engine URL
+        papDialogFormActivate(document.body, message);
+    }
+}
+
+/*
+ * Clears the cookie and reset the page
+ */
+function clearEngineURL(clearPdps) {
+
+    if (typeof window.servicesCall !== "undefined") {
+        window.servicesCall.abort();
+    }
+
+    // Remove engine URL from cookie
+    localStorage.removeItem("pap-monitor-services");
+
+    // Reset the page
+    setUpPage(clearPdps);
+}
+
+function getPdpList(data) {
+    const pdpArray = [];
+    for (let i = 0; i < data.groups.length; i++) {
+        var map = {};
+        map.title = data.groups[i].name;
+        map.children = [];
+        (data.groups[i].pdpSubgroups).forEach((pdpSubgroup, index) => {
+            map.children[index] = {};
+            map.children[index].title = pdpSubgroup.pdpType;
+            const instanceId = [];
+            pdpSubgroup.pdpInstances.forEach(pdpInstance => {
+                var instanceIdMap = {};
+                instanceIdMap.title = pdpInstance.instanceId;
+                instanceId.push(instanceIdMap)
+            });
+            map.children[index].children = instanceId;
+        });
+        pdpArray.push(map);
+    }
+    RenderPdpList(pdpArray, 'pdps__list');
+}
+
+/*
+ * Send a GET request
+ */
+function ajax_get(requestURL, callback, useHttps, hostname, port, username, password, params, errorCallback) {
+    var data = {
+        useHttps: useHttps,
+        hostname: hostname,
+        port: port,
+        username: username,
+        password: password
+    };
+    for (var p in params) {
+        data[p] = params[p];
+    }
+    return $.ajax({
+        type: 'GET',
+        url: requestURL,
+        dataType: "json",
+        data: data,
+        success: function (data, textStatus, jqXHR) {
+            if (callback) {
+                callback(data);
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            if (jqXHR.status == 500 || jqXHR.status == 404) {
+                if (jqXHR.status == 404 || jqXHR.responseText.indexOf("Request failed.") !== -1) {
+                    clearEngineURL(true);
+                    getEngineURL("Cannot connect to PAP");
+                } else {
+                    papErrorDialogActivate(document.body, jqXHR.responseText);
+                }
+            }
+            if (errorCallback) {
+                errorCallback(jqXHR, textStatus, errorThrown);
+            }
+        }
+    });
+}
+
+function ajax_get_statistics(requestURL, callback, useHttps, hostname, port, username, password, id, params, errorCallback) {
+    var data = {
+        useHttps: useHttps,
+        hostname: hostname,
+        port: port,
+        username: username,
+        password: password,
+        id: id
+    };
+    for (var p in params) {
+        data[p] = params[p];
+    }
+    return $.ajax({
+        type: 'GET',
+        url: requestURL,
+        dataType: "json",
+        data: data,
+        success: function (data, textStatus, jqXHR) {
+            if (callback) {
+                callback(data);
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            if (jqXHR.status == 500 || jqXHR.status == 404) {
+                clearEngineURL(false);
+                papErrorDialogActivate(document.body, "Failed to get Statistics in DB.");
+            }
+            if (errorCallback) {
+                errorCallback(jqXHR, textStatus, errorThrown);
+            }
+        }
+    });
+}
+
+export {
+    removeChildrenElementsByClass,
+    papDialogFormActivate,
+    papErrorDialogActivate,
+    clearEngineURL,
+    getEngineURL,
+    setUpPage,
+    ajax_get,
+    ajax_get_statistics,
+    papUtilsRemoveElement,
+};
\ No newline at end of file