More images added

NASA-AMMOS · Mar 26, 2024 · e5d94fa · e5d94fa
1 parent 0e0f540
commit e5d94fa
Show file tree

Hide file tree

Showing 17 changed files with 83 additions and 26 deletions.
diff --git a/cws-test/src/test/java/jpl/cws/test/integration/ui/WebTestIT.java b/cws-test/src/test/java/jpl/cws/test/integration/ui/WebTestIT.java
@@ -11,6 +11,8 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import org.openqa.selenium.JavascriptExecutor;
+
 /**
  *
  * @author ghollins
@@ -209,14 +211,27 @@ public void runHelloWorldTest() {
 
 			waitForElementXPath("//div[@id=\'processes-table_filter\']/label/input");
 
-			driver.findElement(By.xpath("//div[@id=\'processes-table_filter\']/label/input")).click();
+			WebElement filter = driver.findElement(By.xpath("//div[@id=\'processes-table_filter\']/label/input"));
+
+			JavascriptExecutor js = (JavascriptExecutor) driver;
+	  		js.executeScript("arguments[0].scrollIntoViewIfNeeded();", filter);
+	  		// filter.click();
+
 			driver.findElement(By.xpath("//div[@id=\'processes-table_filter\']/label/input")).sendKeys("test_hello_world");
 			driver.findElement(By.xpath("//div[@id=\'processes-table_filter\']/label/input")).sendKeys(Keys.ENTER);
 
 			waitForElementID("processes-table");
 
 			waitForElementXPath("//a[contains(text(),'History')]");
 			WebElement historyButton = driver.findElement(By.xpath("//a[contains(text(),'History')]"));
+			js.executeScript("arguments[0].scrollIntoViewIfNeeded();", historyButton);
+
+			try {
+			File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
+			// Now you can do whatever you need to do with it, for example copy somewhere
+			FileUtils.copyFile(scrFile, new File("/tmp/history_button.png"));
+			} catch(IOException e) {}
+
 			historyButton.click();
 			sleep(1000);
 
@@ -252,17 +267,36 @@ public void runGroovyTest() {
 
 			waitForElementXPath("//div[@id=\'processes-table_filter\']/label/input");
 
-			driver.findElement(By.xpath("//div[@id=\'processes-table_filter\']/label/input")).click();
+			WebElement filter = driver.findElement(By.xpath("//div[@id=\'processes-table_filter\']/label/input"));
+
+			JavascriptExecutor js = (JavascriptExecutor) driver;
+	  		js.executeScript("arguments[0].scrollIntoViewIfNeeded();", filter);
+
+			// filter.click();
 			driver.findElement(By.xpath("//div[@id=\'processes-table_filter\']/label/input")).sendKeys("test_groovy_script");
 			driver.findElement(By.xpath("//div[@id=\'processes-table_filter\']/label/input")).sendKeys(Keys.ENTER);
 
 			waitForElementID("processes-table");
 
 			waitForElementXPath("//a[contains(text(),'History')]");
 			WebElement historyButton = driver.findElement(By.xpath("//a[contains(text(),'History')]"));
+			js.executeScript("arguments[0].scrollIntoViewIfNeeded();", historyButton);
+
+			try {
+			File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
+			// Now you can do whatever you need to do with it, for example copy somewhere
+			FileUtils.copyFile(scrFile, new File("/tmp/groovy_button.png"));
+			} catch(IOException e) {}
 			historyButton.click();
+
 			sleep(1000);
 
+			try {
+			File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
+			// Now you can do whatever you need to do with it, for example copy somewhere
+			FileUtils.copyFile(scrFile, new File("/tmp/groovy.png"));
+			} catch(IOException e) {}
+
 			findOnPage("Groovy.");
 
 			sleep(9000);

diff --git a/cws-ui/src/main/webapp/css/dashboard.css b/cws-ui/src/main/webapp/css/dashboard.css
@@ -430,6 +430,7 @@ a.nav-link img {
   margin-top: 13px;
   position: absolute;
   left: 75px;
+  width: calc(100% - 100px);
 }
 
 :target {

diff --git a/cws-ui/src/main/webapp/images/check_green.svg b/cws-ui/src/main/webapp/images/check_green.svg
diff --git a/cws-ui/src/main/webapp/images/minus_red.svg b/cws-ui/src/main/webapp/images/minus_red.svg
diff --git a/cws-ui/src/main/webapp/images/pen.svg b/cws-ui/src/main/webapp/images/pen.svg
diff --git a/cws-ui/src/main/webapp/images/save.svg b/cws-ui/src/main/webapp/images/save.svg
diff --git a/cws-ui/src/main/webapp/images/waterfall.svg b/cws-ui/src/main/webapp/images/waterfall.svg
diff --git a/install/cws-ui/configuration.ftl b/install/cws-ui/configuration.ftl
@@ -179,7 +179,7 @@
 <div class="container-fluid">
 	<div class="row">
 		<#include "sidebar.ftl">
-		<div class="col-sm-9 col-md-10 main">
+		<div class="main-content">
 
 			<span id="statusMessageDiv">
 				<h2>${msg}</h2>

diff --git a/install/cws-ui/deployments.ftl b/install/cws-ui/deployments.ftl
@@ -420,7 +420,7 @@
 								}
 
 								returnVal += `<a href="/${base}/modeler?procDefKey=` + data.key + `" target="_blank" aria-label="Edit" data-microtip-position="top-right" role="tooltip">`
-										+ `<span style="float: right;" id="edit-` + data.key + `" class="glyphicon glyphicon-pencil"></span></a>`
+										+ `<span style="float: right;" id="edit-` + data.key + `"><img height="16" width="16" src="/${base}/images/pen.svg" /></span></a>`
 										+ `<a data-proc-key="` + data.key + `" onClick="handleDeleteProcDef('` + data.key + `')" aria-label="Delete" data-microtip-position="top-right" role="tooltip">`
 										+ `<img height="16" width="16" src="/${base}/images/trash.svg" style="cursor: pointer; float: right; color: #d9534f;" id="delete-`
 										+ data.key + `" /></a>`;
@@ -598,16 +598,14 @@
 						var procDefKey = this.data()["key"];
 						var procDefId = this.data()["id"];
 						if (status == "false") {
-							$("#suspend-" + procDefKey).removeClass("glyphicon-play");
-							$("#suspend-" + procDefKey).addClass("glyphicon-pause");
+							$("#suspend-" + procDefKey).attr("src", "/${base}/images/pin_pause.svg");
 							$("#suspend-" + procDefKey).css("color", "#d9534f");
 							$("#btn-suspend-" + procDefKey).attr("onclick", "suspendProcDef('" + procDefId + "', '" + procDefKey + "')");
 							$("#status-txt-" + procDefKey).html("Active");
 							$("#" + procDefKey).removeClass("disabled");
 							$("#pv-" + procDefKey).removeClass("disabled");
 						} else {
-							$("#suspend-" + procDefKey).removeClass("glyphicon-pause");
-							$("#suspend-" + procDefKey).addClass("glyphicon-play");
+							$("#suspend-" + procDefKey).attr("src", "/${base}/images/play.svg");
 							$("#suspend-" + procDefKey).css("color", "green");
 							$("#btn-suspend-" + procDefKey).attr("onclick", "resumeProcDef('" + procDefId + "', '" + procDefKey + "')");
 							$("#status-txt-" + procDefKey).html("Suspended");
@@ -749,8 +747,7 @@
 				success: function (data) {
 					console.log("successfully suspended");
 					//change the glyphicon to play & make green
-					$("#suspend-" + procDefKey).removeClass("glyphicon-pause");
-					$("#suspend-" + procDefKey).addClass("glyphicon-play");
+					$("#suspend-" + procDefKey).attr("src", "/${base}/images/play.svg");
 					$("#suspend-" + procDefKey).css("color", "green");
 					$("#btn-suspend-" + procDefKey).attr("onclick", "resumeProcDef('" + procDefId + "', '" + procDefKey + "')");
 					$("#status-txt-" + procDefKey).html("Suspended");
@@ -775,8 +772,7 @@
 				success: function (data) {
 					console.log("successfully activated");
 					//change the glyphicon to pause & make color #d9534f
-					$("#suspend-" + procDefKey).removeClass("glyphicon-play");
-					$("#suspend-" + procDefKey).addClass("glyphicon-pause");
+					$("#suspend-" + procDefKey).attr("src", "/${base}/images/pin_pause.svg");
 					$("#suspend-" + procDefKey).css("color", "#d9534f");
 					$("#btn-suspend-" + procDefKey).attr("onclick", "suspendProcDef('" + procDefId + "', '" + procDefKey + "')");
 					$("#status-txt-" + procDefKey).html("Active");

diff --git a/install/cws-ui/documentation.ftl b/install/cws-ui/documentation.ftl
@@ -57,7 +57,7 @@
 <div class="container-fluid">
 	<div class="row">
 		<#include "sidebar.ftl">
-		<div class="col-sm-9 col-md-10 main">
+		<div class="main-content">
 
 			<span id="statusMessageDiv">
 				<h2>${msg}</h2>

diff --git a/install/cws-ui/initiators.ftl b/install/cws-ui/initiators.ftl
@@ -56,7 +56,7 @@
 	<div class="row">
 		<#include "sidebar.ftl">
 
-		<div class="col-sm-9 col-md-10 main">
+		<div class="main-content">
 			<span id="statusMessageDiv"><h2>${msg}</h2></span>
 
 			<h2 class="sub-header">Initiators</h2>

diff --git a/install/cws-ui/logs.ftl b/install/cws-ui/logs.ftl
@@ -164,7 +164,7 @@
 		$("#logData").DataTable({
 			language: {
 				searchBuilder: {
-					add: "<i class=\"glyphicon glyphicon-search btn-icon\"></i>Add Local Filter",
+					add: "<img height=\"16\" width=\"16\" src=\"/${base}/images/search.svg\" /> Add Local Filter",
 				}
 			},
 			deferRender: true,
@@ -647,7 +647,7 @@
 <div class="container-fluid">
 	<div class="row">
 		<#include "sidebar.ftl">
-		<div class="col-sm-9 col-md-10 main">
+		<div class="main-content">
 
 			<span id="statusMessageDiv">
 				<h2>${msg}</h2>

diff --git a/install/cws-ui/processes.ftl b/install/cws-ui/processes.ftl
@@ -45,7 +45,7 @@
         <div class="container-fluid">
             <div class="row">
                 <#include "sidebar.ftl">
-                    <div class="col-sm-9 col-md-10 main">
+                    <div class="main-content">
 
                         <span id="statusMessageDiv">
                             <h2>${msg}</h2>
@@ -979,7 +979,7 @@
                 });
 
                 //add our action dropdown button to the div that datatables created (created in dom: above)
-                $('<div class="btn-group"><button id="menu3" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-tasks btn-icon"></i>&nbsp;Actions &nbsp;'
+                $('<div class="btn-group"><button id="menu3" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><img height="16" width="16" src="/${base}/images/waterfall.svg" />&nbsp;Actions &nbsp;'
                     + '<span class="caret"></span>'
                     + '</button>'
                     + '<ul id="action-list" class="dropdown-menu" role="menu" aria-labelledby="menu3">'

diff --git a/install/cws-ui/sidebar.ftl b/install/cws-ui/sidebar.ftl
@@ -22,7 +22,7 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstra
 		<li <#if springMacroRequestContext.requestUri?contains("/summary")> class="active"</#if>><a href="/${base}/summary">System Summary</a></li>
 ------>
 
-		<li <#if springMacroRequestContext.requestUri?contains("/deployments")> class="active"</#if>><a href="/${base}/deployments data-bs-toggle="tooltip" data-bs-title="Deployments"><img height="32" width="32" src="/${base}/images/locate.svg" /></a></li>
+		<li <#if springMacroRequestContext.requestUri?contains("/deployments")> class="active"</#if>><a href="/${base}/deployments" data-bs-toggle="tooltip" data-bs-title="Deployments"><img height="32" width="32" src="/${base}/images/locate.svg" /></a></li>
 		<li <#if springMacroRequestContext.requestUri?contains("/workers")> class="active"</#if>><a href="/${base}/workers" data-bs-toggle="tooltip" data-bs-title="Workers"><img height="32" width="32" src="/${base}/images/cpu.svg" /></a></li>
 		<li <#if springMacroRequestContext.requestUri?contains("/snippets")> class="active"</#if>><a href="/${base}/snippets" data-bs-toggle="tooltip" data-bs-title="Snippets"><img height="32" width="32" src="/${base}/images/snippet.svg" /></a></li>
 		<li <#if springMacroRequestContext.requestUri?contains("/initiators")> class="active"</#if>><a href="/${base}/initiators" data-bs-toggle="tooltip" data-bs-title="Initiators"><img height="32" width="32" src="/${base}/images/double_chevron_right.svg" /></a></li>

diff --git a/install/cws-ui/snippets.ftl b/install/cws-ui/snippets.ftl
@@ -37,7 +37,7 @@
 <div class="container-fluid">
 	<div class="row">
 		<#include "sidebar.ftl">
-		<div class="col-sm-9 col-md-10 main">
+		<div class="main-content">
 
 			<span id="statusMessageDiv">
 				<h2>${msg}</h2>

diff --git a/install/cws-ui/summary.ftl b/install/cws-ui/summary.ftl
@@ -10,10 +10,10 @@
 	
 		function refreshElasticsearchStats() {
 		
-			var greenHtml = 'Good <span class="glyphicon glyphicon-ok" style="color: #51cf66;"></span>';
-			var redHtml = '<span class="glyphicon glyphicon-remove" style="color: #ff6b6b;"></span> Red';
-			var offlineHtml = '<span class="glyphicon glyphicon-remove" style="color: #ff6b6b;"></span> Offline';
-			var timedOutHtml = '<span class="glyphicon glyphicon-remove" style="color: #ff6b6b;"></span> Timed out';
+			var greenHtml = 'Good <img height="16" width="16" src="/${base}/images/check_green.svg" /></span>';
+			var redHtml = '<img height="16" width="16" src="/${base}/images/minus_red.svg" /> Red';
+			var offlineHtml = '<img height="16" width="16" src="/${base}/images/minus_red.svg" /> Offline';
+			var timedOutHtml = '<img height="16" width="16" src="/${base}/images/minus_red.svg" />  Timed out';
 		
 			$.ajax({ 
 				url: "/${base}/rest/stats/es/cluster/health",
@@ -79,7 +79,7 @@
 
 		<#include "sidebar.ftl">
 
-		<div class="col-sm-9 col-md-10 main">
+		<div class="main-content">
 			<span id="statusMessageDiv"><h2>${msg}</h2></span>
 			<h2 class="sub-header">Deployment Summary: <a href="/${base}/deployments">${numTotalProcDefs} deployed, ${numActiveProcDefs} active</a></h2>
 			<br/>

diff --git a/install/cws-ui/workers.ftl b/install/cws-ui/workers.ftl
@@ -316,7 +316,7 @@
 	
 		<#include "sidebar.ftl">
 
-		<div class="col-sm-9 col-md-10 main">
+		<div class="main-content">
 
 			<span id="statusMessageDiv"><h2>${msg}</h2></span>