From 5ec317e512a487094daa98a052d31a14b4efe929 Mon Sep 17 00:00:00 2001
From: Joshua Rodriguez <Joshua.D.Rodriguez@jpl.nasa.gov>
Date: Tue, 9 Apr 2024 07:25:36 -0700
Subject: [PATCH] Layout and icon color fixes

---
 .../cws/test/integration/ui/WebTestIT.java    |  7 +-
 cws-ui/src/main/webapp/css/dashboard.css      |  7 +-
 .../main/webapp/images/checklist_light.svg    |  7 ++
 cws-ui/src/main/webapp/images/save_light.svg  |  5 ++
 cws-ui/src/main/webapp/images/trash_red.svg   |  4 ++
 .../main/webapp/images/waterfall_light.svg    | 11 +++
 install/cws-ui/configuration.ftl              |  1 +
 install/cws-ui/deployments.ftl                |  8 +--
 install/cws-ui/documentation.ftl              |  1 +
 install/cws-ui/initiators-table.ftl           |  6 +-
 install/cws-ui/initiators.ftl                 |  8 +--
 install/cws-ui/logs.ftl                       |  1 +
 install/cws-ui/processes.ftl                  | 71 ++++++++++---------
 install/cws-ui/snippets.ftl                   |  3 +
 install/cws-ui/summary.ftl                    |  1 +
 install/cws-ui/workers.ftl                    |  1 +
 16 files changed, 86 insertions(+), 56 deletions(-)
 create mode 100644 cws-ui/src/main/webapp/images/checklist_light.svg
 create mode 100644 cws-ui/src/main/webapp/images/save_light.svg
 create mode 100644 cws-ui/src/main/webapp/images/trash_red.svg
 create mode 100644 cws-ui/src/main/webapp/images/waterfall_light.svg

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
index a0214600..8cbb5953 100644
--- 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
index 3f7bbab6..0561ff32 100644
--- 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
new file mode 100644
index 00000000..5f18f05c
--- /dev/null
+++ b/cws-ui/src/main/webapp/images/checklist_light.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="15.5" y="14.5" width="15" height="13" rx="1.5" transform="rotate(180 15.5 14.5)" stroke="rgba(255,255,255,.5)"/>
+  <circle cx="4.5" cy="10.5" r="1.5" fill="rgba(255,255,255,.5)"/>
+  <line x1="8.5" y1="5.5" x2="12.5" y2="5.5" stroke="rgba(255,255,255,.5)" stroke-linecap="round"/>
+  <line x1="8.5" y1="10.5" x2="12.5" y2="10.5" stroke="rgba(255,255,255,.5)" stroke-linecap="round"/>
+  <path d="M3 5L4.5 6.5L7 4" stroke="rgba(255,255,255,.5)"/>
+</svg>
diff --git a/cws-ui/src/main/webapp/images/save_light.svg b/cws-ui/src/main/webapp/images/save_light.svg
new file mode 100644
index 00000000..0de2ce13
--- /dev/null
+++ b/cws-ui/src/main/webapp/images/save_light.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12.8562 4.92405L9.35624 1.15482C9.26099 1.05481 9.13302 0.999201 9 1.00001H3C2.73478 1.00001 2.48043 1.11347 2.29289 1.31543C2.10536 1.51739 2 1.79131 2 2.07693V13.9231C2 14.2087 2.10536 14.4826 2.29289 14.6846C2.48043 14.8865 2.73478 15 3 15H12C12.2652 15 12.5196 14.8865 12.7071 14.6846C12.8946 14.4826 13 14.2087 13 13.9231V5.3077C13.0007 5.16444 12.9491 5.02662 12.8562 4.92405ZM9.60624 10.2683L7.85625 12.1529C7.76068 12.2524 7.63294 12.308 7.5 12.308C7.36706 12.308 7.23932 12.2524 7.14375 12.1529L5.39375 10.2683C5.31402 10.1637 5.27327 10.0308 5.27944 9.89565C5.2856 9.76047 5.33824 9.63259 5.4271 9.53689C5.51597 9.44118 5.63472 9.3845 5.76024 9.37786C5.88577 9.37122 6.0091 9.4151 6.10625 9.50097L7 10.4702V7.46154C7 7.31873 7.05267 7.18178 7.14644 7.08079C7.24021 6.97981 7.36739 6.92308 7.5 6.92308C7.6326 6.92308 7.75978 6.97981 7.85355 7.08079C7.94732 7.18178 8 7.31873 8 7.46154V10.4702L8.89375 9.50097C8.99089 9.4151 9.11422 9.37122 9.23975 9.37786C9.36528 9.3845 9.48402 9.44118 9.57289 9.53689C9.66176 9.63259 9.71439 9.76047 9.72056 9.89565C9.72672 10.0308 9.68598 10.1637 9.60624 10.2683ZM9 5.3077V2.34616L11.75 5.3077H9Z"
+    fill="white" />
+</svg>
\ No newline at end of file
diff --git a/cws-ui/src/main/webapp/images/trash_red.svg b/cws-ui/src/main/webapp/images/trash_red.svg
new file mode 100644
index 00000000..b59c5655
--- /dev/null
+++ b/cws-ui/src/main/webapp/images/trash_red.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6875 6H3.3125C3.13991 6 3 6.13431 3 6.3V13.8C3 14.4627 3.55964 15 4.25 15H11.75C12.4404 15 13 14.4627 13 13.8V6.3C13 6.13431 12.8601 6 12.6875 6ZM7 12.5556C7 12.801 6.77614 13 6.5 13C6.22386 13 6 12.801 6 12.5556V7.44444C6 7.19898 6.22386 7 6.5 7C6.77614 7 7 7.19898 7 7.44444V12.5556ZM9.5 13C9.77614 13 10 12.801 10 12.5556V7.44444C10 7.19898 9.77614 7 9.5 7C9.22386 7 9 7.19898 9 7.44444V12.5556C9 12.801 9.22386 13 9.5 13Z" fill="red" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.88 3.11707C11.7366 3.17549 12.5746 3.37925 13.3532 3.71842C13.7397 3.88799 13.9903 4.24774 14 4.6471C13.9951 4.95391 13.7279 5.2002 13.4 5.20016H2.60006C2.43946 5.20018 2.28556 5.13994 2.1728 5.03294C2.06003 4.92594 1.99781 4.78109 2.00006 4.63082C2.0269 4.21759 2.30136 3.85418 2.70866 3.69259C3.47001 3.37342 4.2842 3.17876 5.11584 3.11707C5.44056 1.87426 6.63075 1 7.99793 1C9.36511 1 10.5553 1.87426 10.88 3.11707ZM9.56224 3.00425C9.26073 2.45321 8.64987 2.11127 7.98845 2.12328C7.33497 2.11447 6.73392 2.45693 6.44226 3.00425C7.48137 2.94756 8.52313 2.94756 9.56224 3.00425Z" fill="red" />
+</svg>
diff --git a/cws-ui/src/main/webapp/images/waterfall_light.svg b/cws-ui/src/main/webapp/images/waterfall_light.svg
new file mode 100644
index 00000000..ad32f1cc
--- /dev/null
+++ b/cws-ui/src/main/webapp/images/waterfall_light.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M 2.3 1.3 C 1.7 1.3 1.3 1.7 1.3 2.3 L 1.3 5.3 C 1.3 5.8 1.7 6.3 2.3 6.3 L 10.3 6.3 C 10.8 6.3 11.3 5.8 11.3 5.3 V 2.3 C 11.3 1.7 10.8 1.3 10.3 1.3 L 2.3 1.3 Z M 7.4 3.1 L 2.4 3.1 L 2.4 4.4 L 7.4 4.4 V 3.1 Z"
+    fill="white" />
+  <path fill-rule="evenodd"
+    d="M 6 7.5 C 5.4 7.5 5 7.9 5 8.5 L 5 11.5 C 5 12.1 5.4 12.5 6 12.5 H 14 C 14.6 12.5 15 12.1 15 11.5 V 8.5 C 15 7.9 14.6 7.5 14 7.5 L 6 7.5 Z M 11.1 9.4 H 6.1 V 10.6 H 11.1 V 9.4 Z"
+    fill="white" />
+  <path fill-rule="evenodd"
+    d="M 9.8 13.8 C 9.2 13.8 8.8 14.2 8.8 14.8 V 17.8 C 8.8 18.3 9.2 18.8 9.8 18.8 H 17.8 C 18.3 18.8 18.8 18.3 18.8 17.8 V 14.8 C 18.8 14.2 18.3 13.8 17.8 13.8 L 9.8 13.8 Z M 14.9 15.6 H 9.9 V 16.9 H 14.9 V 15.6 Z"
+    fill="white" />
+</svg>
\ No newline at end of file
diff --git a/install/cws-ui/configuration.ftl b/install/cws-ui/configuration.ftl
index 93d29805..9c37523e 100755
--- 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
index 27859ced..6f618d4f 100644
--- 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
index e49ab939..14f3342c 100644
--- 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
index 4714697a..c78ada16 100644
--- 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
index 4a75e8d9..ff73050e 100644
--- 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
index 04501187..b32ecc07 100644
--- 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
index c318122e..cc06e9f6 100644
--- 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
index 2236d92e..7257e5d6 100644
--- 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
index 01f441a1..219d94fb 100644
--- 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
index 4f805bbc..8025dac9 100644
--- 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>