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

10 files changed, 1421 insertions, 0 deletions

diff --git a/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js b/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
new file mode 100644
index 0000000..514446b
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
@@ -0,0 +1,260 @@
+/*-
+ * ============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 * as d3 from "d3";
+
+/*
+ * Create a chart and append it to a container
+ */
+function createChart(data, container, title, unit, lineStroke, nodeColour) {
+    // Set the dimensions of the canvas
+    var margin = {
+        top : 30,
+        right : 20,
+        bottom : 30,
+        left : 50
+    }, width = 600 - margin.left - margin.right, height = 270 - margin.top
+            - margin.bottom;
+
+    // Set the ranges
+    var x = d3.time.scale().range([ 0, width ]);
+    var y = d3.scale.linear().range([ height, 0 ]);
+
+    // Define the axes
+    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5).innerTickSize(
+            -height).outerTickSize(0).tickPadding(10);
+
+    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10).innerTickSize(
+            -width).outerTickSize(0).tickPadding(10);
+
+    // Define the line
+    var valueline = d3.svg.line().x(function(d) {
+        return x(d.timestamp);
+    }).y(function(d) {
+        return y(d.value);
+    });
+
+    // Add the svg canvas to the container
+    var svg = d3.select(container).append("svg").attr("preserveAspectRatio",
+            "xMinYMin meet").attr("viewBox", "0 0 600 400").classed(
+            "svg-content-responsive", true).append("g").attr("transform",
+            "translate(" + margin.left + "," + margin.top + ")");
+
+    // Set the unit for the value
+    svg.attr("unit", unit);
+
+    // Format the data for the chart
+    data.forEach(function(d) {
+        d.timestamp = d.timestamp;
+        d.value = +d.value;
+    });
+
+    // Scale the range of the data
+    x.domain(d3.extent(data, function(d) {
+        return d.timestamp;
+    }));
+    y.domain([ 0, d3.max(data, function(d) {
+        return Math.ceil((d.value + 1) / 10) * 10;
+    }) ]);
+
+    // Set the colour of the line
+    if (!lineStroke) {
+        lineStroke = "#5fbadd"
+    }
+
+    // Set the colour of the circles
+    if (!nodeColour) {
+        nodeColour = "#00A9D4"
+    }
+
+    // Add the valueline path
+    svg.append("path").attr("class", "line").data(data).attr("unit", unit)
+            .attr("stroke", lineStroke).attr("d", valueline(data));
+
+    // Add the scatterplot
+    svg.selectAll("circle").data(data).enter().append("circle").attr("r", 3.5)
+            .attr("class", "circle").attr("fill", nodeColour).attr("cx",
+                    function(d) {
+                        return x(d.timestamp);
+                    }).attr("cy", function(d) {
+                return y(d.value);
+            })
+
+            // Apply the tooltip to each node
+            .on(
+                    "mouseover",
+                    function(d) {
+                        d3.select("body").select(".tooltip").transition()
+                                .duration(50).style("opacity", 1);
+                        d3.select("body").select(".tooltip").html(
+                                formatDate(new Date(d.timestamp)) + "<br/>"
+                                        + d.value + (unit ? " " + unit : ""))
+                                .style("left", (d3.event.pageX) + "px").style(
+                                        "top", (d3.event.pageY - 28) + "px");
+                    }).on(
+                    "mouseout",
+                    function(d) {
+                        d3.select("body").select(".tooltip").transition()
+                                .duration(500).style("opacity", 0);
+                    });
+
+    // Add the X Axis
+    svg.append("g").attr("class", "x axis").attr("transform",
+            "translate(0," + height + ")").call(xAxis);
+
+    // Add the Y Axis
+    svg.append("g").attr("class", "y axis").call(yAxis);
+
+    // Add the title
+    svg.append("text").attr("x", (width / 2)).attr("y", 0 - (margin.top / 2))
+            .attr("text-anchor", "middle").style("font-size", "16px").style(
+                    "text-decoration", "underline").text(title);
+
+    // Add the background
+    svg.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#777")
+            .attr("stroke-dasharray", "2,2");
+}
+
+/*
+ * Generates random chart data. Used when initializing the charts so that they
+ * are not empty on load
+ */
+function generateRandomData() {
+    var data = [];
+    for (var i = 0; i < 30; i++) {
+        data.push({
+            timestamp : new Date().getTime() - (i * 5000),
+            value : Math.floor(Math.random() * 100) + 1
+        });
+    }
+    return data;
+}
+
+/*
+ * Update a chart belonging to a specific container
+ */
+function updateChart(container, data, nodeColour) {
+    var margin = {
+        top : 30,
+        right : 20,
+        bottom : 30,
+        left : 50
+    }, width = 600 - margin.left - margin.right, height = 270 - margin.top
+            - margin.bottom;
+    var parseDate = d3.time.format("%d-%b-%y").parse;
+
+    // Format the data for the chart
+    data.forEach(function(d) {
+        d.timestamp = d.timestamp;
+        d.value = +d.value;
+    });
+
+    // Select the chart
+    var svg = d3.select(container);
+
+    // Set the ranges
+    var x = d3.time.scale().range([ 0, width ]);
+    var y = d3.scale.linear().range([ height, 0 ]);
+
+    // Define the axes
+    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5).innerTickSize(
+            -height).outerTickSize(0).tickPadding(10);
+
+    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10).innerTickSize(
+            -width).outerTickSize(0).tickPadding(10);
+
+    // Scale the range of the data
+    x.domain(d3.extent(data, function(d) {
+        return d.timestamp;
+    }));
+    y.domain([ 0, d3.max(data, function(d) {
+        return Math.ceil((d.value + 1) / 10) * 10;
+    }) ]);
+
+    // Update the valueline path
+    var valueline = d3.svg.line().x(function(d) {
+        return x(d.timestamp);
+    }).y(function(d) {
+        return y(d.value);
+    });
+
+    var unit = svg.select(".line").attr("unit");
+
+    // Remove all nodes
+    svg.selectAll("circle").remove();
+
+    // Set the node colour if one is passed in
+    if (!nodeColour) {
+        nodeColour = "#00A9D4"
+    }
+
+    // Make the changes
+    svg.select(".line").data(data) // change the line
+    .transition().duration(750).attr("d", valueline(data));
+    svg.select(".x.axis") // change the x axis
+    .transition().duration(750).call(xAxis.ticks(5));
+    svg.select(".y.axis") // change the y axis
+    .transition().duration(750).call(yAxis);
+
+    // Redraw the nodes based on the new data
+    svg.select("svg").select("g").selectAll("circle").data(data).enter()
+            .append("circle").attr("r", 3.5).attr("class", "circle").attr(
+                    "fill", nodeColour).attr("cx", function(d) {
+                return x(d.timestamp);
+            }).attr("cy", function(d) {
+                return y(d.value);
+            })
+
+            // Apply the tooltip to each node
+            .on(
+                    "mouseover",
+                    function(d) {
+                        d3.select("body").select(".tooltip").transition()
+                                .duration(50).style("opacity", 1);
+                        d3.select("body").select(".tooltip").html(
+                                formatDate(new Date(d.timestamp)) + "<br/>"
+                                        + d.value + (unit ? " " + unit : ""))
+                                .style("left", (d3.event.pageX) + "px").style(
+                                        "top", (d3.event.pageY - 28) + "px");
+                    }).on(
+                    "mouseout",
+                    function(d) {
+                        d3.select("body").select(".tooltip").transition()
+                                .duration(500).style("opacity", 0);
+                    });
+
+}
+
+/*
+ * Initialize a singleton div used as a floating tooltip for all charts
+ */
+function initTooltip() {
+    d3.select("body").append("div").attr("class", "tooltip").attr("id",
+            "tooltip").style("opacity", 0);
+}
+
+/*
+ * Format a date object to string
+ */
+function formatDate(date) {
+    return date.toLocaleString().replace(',', '');
+}
+
+export { initTooltip, createChart, updateChart };
\ No newline at end of file
diff --git a/gui-pdp-monitoring/src/webapp/js/MonitoringConfig.js b/gui-pdp-monitoring/src/webapp/js/MonitoringConfig.js
new file mode 100644
index 0000000..f929282
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/MonitoringConfig.js
@@ -0,0 +1,127 @@
+/*-
+ * ============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=========================================================
+ */
+
+// Configuration used for page layout and charts
+const config = {
+    refresh: 5000,
+    restPort: 17999,
+    engineService: {
+        parent: "engineService",
+        tableId: "engineServicesTable",
+        headers: [{
+            title: "Engine Service ID",
+            id: "engine_id"
+        }, {
+            title: "GroupName",
+            id: "group_name"
+        }, {
+            title: "SubGroupName",
+            id: "subgroup_name"
+        }, {
+            title: "HealthStatus",
+            id: "health_status"
+        }, {
+            title: "PdpState",
+            id: "pdp_state"
+        }, {
+            title: "Pap server:port",
+            id: "server_port"
+        }]
+    },
+    engineSummary: {
+        parent: "engineSummary",
+        tableId: "engineSummaryTable",
+        headers: [{
+            title: "Timestamp",
+            id: "timestamp"
+        }, {
+            title: "Sum of policy deploy",
+            id: "policy_deploy"
+        }, {
+            title: "Sum of policy deploy success",
+            id: "policy_deploy_success"
+        }, {
+            title: "Sum of policy deploy fail",
+            id: "policy_deploy_fail"
+        }, {
+            title: "Sum of policy executions",
+            id: "policy_executions"
+        }, {
+            title: "Sum of policy executions success",
+            id: "policy_executions_success"
+        }, {
+            title: "Sum of policy executions fail",
+            id: "policy_executions_fail"
+        }, {
+            title: "Up Time(ms)",
+            id: "up_time"
+        }],
+        chart: {
+            avgPolicyDurationChart: {
+                parent: "avgPolicyDuration",
+                title: "Average Policy Duration (ms)",
+                unit: "ms",
+                lineStroke: "#5FBADD",
+                nodeColour: "#00A9D4"
+            },
+        }
+    },
+    engineStatus: {
+        parent: "engineStatus",
+        tableId: "engineStatusTable",
+        headers: [{
+            title: "Timestamp",
+            id: "timestamp"
+        }, {
+            title: "Engine ID",
+            id: "engine_id"
+        }, {
+            title: "Engine Status",
+            id: "engine_status"
+        }, {
+            title: "Last Message",
+            id: "last_message"
+        }, {
+            title: "Up Time (ms)",
+            id: "up_time"
+        }, {
+            title: "Policy Executions",
+            id: "policy_executions"
+        }]
+    },
+    engineChart: {
+        lastPolicyDurationChart: {
+            parent: "lastPolicyDurationChart",
+            title: "Last Policy Duration (ms)",
+            unit: "ms",
+            lineStroke: "#F5A241",
+            nodeColour: "#F08A00"
+        },
+        averagePolicyDurationChart: {
+            parent: "averagePolicyDurationChart",
+            title: "Average Policy Duration (ms)",
+            unit: "ms",
+            lineStroke: "#00625F",
+            nodeColour: "#007B78"
+        }
+    }
+};
+
+export { config, };
\ No newline at end of file
diff --git a/gui-pdp-monitoring/src/webapp/js/MonitoringMain.js b/gui-pdp-monitoring/src/webapp/js/MonitoringMain.js
new file mode 100644
index 0000000..456f3a9
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/MonitoringMain.js
@@ -0,0 +1,109 @@
+/*-
+ * ============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 { initTooltip } from "./MonitoringChart";
+import { getEngineURL, clearEngineURL, setUpPage,
+    removeChildrenElementsByClass, ajax_get_statistics
+} from "./MonitoringUtils";
+import { setEngineServiceData } from "./PdpInformation";
+import { config } from "./MonitoringConfig";
+import { setEngineSummaryData } from "./PdpStatisticsSummary";
+import { highlightSelected } from "./PdpListView";
+import { setEngineStatusData } from "./PdpEngineWorkerStatus";
+
+function servicesCallback(data){
+    var engineURL = localStorage.getItem("pap-monitor-services");
+    if (engineURL) {
+        engineURL = JSON.parse(engineURL);
+        if (engineURL.hostname === data.server && engineURL.port === data.port) {
+            setEngineServiceData(data.engineId, window.groupName, window.subGroupName, data.healthStatus, data.pdpState, data.server, data.port);
+            setEngineSummaryData(data.status, data.timeStamp, data.policyDeployCount, data.policyDeploySuccessCount, data.policyDeployFailCount, data.policyExecutedCount, data.policyExecutedSuccessCount, data.policyExecutedFailCount);
+
+            if (window.engine_id === data.engineId){
+                setEngineStatusData(data.status, false);
+            }else{
+                removeChildrenElementsByClass(config.engineStatus.parent);
+                setEngineStatusData(data.status, true);
+            }
+
+            window.engine_id = data.engineId;
+
+            // Make content visible after data has been returned for the first time
+            if (!$(".content").is(':visible')) {
+                $(".content").fadeIn();
+            }
+
+            // Repeat the same request
+            setTimeout(function() {
+                window.servicesCall = ajax_get_statistics(window.restRootURL + "statistics/", servicesCallback,
+                    window.services.useHttps, window.services.hostname, window.services.port,
+                    window.services.username, window.services.password, window.id);
+            }, config.refresh);
+        }
+    }
+}
+
+/*
+ * Called after the DOM is ready
+ */
+$(document).ready(
+    function() {
+        window.restRootURL = location.protocol
+        + "//"
+        + window.location.hostname
+        + ':' + config.restPort
+        + (location.pathname.endsWith("/monitoring/") ? location.pathname.substring(0, location.pathname.indexOf("monitoring/")) : location.pathname)
+        + "papservices/monitoring/";
+        // Initialize tooltip for the charts
+        initTooltip();
+
+        // Set up the structure of the page
+        setUpPage(true);
+
+        // Check cookies for engine URL
+        getEngineURL();
+
+        // Add click event to config icon for clearing engine URL
+        $(".ebSystemBar-config").click(
+            function() {
+            // Clear the engine URL
+            clearEngineURL(true);
+
+            // Request the engine URL
+            getEngineURL();
+            }
+        );
+
+        ['hashchange', 'load'].forEach(event => window.addEventListener(event, function() {
+            // Get ID from url
+            window.id = window.location.hash.replace('#', '');
+            if (window.id !== ''){
+                var arr = window.id.split("/");
+                window.groupName = arr[0];
+                window.subGroupName = arr[1];
+                highlightSelected(window.id);
+                ajax_get_statistics(restRootURL + "statistics/", servicesCallback,
+                    window.services.useHttps, window.services.hostname, window.services.port,
+                    window.services.username, window.services.password, window.id);
+            }
+        }));
+    }
+);
\ No newline at end of file
diff --git a/gui-pdp-monitoring/src/webapp/js/MonitoringTable.js b/gui-pdp-monitoring/src/webapp/js/MonitoringTable.js
new file mode 100644
index 0000000..229ef6a
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/MonitoringTable.js
@@ -0,0 +1,61 @@
+/*-
+ * ============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=========================================================
+ */
+
+/*
+ * Create a table with given headers
+ */
+function createEngineTable(parent, id, tableHeaders) {
+    var table = createTable(id);
+
+    var tableHead = document.createElement("thead");
+    table.appendChild(tableHead);
+    tableHead.setAttribute("id", "engineTableHeader");
+
+    var tableHeaderRow = document.createElement("tr");
+    tableHead.appendChild(tableHeaderRow);
+    tableHeaderRow.setAttribute("id", "engineTableHeaderRow");
+
+    for ( var t in tableHeaders) {
+        var tableHeader = document.createElement("th");
+        tableHeaderRow.appendChild(tableHeader);
+        tableHeader.setAttribute("id", "engineTableHeader");
+        tableHeader.appendChild(document.createTextNode(tableHeaders[t]));
+    }
+
+    var tableBody = document.createElement("tbody");
+    tableBody.setAttribute("id", "engineTableBody");
+    table.appendChild(tableBody);
+
+    parent.append(table);
+
+    return table;
+}
+
+/*
+ * Create a table and apply UISDK styles to it
+ */
+function createTable(id) {
+    var table = document.createElement("table");
+    table.setAttribute("id", id);
+    table.setAttribute("class", "papTable ebTable elTablelib-Table-table ebTable_striped");
+    return table;
+}
+
+export { createEngineTable };
\ No newline at end of file
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
diff --git a/gui-pdp-monitoring/src/webapp/js/PdpEngineWorkerStatus.js b/gui-pdp-monitoring/src/webapp/js/PdpEngineWorkerStatus.js
new file mode 100644
index 0000000..4ba8703
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/PdpEngineWorkerStatus.js
@@ -0,0 +1,147 @@
+/*-
+ * ============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 { createEngineTable } from "./MonitoringTable";
+import { config } from "./MonitoringConfig";
+import { createChart, updateChart } from "./MonitoringChart";
+/*
+ * Create an Engine Status Table and its charts
+ */
+function createEngineStatusTable(id, startStopStatus) {
+    var tableId = config.engineStatus.tableId;
+    var headers = config.engineStatus.headers;
+
+    // Create a wrapper div for both the table and the charts
+    var wrapper = document.createElement("div");
+    wrapper.setAttribute("id", id + "_wrapper");
+    wrapper.setAttribute("class", "wrapper");
+    $("." + config.engineStatus.parent).append(wrapper);
+
+    // Create the table
+    var table = createEngineTable($(wrapper), id, headers.map(function(a) {
+        return a.title;
+    }));
+    var tableRow = document.createElement("tr");
+    var tableData = "";
+    for ( var h in headers) {
+        tableData += "<td id=" + tableId + "_" + headers[h].id + "></td>";
+    }
+    tableRow.innerHTML = tableData;
+    // var actionTD = $(tableRow).find("#" + tableId + "_action");
+    // var checked = (startStopStatus === "STOPPED") ? "checked" : "";
+    var chartWrapper = document.createElement("div");
+    chartWrapper.setAttribute("id", "chartWrapper");
+
+    $(table).children("#engineTableBody").append(tableRow);
+
+    var expand = document.createElement("i");
+    expand.setAttribute("class", "ebIcon ebIcon_rowExpanded ebIcon_large ebIcon_interactive expandIcon");
+    $(expand).click(function() {
+        if ($(chartWrapper).is(":visible")) {
+            expand.setAttribute("class", "ebIcon ebIcon_rowCollapsed ebIcon_large ebIcon_interactive expandIcon");
+        } else {
+            expand.setAttribute("class", "ebIcon ebIcon_rowExpanded ebIcon_large ebIcon_interactive expandIcon");
+        }
+        $(chartWrapper).slideToggle();
+    }.bind(window));
+    $(wrapper).append(expand);
+    $(wrapper).append(chartWrapper);
+    return table;
+}
+
+/*
+ * Check for any changes in the Engine Status Table data and its charts and
+ * update only where necessary
+ */
+function setEngineStatusData(engineStatusData, changed) {
+    var tableId = config.engineStatus.tableId;
+    var headers = config.engineStatus.headers.map(function(a) {
+        return a.id;
+    });
+    for ( var esd in engineStatusData) {
+        var id = tableId + "_" + engineStatusData[esd].id;
+        var existingTable = undefined;
+        for ( var est in window.engineStatusTables) {
+            if (id === window.engineStatusTables[est].getAttribute("id")) {
+                existingTable = window.engineStatusTables[est];
+            }
+        }
+
+        var data = [ engineStatusData[esd].timestamp, id.split("_")[1], engineStatusData[esd].status,
+                engineStatusData[esd].lastMessage, engineStatusData[esd].upTime,
+                engineStatusData[esd].policyExecutions ];
+
+        var table = existingTable;
+        // If no table already exists for the engine, add one
+        if (!table || changed) {
+            table = createEngineStatusTable(id, engineStatusData[esd].status);
+            table.setAttribute("id", id);
+            table.style["margin-bottom"] = "10px";
+            table.style.display = "inline-block";
+            window.engineStatusTables.push(table);
+        }
+
+        // Update data in table
+        for ( var h in headers) {
+            var td = $(table).find("#" + tableId + "_" + headers[h]);
+            if (td.html() !== data[h]) {
+                $(table).find("#" + tableId + "_" + headers[h]).html(data[h]);
+            }
+        }
+
+        // Update charts
+        var wrapper = $(table).parent();
+        var chartWrapper = $(wrapper).find("#chartWrapper")
+
+        var chartConfig = config.engineChart.lastPolicyDurationChart;
+        var lastPolicyDurationChart = wrapper.find("#" + chartConfig.parent)[0];
+        if (lastPolicyDurationChart) {
+            updateChart(lastPolicyDurationChart, JSON.parse(engineStatusData[esd].lastPolicyDuration),
+                    chartConfig.nodeColour);
+        } else {
+            chartConfig = config.engineChart.lastPolicyDurationChart;
+            var lastPolicyDurationDiv = document.createElement("div");
+            lastPolicyDurationDiv.setAttribute("id", chartConfig.parent);
+            lastPolicyDurationDiv.setAttribute("class", "papChart");
+            createChart(JSON.parse(engineStatusData[esd].lastPolicyDuration), lastPolicyDurationDiv,
+                    chartConfig.title, chartConfig.unit, chartConfig.lineStroke, chartConfig.nodeColour);
+            $(chartWrapper).append(lastPolicyDurationDiv);
+        }
+
+        chartConfig = config.engineChart.averagePolicyDurationChart;
+        var averagePolicyDurationChart = wrapper.find("#" + chartConfig.parent)[0];
+        if (averagePolicyDurationChart) {
+            updateChart(averagePolicyDurationChart, JSON.parse(engineStatusData[esd].averagePolicyDuration),
+                    chartConfig.nodeColour);
+        } else {
+            chartConfig = config.engineChart.averagePolicyDurationChart;
+            var averagePolicyDurationDiv = document.createElement("div");
+            averagePolicyDurationDiv.setAttribute("id", chartConfig.parent);
+            averagePolicyDurationDiv.setAttribute("class", "papChart");
+            createChart(JSON.parse(engineStatusData[esd].averagePolicyDuration), averagePolicyDurationDiv,
+                    chartConfig.title, chartConfig.unit, chartConfig.lineStroke, chartConfig.nodeColour);
+            $(chartWrapper).append(averagePolicyDurationDiv);
+        }
+
+    }
+}
+
+export { setEngineStatusData, };
\ No newline at end of file
diff --git a/gui-pdp-monitoring/src/webapp/js/PdpInformation.js b/gui-pdp-monitoring/src/webapp/js/PdpInformation.js
new file mode 100644
index 0000000..cbb71a7
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/PdpInformation.js
@@ -0,0 +1,65 @@
+/*-
+ * ============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 { config } from "./MonitoringConfig";
+import { createEngineTable } from "./MonitoringTable";
+
+/*
+ * Create the Engine Service Table
+ */
+function createEngineServiceTable() {
+    var tableId = config.engineService.tableId;
+    var headers = config.engineService.headers;
+    var table = createEngineTable($("." + config.engineService.parent), tableId, headers.map(function(a) {
+        return a.title;
+    }));
+    var tableRow = document.createElement("tr");
+    var tableData = "";
+    for ( var h in headers) {
+        tableData += "<td id=" + tableId + "_" + headers[h].id + "></td>";
+    }
+    tableRow.innerHTML = tableData;
+    $(table).children("#engineTableBody").append(tableRow);
+}
+
+/*
+ * Check for any changes in the Engine Service Table data and update only where
+ * necessary
+ */
+function setEngineServiceData(engineId, groupName, subGroupName, healthStatus, pdpState, server, port) {
+    window.engineId = engineId;
+    var tableId = config.engineService.tableId;
+    var headers = config.engineService.headers.map(function(a) {
+        return a.id;
+    });
+    var data = [ engineId, groupName, subGroupName, healthStatus, pdpState, server + ":" + port ];
+
+    var engineServiceTable = $("#engineServicesTable");
+
+    for ( var h in headers) {
+        var td = engineServiceTable.find("#" + tableId + "_" + headers[h]);
+        if (td.html() !== data[h]) {
+            engineServiceTable.find("#" + tableId + "_" + headers[h]).html(data[h]);
+        }
+    }
+};
+
+export { createEngineServiceTable, setEngineServiceData };
\ No newline at end of file
diff --git a/gui-pdp-monitoring/src/webapp/js/PdpListView.js b/gui-pdp-monitoring/src/webapp/js/PdpListView.js
new file mode 100644
index 0000000..1457a9e
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/PdpListView.js
@@ -0,0 +1,75 @@
+/*-
+ * ============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=========================================================
+ */
+
+function RenderPdpList(treeArr, className) {
+    var $ = treeArr,
+        root = document.createDocumentFragment(),
+        childLevel = 0
+        var index=''
+        var isNode=false
+    function insertChildren(parentNode, traverseArr, subGroup) {
+
+        for(let i = 0; i < traverseArr.length; i++) {
+            if(parentNode === root) {
+                childLevel = 0
+            }
+            var currentLi = document.createElement('li')
+            currentLi.setAttribute('level', childLevel)
+            if(traverseArr[i].children && traverseArr[i].children.length > 0) {
+                var title = document.createElement('div')
+                var triangle = document.createElement('i')
+                var text = document.createElement('p')
+                currentLi.classList.add('parentNode')
+                title.classList.add('title')
+                triangle.classList.add('triangle')
+                text.innerText = traverseArr[i].title
+                title.appendChild(triangle)
+                title.appendChild(text)
+                currentLi.appendChild(title)
+                childLevel++
+                if(isNode) index=""
+                if(subGroup !== null){
+                    index+= subGroup+"/"
+                }
+                insertChildren(currentLi, traverseArr[i].children, traverseArr[i].title)
+            }else {
+                var a = document.createElement('a')
+                a.setAttribute('href',"#"+index+subGroup+"/"+traverseArr[i].title)
+                a.classList.add('pdps__link')
+                a.textContent= traverseArr[i].title
+                currentLi.appendChild(a)
+                isNode=true
+            }
+            parentNode.appendChild(currentLi)
+        }
+    }
+    insertChildren(root, $, null)
+    document.querySelector('ul.' + className + '').appendChild(root)
+}
+
+function highlightSelected (id){
+    const resultsArr = Array.from(document.querySelectorAll('.pdps__link'));
+    resultsArr.forEach(el => {
+        el.classList.remove('pdps__link--active');
+    });
+    document.querySelector(`.pdps__link[href*="${id}"]`).classList.add('pdps__link--active');
+};
+
+export { RenderPdpList, highlightSelected, };
\ No newline at end of file
diff --git a/gui-pdp-monitoring/src/webapp/js/PdpStatisticsSummary.js b/gui-pdp-monitoring/src/webapp/js/PdpStatisticsSummary.js
new file mode 100644
index 0000000..4060c05
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/PdpStatisticsSummary.js
@@ -0,0 +1,142 @@
+/*-
+ * ============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 { config } from "./MonitoringConfig";
+import { createEngineTable } from "./MonitoringTable";
+import { createChart, updateChart } from "./MonitoringChart";
+import { papUtilsRemoveElement } from "./MonitoringUtils";
+
+/*
+ * Create the Engine Service Table
+ */
+function createEngineSummaryTable() {
+    var tableId = config.engineSummary.tableId;
+    var headers = config.engineSummary.headers;
+
+    // Create a wrapper div for both the table and the charts
+    var wrapper = document.createElement("div");
+    wrapper.setAttribute("id", "engineSummary_wrapper");
+    wrapper.setAttribute("class", "wrapper_borderless");
+    $("." + config.engineSummary.parent).append(wrapper);
+
+    var table = createEngineTable($(wrapper), tableId, headers.map(function(a) {
+        return a.title;
+    }));
+    var tableRow = document.createElement("tr");
+    var tableData = "";
+    for ( var h in headers) {
+        tableData += "<td id=" + tableId + "_" + headers[h].id + "></td>";
+    }
+    tableRow.innerHTML = tableData;
+
+    $(table).children("#engineTableBody").append(tableRow);
+
+}
+
+function setEngineSummaryData(data, timeStamp, policyDeployCount, policyDeploySuccessCount, policyDeployFailCount, policyExecutedCount, policyExecutedSuccessCount, policyExecutedFailCount) {
+    _setEngineSummaryData(timeStamp, getAvgPolicyDuration(data), policyDeployCount, policyDeploySuccessCount, policyDeployFailCount, policyExecutedCount, policyExecutedSuccessCount, policyExecutedFailCount, getUptimeOfOldestEngine(data));
+}
+
+/*
+ * Check for any changes in the Engine Summary Table data and update only where
+ * necessary
+ */
+function _setEngineSummaryData(timestamp, avgPolicyDuration, policyDeployCount, policyDeploySuccessCount, policyDeployFailCount, policyExecutedCount, policyExecutedSuccessCount, policyExecutedFailCount, upTime) {
+
+    var tableId = config.engineSummary.tableId;
+    var headers = config.engineSummary.headers.map(function(a) {
+        return a.id;
+    });
+    var data = [ timestamp, policyDeployCount, policyDeploySuccessCount, policyDeployFailCount, policyExecutedCount, policyExecutedSuccessCount, policyExecutedFailCount ,upTime == -1? "N/A":upTime];
+
+    var engineSummaryTable = $("#engineSummaryTable");
+
+    for ( var h in headers) {
+        var td = engineSummaryTable.find("#" + tableId + "_" + headers[h]);
+        if (td.html() !== data[h]) {
+            engineSummaryTable.find("#" + tableId + "_" + headers[h]).html(data[h]);
+        }
+    }
+
+    // Update charts
+    var wrapper = engineSummaryTable.parent();
+    var chartConfig = config.engineSummary.chart.avgPolicyDurationChart;
+    var avgPolicyDurationChart = wrapper.find("#" + chartConfig.parent)[0];
+    if (avgPolicyDuration.length) {
+        if (avgPolicyDurationChart) {
+            updateChart(avgPolicyDurationChart, avgPolicyDuration, chartConfig.nodeColour);
+        } else {
+            var avgPolicyDurationDiv = document.createElement("div");
+            avgPolicyDurationDiv.setAttribute("id", chartConfig.parent);
+            avgPolicyDurationDiv.setAttribute("class", "papChart_inline");
+            createChart(avgPolicyDuration, avgPolicyDurationDiv, chartConfig.title, chartConfig.unit,
+                    chartConfig.lineStroke, chartConfig.nodeColour);
+            $(wrapper).append(avgPolicyDurationDiv);
+        }
+    } else if (avgPolicyDurationChart){
+        papUtilsRemoveElement(chartConfig.parent);
+    }
+}
+
+function getUptimeOfOldestEngine(data) {
+    var oldestUpTime = -1;
+    for ( var d in data) {
+        if (data[d].upTime > oldestUpTime) {
+            oldestUpTime = data[d].upTime;
+        }
+    }
+    return oldestUpTime;
+}
+
+function getSumOfPolicyExecutions(data) {
+    var totalPolicyExecutions = 0;
+    for ( var d in data) {
+        totalPolicyExecutions += data[d].policyExecutions;
+    }
+    return totalPolicyExecutions;
+}
+
+function getAvgPolicyDuration(data) {
+    var chartData = [];
+    var avgPolicyDurations = [];
+    for ( var d in data) {
+        var avgPolicyDuration = JSON.parse(data[d].averagePolicyDuration);
+        avgPolicyDurations.push(avgPolicyDuration);
+    }
+
+    if (avgPolicyDurations.length > 0) {
+        chartData = avgPolicyDurations[0];
+        for (var i = 1; i < avgPolicyDurations.length; i++) {
+            var engineData = avgPolicyDurations[i];
+            for ( var c in chartData) {
+                chartData[c].value += engineData[c].value;
+            }
+        }
+    }
+
+    for ( var c2 in chartData) {
+        chartData[c2].value = Math.round(chartData[c2].value / data.length);
+    }
+
+    return chartData;
+}
+
+export { createEngineSummaryTable, setEngineSummaryData, };
\ No newline at end of file
diff --git a/gui-pdp-monitoring/src/webapp/js/__test__/MonitoringUtils.test.js b/gui-pdp-monitoring/src/webapp/js/__test__/MonitoringUtils.test.js
new file mode 100644
index 0000000..45fae79
--- /dev/null
+++ b/gui-pdp-monitoring/src/webapp/js/__test__/MonitoringUtils.test.js
@@ -0,0 +1,19 @@
+import $ from 'jquery';
+import { ajax_get, ajax_get_statistics } from "../MonitoringUtils";
+
+$.ajax = jest.fn().mockImplementation(() => {
+    const fakeResponse = {
+        data: {
+            id: 1,
+            name: "All",
+            value: "Dummy Data"
+        }
+    };
+    return Promise.resolve(fakeResponse);
+});
+
+test('ajax_get return ok', () => {
+    ajax_get().then(response => {
+        expect(response.data.id).toBe(1);
+    });
+});
\ No newline at end of file