Layout and icon color fixes

NASA-AMMOS · Apr 9, 2024 · 5ec317e · 5ec317e
1 parent e897108
commit 5ec317e
Show file tree

Hide file tree

Showing 16 changed files with 86 additions and 56 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
@@ -281,12 +281,7 @@ public void runGroovyTest() {
 			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);

diff --git a/cws-ui/src/main/webapp/css/dashboard.css b/cws-ui/src/main/webapp/css/dashboard.css
@@ -425,12 +425,11 @@ a.nav-link img {
 }
 
 .main-content {
-  margin-top: 12px;
   margin-left: 12px;
-  margin-top: 13px;
+  margin-top: 50px;
   position: absolute;
-  left: 75px;
-  width: calc(100% - 100px);
+  left: 125px;
+  width: calc(100% - 155px);
 }
 
 :target {

diff --git a/cws-ui/src/main/webapp/images/checklist_light.svg b/cws-ui/src/main/webapp/images/checklist_light.svg
diff --git a/cws-ui/src/main/webapp/images/save_light.svg b/cws-ui/src/main/webapp/images/save_light.svg
diff --git a/cws-ui/src/main/webapp/images/trash_red.svg b/cws-ui/src/main/webapp/images/trash_red.svg
diff --git a/cws-ui/src/main/webapp/images/waterfall_light.svg b/cws-ui/src/main/webapp/images/waterfall_light.svg
diff --git a/install/cws-ui/configuration.ftl b/install/cws-ui/configuration.ftl
@@ -5,6 +5,7 @@
 	<script src="/${base}/js/jquery.min.js"></script>
 	<script src="/${base}/js/bootstrap.min.js"></script>
 	<script src="/${base}/js/bootstrap-datepicker.min.js"></script>
+	<script src="/${base}/js/popper.min.js"></script>
 	<link href="/${base}/css/bootstrap.min.css" rel="stylesheet">
 	<!-- Custom styles for this template -->
 	<link href="/${base}/css/dashboard.css" rel="stylesheet">

diff --git a/install/cws-ui/deployments.ftl b/install/cws-ui/deployments.ftl
@@ -410,19 +410,19 @@
 								var returnVal = `<div class="proc-name-btns">`;
 								if (data.suspended == "true") {
 									returnVal += `<a id="btn-suspend-` + data.key + `" data-proc-id="` + data.key + `" onClick="resumeProcDef('` + data.id + `', '` + data.key + `')" aria-label="Resume" data-microtip-position="top-right" role="tooltip">`
-											+ `<img height="16" width="16" src="/${base}/images/play.svg" style="cursor: pointer; float: right; color: green;" id="suspend-`
+											+ `<img height="22" width="22" src="/${base}/images/play.svg" style="cursor: pointer; float: right; color: green;" id="suspend-`
 											+ data.key + `" />`
 											+ `</a>`;
 								} else {
 									returnVal += `<a id="btn-suspend-` + data.key + `" data-proc-id="` + data.key + `" onClick="suspendProcDef('` + data.id + `', '` + data.key + `')" aria-label="Suspend" data-microtip-position="top-right" role="tooltip">`
-											+ `<img height="16" width="16" src="/${base}/images/pin_pause.svg" style="cursor: pointer; float: right; color: #d9534f;" id="suspend-`
+											+ `<img height="22" width="22" src="/${base}/images/pin_pause.svg" style="cursor: pointer; float: right; color: #d9534f;" id="suspend-`
 											+ data.key + `" /></a>`;
 								}
 
 								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 + `"><img height="16" width="16" src="/${base}/images/pen.svg" /></span></a>`
+										+ `<span style="float: right;" id="edit-` + data.key + `"><img height="22" width="22" 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-`
+										+ `<img height="22" width="22" src="/${base}/images/trash_red.svg" style="cursor: pointer; float: right; color: #d9534f;" id="delete-`
 										+ data.key + `" /></a>`;
 
 								returnVal += `</div>`;

diff --git a/install/cws-ui/documentation.ftl b/install/cws-ui/documentation.ftl
@@ -5,6 +5,7 @@
 	<script src="/${base}/js/jquery.min.js"></script>
 	<script src="/${base}/js/bootstrap.min.js"></script>
 	<script src="/${base}/js/bootstrap-datepicker.min.js"></script>
+	<script src="/${base}/js/popper.min.js"></script>
 	<link href="/${base}/css/bootstrap.min.css" rel="stylesheet">
 	<!-- Custom styles for this template -->
 	<link href="/${base}/css/dashboard.css" rel="stylesheet">

diff --git a/install/cws-ui/initiators-table.ftl b/install/cws-ui/initiators-table.ftl
@@ -19,9 +19,9 @@
 					<td>
 						<!--<img id="disable_${x.initiatorId}_icon"  src="/${base}/images/pause.20.png" onClick="setEnabled('${x.initiatorId}', false);" style="display: none;" />
 						<img id="enable_${x.initiatorId}_icon"  src="/${base}/images/play.20.png" onClick="setEnabled('${x.initiatorId}', true);" style="display: none;" />-->
-						<div class="slide-switch">
-							<input id="toggle_${x.initiatorId}" type="checkbox" onClick="setEnabled('${x.initiatorId}');" />
-							<label for="toggle_${x.initiatorId}"><span>Power</span></label>
+						<div class="form-check form-switch">
+						  <input class="form-check-input" type="checkbox" role="switch" id="toggle_${x.initiatorId}" onClick="setEnabled('${x.initiatorId}');">
+						  <label class="form-check-label" for="toggle_${x.initiatorId}">Power</label>
 						</div>
 					</td>
 				</tr>

diff --git a/install/cws-ui/initiators.ftl b/install/cws-ui/initiators.ftl
@@ -8,9 +8,9 @@
 	<script src="/${base}/js/jquery.migrate.js"></script>
 	<script src="/${base}/js/ace/ace.js"></script>
 	<link href="/${base}/css/bootstrap.min.css" rel="stylesheet">
-	<!-- Custom styles for this template -->
 	<link href="/${base}/css/dashboard.css" rel="stylesheet">
 	<script src="/${base}/js/bootstrap.min.js"></script>
+	<script src="/${base}/js/popper.min.js"></script>
 
 	<style type="text/css">
 	#save-table td:nth-child(2){
@@ -74,9 +74,9 @@
 							<td><input id="saveXmlBtn" type="button" class="btn btn-primary" value="Save the XML file"/></td>
 							<td>
 								<label>Enable All</label>
-								<div class="slide-switch" id="active-all">
-									<input id="activate-all-inits" type="checkbox">
-									<label for="activate-all-inits"><span>Power</span></label>
+								<div class="form-check form-switch">
+								  <input class="form-check-input" type="checkbox" role="switch" id="activate-all-inits">
+								  <label class="form-check-label" for="activate-all-inits">Power</label>
 								</div>
 							</td>
 						</tr>

diff --git a/install/cws-ui/logs.ftl b/install/cws-ui/logs.ftl
@@ -14,6 +14,7 @@
 	<script src="/${base}/js/moment-timezone.js"></script>
 	<script src="/${base}/js/moment-timezone-with-data.js"></script>
 	<script src="/${base}/js/bootstrap.min.js"></script>
+	<script src="/${base}/js/popper.min.js"></script>
 	<script src="/${base}/js/DataTables/datatables.js"></script>
     <script src="/${base}/js/DataTablesDateFilter.js"></script>
 	<script src="/${base}/js/bootstrap-datepicker.min.js"></script>

diff --git a/install/cws-ui/processes.ftl b/install/cws-ui/processes.ftl
@@ -6,9 +6,9 @@
     <meta charset="utf-8">
     <title>CWS - Processes</title>
     <script src="/${base}/js/jquery.min.js"></script>
-    <script src="/${base}/js/popper.min.js"></script>
     <script src="/${base}/js/bootstrap.min.js"></script>
     <script src="/${base}/js/moment.js"></script>
+    <script src="/${base}/js/popper.min.js"></script>
     <script src="/${base}/js/DataTables/datatables.js"></script>
     <script src="/${base}/js/bootstrap-datepicker.min.js"></script>
     <script src="/${base}/js/DataTablesDateFilter.js"></script>
@@ -57,46 +57,47 @@
                         <div id="filters-div">
                             <h4 style="margin-top: 10px;">Filters:</h4>
                             <p>Select filters before retrieving data to reduce loading time.</p>
-                            <div class="col-md-4">
-                                <h4>Process Definition:</h4>
-                                <select id="pd-select">
-                                    <option value="def">Select PD</option>
-                                    <#list procDefs as pd>
-                                        <option value="${pd.key}">${pd.name}</option>
-                                    </#list>
-                                </select>
+                            <div style="display: flex; gap: 20px;">
                                 <div>
-                                    <h4 style="margin-top: 15px;">Subprocess & Superprocess:</h4>
+                                    <h4>Process Definition:</h4>
+                                    <select id="pd-select">
+                                        <option value="def">Select PD</option>
+                                        <#list procDefs as pd>
+                                            <option value="${pd.key}">${pd.name}</option>
+                                        </#list>
+                                    </select>
+                                </div>
+                                <div style="width: 200px;">
+                                    <h4>Subprocess & Superprocess:</h4>
                                     <input id="super-proc-inst-id-in" style="width: 90%" type="text"
                                         class="form-control" placeholder="Superprocess Instance ID" />
-                                </div>
-                                <div style="margin-top: 10px" id="hide-subprocs-div">
+                                    <div style="margin-top: 10px" id="hide-subprocs-div">
                                     <label for="hide-subprocs">Hide Subprocesses</label>
                                     <input name="hide-subprocs" id="hide-subprocs-btn" type="checkbox">
                                 </div>
-                            </div>
-                            <div class="col-md-4">
-                                <h4>Status:</h4>
-                                <div id="status-select">
-                                    <input id="fail" type="checkbox" value="fail" />
-                                    <label for="fail">Failed</label><br />
-                                    <input id="complete" type="checkbox" value="complete" />
-                                    <label for="complete">Complete</label><br />
-                                    <input id="resolved" type="checkbox" value="resolved" />
-                                    <label for="resolved">Resolved</label><br />
-                                    <input id="running" type="checkbox" value="running" />
-                                    <label for="running">Running</label><br />
-                                    <input id="pending" type="checkbox" value="pending" />
-                                    <label for="pending">Pending</label><br />
-                                    <input id="disabled" type="checkbox" value="disabled" />
-                                    <label for="disabled">Disabled</label><br />
-                                    <input id="failedToStart" type="checkbox" value="failedToStart" />
-                                    <label for="failedToStart">Failed to Start</label><br />
-                                    <input id="incident" type="checkbox" value="incident" />
-                                    <label for="incident">Incident</label><br />
                                 </div>
-                            </div>
-                            <div class="col-md-4">
+
+                                <div>
+                                    <h4>Status:</h4>
+                                    <div id="status-select">
+                                        <input id="fail" type="checkbox" value="fail" />
+                                        <label for="fail">Failed</label><br />
+                                        <input id="complete" type="checkbox" value="complete" />
+                                        <label for="complete">Complete</label><br />
+                                        <input id="resolved" type="checkbox" value="resolved" />
+                                        <label for="resolved">Resolved</label><br />
+                                        <input id="running" type="checkbox" value="running" />
+                                        <label for="running">Running</label><br />
+                                        <input id="pending" type="checkbox" value="pending" />
+                                        <label for="pending">Pending</label><br />
+                                        <input id="disabled" type="checkbox" value="disabled" />
+                                        <label for="disabled">Disabled</label><br />
+                                        <input id="failedToStart" type="checkbox" value="failedToStart" />
+                                        <label for="failedToStart">Failed to Start</label><br />
+                                        <input id="incident" type="checkbox" value="incident" />
+                                        <label for="incident">Incident</label><br />
+                                    </div>
+                                </div>
                                 <div id="datepicker-div">
                                     <h4>Created Date:</h4>
                                     <input id="min-date" class="form-control" data-date-format="yyyy-mm-dd" type="text"
@@ -113,7 +114,7 @@
                                 </div>
                             </div>
                             <br />
-                            <div class="col-md-12">
+                            <div style="display: flex; gap: 10px; align-items: baseline;">
                                 <input type="button" id="filter-submit-btn" class="btn btn-info pull-right"
                                     value="Filter" />
                                 <h5 class="pull-right" style="margin-right: 8px;">Matched Processes: <span

diff --git a/install/cws-ui/snippets.ftl b/install/cws-ui/snippets.ftl
@@ -6,8 +6,11 @@
 	<title>CWS - Executable Code</title>
 	<script src="/${base}/js/jquery.min.js"></script>
 	<script src="/${base}/js/bootstrap.min.js"></script>
+	<script src="/${base}/js/popper.min.js"></script>
+
 	<link href="/${base}/css/bootstrap.min.css" rel="stylesheet">
 	<link href="/${base}/css/bootstrap-reboot.min.css" rel="stylesheet">
+
 	<!-- Custom styles for this template -->
 	<link href="/${base}/css/dashboard.css" rel="stylesheet">
 

diff --git a/install/cws-ui/summary.ftl b/install/cws-ui/summary.ftl
@@ -3,6 +3,7 @@
 	<meta charset="utf-8">
 	<title>CWS - Dashboard</title>
 	<script src="/${base}/js/jquery.min.js"></script>
+	<script src="/${base}/js/popper.min.js"></script>
 	<link href="/${base}/css/bootstrap.min.css" rel="stylesheet">
 	<!-- Custom styles for this template -->
 	<link href="/${base}/css/dashboard.css" rel="stylesheet">

diff --git a/install/cws-ui/workers.ftl b/install/cws-ui/workers.ftl
@@ -5,6 +5,7 @@
 	<script src="/${base}/js/jquery.min.js"></script>
 	<link href="/${base}/css/bootstrap.min.css" rel="stylesheet">
 	<script src="/${base}/js/adaptation-workers.js"></script>
+	<script src="/${base}/js/popper.min.js"></script>
 	<script src="/${base}/js/DataTables/datatables.min.js"></script>
 	<link rel="stylesheet" href="/${base}/js/DataTables/datatables.min.css" />
 	<script src="/${base}/js/cws.js"></script>