Status indicator and polling (#181)

* Minor fixes

* Moved main padding into content

* Fix Tests

* Add status bar to Subscription page

* Add status bar and status check to ei info page

* Various changes to make status bar and polling work in subscription, testrules and info page

* Back end select width adjusted

* Fix button disable

* Fix

* Minor fix

Author: Christoffer-Cortes

src/functionaltest/java/com/ericsson/ei/frontend/TestAlarm.java

@@ -7,6 +7,7 @@
 import org.apache.http.impl.client.CloseableHttpClient;
 import org.junit.Test;
 import org.openqa.selenium.By;
+import org.openqa.selenium.JavascriptExecutor;
 import org.springframework.boot.test.mock.mockito.MockBean;
 
 import com.ericsson.ei.frontend.pageobjects.IndexPage;
@@ -20,13 +21,16 @@ public class TestAlarm extends SeleniumBaseClass {
     @Test
     public void testAlarm() throws IOException {
         initBaseMocks(mockedHttpClient);
+        JavascriptExecutor js = (JavascriptExecutor) driver;
 
         //Load index page
         IndexPage indexPageObject = new IndexPage(null, driver, baseUrl);
         indexPageObject.loadPage();
 
         //Generate exception
         TestRulesPage testRulesPage = indexPageObject.clickTestRulesPage();
+        //Enable buttons
+        js.executeScript("$('button.btn').prop(\"disabled\", false);");
         testRulesPage.clickRemoveRuleNumber(0);
         testRulesPage.clickRemoveEventNumber(0);
 

src/functionaltest/java/com/ericsson/ei/frontend/TestRulesFunctionality.java

@@ -16,6 +16,7 @@
 import org.junit.Test;
 import org.mockserver.client.MockServerClient;
 import org.mockserver.integration.ClientAndServer;
+import org.openqa.selenium.JavascriptExecutor;
 import org.openqa.selenium.support.ui.WebDriverWait;
 import org.springframework.boot.test.mock.mockito.MockBean;
 
@@ -51,6 +52,7 @@ public void testJourneyToFindAggregatedObjectButton() throws Exception {
         int portServer = mockServer.getLocalPort();
         backEndInstancesUtils.setDefaultBackEndInstanceToNull();
         backEndInstancesUtils.setDefaultBackEndInstance("new_instance_default", "localhost", portServer, "", true);
+        JavascriptExecutor js = (JavascriptExecutor) driver;
 
         // Open indexpage and verify that it is opened
         IndexPage indexPageObject = new IndexPage(null, driver, baseUrl);
@@ -60,6 +62,9 @@ public void testJourneyToFindAggregatedObjectButton() throws Exception {
         TestRulesPage testRulesPage = indexPageObject.clickTestRulesPage();
         assert(new WebDriverWait(driver, 10).until((webdriver) -> testRulesPage.presenceOfTestRulesHeader()));
 
+        //Enable buttons
+        js.executeScript("$('button.btn').prop(\"disabled\", false);");
+
         // Verify that "download rules template" button works
         String downloadedRulesTemplate = "";
         String mockedResponse = getJSONStringFromFile(RULES_TEMPLATE_FILE_PATH);

src/functionaltest/java/com/ericsson/ei/frontend/pageobjects/TestRulesPage.java

@@ -100,7 +100,12 @@ public void clickAddRuleButton() {
 
     public void clickRemoveRuleNumber(int number) {
         new WebDriverWait(driver, TIMEOUT_TIMER).until(ExpectedConditions.presenceOfElementLocated(By.id("Rule" + number)));
-        WebElement removeRuleButton = driver.findElement(By.id("Rule" + number)).findElement(By.className("fa-trash"));
+        WebElement removeRuleButton = driver.findElement(By.id("Rule" + number)).findElement(By.className("remove-item"));
+
+        // We need the following two lines in order to be sure that the remove event button is not obscured...
+        JavascriptExecutor jse2 = driver;
+        jse2.executeScript("arguments[0].scrollIntoView()", removeRuleButton);
+
         removeRuleButton.click();
     }
 
@@ -112,7 +117,7 @@ public void clickAddEventButton() {
 
     public void clickRemoveEventNumber(int number) {
         new WebDriverWait(driver, TIMEOUT_TIMER).until(ExpectedConditions.presenceOfElementLocated(By.id("Events" + number)));
-        WebElement removeEventButton = driver.findElement(By.id("Events" + number)).findElement(By.className("fa-trash"));
+        WebElement removeEventButton = driver.findElement(By.id("Events" + number)).findElement(By.className("remove-item"));
 
         // We need the following two lines in order to be sure that the remove event button is not obscured...
         JavascriptExecutor jse2 = driver;

src/main/resources/static/css/style.css

@@ -1,5 +1,12 @@
-.content-wrapper {
-    height: 100%;
+.content {
+    padding: 10px;
+}
+.subscription-alert {
+    width: 100%;
+    padding: 2px;
+    margin-bottom: 0;
+    border-radius:0px;
+    text-align: center;
 }
 #table {
     border-spacing: 0px;
@@ -31,8 +38,8 @@
 .display-inline-table {
     display: inline-table;
 }
-.split {
-    max-width: 50%;
+.white-space-normal {
+    white-space: normal;
 }
 .table-responsive>.table-bordered {
     border: 1px solid #dee2e6;
@@ -55,21 +62,6 @@
     width: 30%;
 }
 /* Information page stop */
-.testRulePage {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, .5);
-    z-index: 999;
-    vertical-align: middle;
-    text-align: center;
-    color: white;
-    font-size: 25px;
-    font-weight: bold;
-    text-shadow: 1px 1px #525252;
-}
 .flexbox {
     display:flex;
     justify-content:center;
@@ -220,6 +212,13 @@ button.rules_info:focus {
     outline:0;
     outline:none;
 }
+button.remove-item {
+    padding: 0 2px 0 2px;
+}
+.text-area {
+    width: 100%;
+    padding-right: 5px;
+}
 #infoContent{
     font-family: Calibri;
 }
@@ -239,6 +238,9 @@ table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:b
     border: none;
     box-shadow: 0 0 0 transparent;
 }
+table.dataTable.dtr-inline.collapsed > tbody > tr > td > .dtr-details > li {
+    word-break: break-word;
+}
 @media (max-width: 576px) {
     .container {
         max-width: 480px;

src/main/resources/static/css/ui.css

@@ -29,7 +29,6 @@ body {
 .main {
     height: calc(100vh - 55px);
     overflow-x: hidden;
-    padding: 10px;
     margin-left: 200px;
     transition: all 1ms;
 }
@@ -49,7 +48,7 @@ body {
 }
 .app-header .header-bar {
     visibility: visible;
-    max-width: 600px;
+    max-width: 50%;
     min-width: 10%;
     outline: 0;
 }
@@ -84,6 +83,7 @@ body {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    word-break: break-word;
     padding: 10px 5px 10px 10px;
     font-size: 80%;
     cursor: pointer;
@@ -402,6 +402,9 @@ body {
 }
 
 @media (max-width: 767.98px) {
+    .app-header .header-bar {
+        max-width: 100%;
+    }
     .app-body .sidebar {
         margin-left: -200px;
     }

src/main/resources/static/js/common.js

@@ -1,5 +1,129 @@
+var router = new Navigo(null, true, '#');
 var frontendServiceUrl = $('#frontendServiceUrl').text();
+var frontendServiceBackEndPath = "/backend";
+var timerInterval;
 
+// Start ## Routing ##
+var routes = {};
+routes["subscriptions"] = function () {
+    updateBackEndInstanceList();
+    $(".app-header").removeClass("header-bar-hidden");
+    $(".main").load("subscriptionpage.html");
+};
+routes["test-rules"] = function () {
+    updateBackEndInstanceList();
+    $(".app-header").removeClass("header-bar-hidden");
+    $(".main").load("testRules.html");
+};
+routes["ei-info"] = function () {
+    updateBackEndInstanceList();
+    $(".app-header").removeClass("header-bar-hidden");
+    $(".main").load("eiInfo.html");
+};
+routes["switch-backend"] = function () {
+    $(".app-header").addClass("header-bar-hidden");
+    $(".main").load("switch-backend.html");
+};
+routes["add-backend"] = function () {
+    $(".app-header").addClass("header-bar-hidden");
+    $(".main").load("add-instances.html");
+};
+routes["login"] = function () {
+    updateBackEndInstanceList();
+    $(".app-header").removeClass("header-bar-hidden");
+    $(".main").load("login.html");
+};
+
+router.on({
+    'subscriptions': routes["subscriptions"],
+    'test-rules': routes["test-rules"],
+    'ei-info': routes["ei-info"],
+    'switch-backend': routes["switch-backend"],
+    'add-backend': routes["add-backend"],
+    'login': routes["login"],
+    '*': function () {
+        router.navigate('subscriptions');
+    }
+}).resolve();
+
+function reloadRoute() {
+    const currentUrl = router._lastRouteResolved.url;
+    routes[currentUrl]();
+}
+
+function navigateRoute(route) {
+    router.navigate(route);
+}
+// End ## Routing ##
+
+// Start ## Load Back end list ##
+function updateBackEndInstanceList() {
+    $.ajax({
+        url: frontendServiceUrl + frontendServiceBackEndPath,
+        type: "GET",
+        contentType: 'application/json; charset=utf-8',
+        cache: false,
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
+            window.logMessages("Failure when trying to load backend instances");
+        },
+        success: function (responseData, XMLHttpRequest, textStatus) {
+            var observableObject = $("#selectInstances")[0];
+            ko.cleanNode(observableObject);
+            ko.applyBindings(new viewModel(responseData), observableObject);
+        }
+    });
+}
+
+function singleInstanceModel(name, host, port, contextPath, https, active) {
+    this.name = ko.observable(name),
+        this.host = ko.observable(host),
+        this.port = ko.observable(port),
+        this.contextPath = ko.observable(contextPath),
+        this.https = ko.observable(https),
+        this.active = ko.observable(active),
+        this.information = name.toUpperCase() + " - " + host + " " + port + "/" + contextPath;
+}
+
+function viewModel(data) {
+    var self = this;
+    var currentName;
+    self.instances = ko.observableArray();
+    var json = JSON.parse(ko.toJSON(data));
+    var oldSelectedActive = self.selectedActive;
+    for (var i = 0; i < json.length; i++) {
+        var obj = json[i];
+        var instance = new singleInstanceModel(obj.name, obj.host, obj.port, obj.contextPath, obj.https, obj.active);
+        self.instances.push(instance);
+        if (obj.active == true) {
+            currentName = obj.name;
+        }
+    }
+    self.selectedActive = ko.observable(currentName);
+    self.onChange = function () {
+        if (typeof self.selectedActive() !== "undefined") {
+            $.ajax({
+                url: frontendServiceUrl + frontendServiceBackEndPath,
+                type: "PUT",
+                data: self.selectedActive(),
+                contentType: 'application/json; charset=utf-8',
+                cache: false,
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    self.selectedActive = oldSelectedActive;
+                    updateBackEndInstanceList();
+                    window.logMessages(XMLHttpRequest.responseText);
+                },
+                success: function (responseData, XMLHttpRequest, textStatus) {
+                    reloadRoute();
+                }
+            });
+        } else {
+            $.jGrowl("Please choose backend instance", { sticky: false, theme: 'Error' });
+        }
+    }
+}
+// End ## Load Back end list ##
+
+// Start ## Login and Security ##
 function doIfUserLoggedIn(user) {
     localStorage.removeItem("currentUser");
     localStorage.setItem("currentUser", user);
@@ -60,4 +184,31 @@ function checkLoggedInUser() {
             doIfUserLoggedIn(user);
         }
     });
-}
+}
+// End ## Login and Security ##
+
+// Start ## Status Indicator ##
+var statusType = {
+    success: "alert-success",
+    info: "alert-info",
+    warning: "alert-warning",
+    danger: "alert-danger"
+};
+
+var statusText = {
+    backend_down: "<strong>Back end is down!</strong> Wait for it go up or switch to another back end before continuing!",
+    test_rules_disabled: "<strong>Test Rule service is disabled!</strong> To enable it set the backend property [testaggregated.enabled] as [true]"
+}
+
+function addStatusIndicator(statusType, statusText) {
+    var statusIndicator = $(".content")[0].previousElementSibling;
+    if (statusIndicator != null) {
+        $($(".content")[0].previousElementSibling).remove();
+    }
+    $(".content").before("<div class=\"subscription-alert alert " + statusType + "\">" + statusText + "</div>");
+}
+
+function removeStatusIndicator() {
+    $($(".content")[0].previousElementSibling).remove();
+}
+// End ## Status Indicator ##