Result will show in modal instead of window popup (#92)

* Result will show in modal instead of window popup

* Width now more responsive

Author: Christoffer-Cortes

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

@@ -140,8 +140,8 @@ public void clickFindAggregatedObject(String findAggregatedObjectResponse) throw
     }
 
     public String getAggregatedResultData() {
-        new WebDriverWait(driver, TIMEOUT_TIMER).until(ExpectedConditions.presenceOfElementLocated(By.id("aggregatedresultData")));
-        WebElement aggregatedResultDataElement = driver.findElement(By.id("aggregatedresultData"));
+        new WebDriverWait(driver, TIMEOUT_TIMER).until(ExpectedConditions.presenceOfElementLocated(By.id("aggregatedObjectContent")));
+        WebElement aggregatedResultDataElement = driver.findElement(By.id("aggregatedObjectContent"));
         return aggregatedResultDataElement.getAttribute("textContent").replaceAll("[\\n ]", "");
     }
 }

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

@@ -75,11 +75,23 @@
 	white-space: nowrap;
 	border-radius: .25rem;
 }
-
+.modal-height-fit {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+}
+.modal-width-aggregated {
+    max-width: 750px;
+}
+.pre {
+    display: block;
+    font-family: monospace;
+    white-space: pre;
+    margin: 1em;
+    font-size: medium;
+}
 .showPasswordButton{
     margin-top: 10px;
 }
-
 /* Safari */
 @-webkit-keyframes spin {
     0% { -webkit-transform: rotate(0deg); }

src/main/resources/static/js/testrules.js

@@ -118,21 +118,14 @@ jQuery(document).ready(
             beforeSend : function() {
             },
             success : function(data, textStatus) {
-              var returnData = data;
-              if (returnData.length > 0) {
+              if (data.length > 0) {
                 $.jGrowl("Successfully aggregated object generated", {
                   sticky : false,
                   theme : 'Error'
                 });
 
-                $('#aggregatedresultData').text(JSON.stringify(data, null, 2));
-                var divText = document.getElementById("aggregatedresult").outerHTML;
-                var myWindow = window.open('', '', 'width=700,height=1000');
-                var doc = myWindow.document;
-                doc.open();
-                doc.write(divText);
-                doc.close();
-                myWindow.focus();
+                $('#aggregatedObjectContent').text(JSON.stringify(data, null, 2));
+                $('#aggregatedObjectModal').modal('show');
               }
             },
             error : function(XMLHttpRequest, textStatus, errorThrown) {

src/main/resources/templates/testRules.html

@@ -115,16 +115,23 @@ <h6>
             </div>
         </div>
     </div>
-    <div style="display: none">
-        <div id="aggregatedresult">
-            <h1>
-                <strong>
-                    <span style="color: #0000ff;">Aggregated Object</span>
-                </strong>
-            </h1>
-            <pre id="aggregatedresultData"></pre>
-        </div>
-    </div>
+    <div id="aggregatedObjectModal" class="modal fade" role="dialog">
+	  <div class="modal-dialog modal-width-aggregated" role="document">
+	    <div class="modal-content">
+	      <div class="modal-header">
+	        <h5 class="modal-title">Aggregated Object</h5>
+	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+	          <span aria-hidden="true">&times;</span>
+	        </button>
+	      </div>
+	      <div class="modal-body modal-height-fit">
+	        <p id="aggregatedObjectContent" class="pre"></p>
+	      </div>
+	      <div class="modal-footer">
+	        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+	      </div>
+	    </div>
+	  </div>
+	</div>
 </body>
-
 </html>