UI - Fixes #2

cws-service/src/main/java/jpl/cws/service/CwsConsoleService.java

@@ -675,18 +675,23 @@ public Map<String, String> getOutputVariablesForProcess(String processInstanceId
                         FileValue fileValue = (FileValue) typedValue;
                         String fileName = fileValue.getFilename();
                         String mimeType = fileValue.getMimeType();
-                        if (mimeType.contains("image")) {
-                            InputStream fileInputStream = fileValue.getValue();
-                            String encodedString = "data:" + mimeType + ";base64, ";
-                            try {
-                                byte[] sourceBytes = IOUtils.toByteArray(fileInputStream);
-                                encodedString += Base64.getEncoder().encodeToString(sourceBytes);
-                            } catch (IOException e) {
-                                throw new RuntimeException(e);
+                        if (mimeType != null) {
+                            if (mimeType.contains("image")) {
+                                InputStream fileInputStream = fileValue.getValue();
+                                String encodedString = "data:" + mimeType + ";base64, ";
+                                try {
+                                    byte[] sourceBytes = IOUtils.toByteArray(fileInputStream);
+                                    encodedString += Base64.getEncoder().encodeToString(sourceBytes);
+                                } catch (IOException e) {
+                                    throw new RuntimeException(e);
+                                }
+                                outputVarMap.put(varName + " (" + varType + ", " + mimeType + ")", encodedString);
+                            } else {
+                                outputVarMap.put(varName + " (" + varType + ")", fileName);
                             }
-                            outputVarMap.put(varName + " (" + varType + ", " + mimeType + ")", encodedString);
                         } else {
-                            outputVarMap.put(varName + " (" + varType + ")", fileName);
+                            log.error("PROCESSES PAGE: Encountered an error when trying to detect the mime type of an image. Did you add a mimeType to the file when creating it?");
+                            outputVarMap.put(varName + "(" + varType + ")", "ERROR: File does not have a mime type.");
                         }
                     }
                 }

cws-test/src/test/java/jpl/cws/test/integration/ui/ProcessesTestIT.java

@@ -64,6 +64,7 @@ public void runStatusCompleteTest() throws IOException {
 			log.info("------ START ProcessesTestIT:runStatusCompleteTest ------");
 
 			goToPage("processes");
+			sleep(20000);
 
 			log.info("Getting info from table...");
 			wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.tagName("table")));

cws-ui/src/main/webapp/css/deployments.css

@@ -108,30 +108,38 @@
 #process-table tr td {
     vertical-align: middle;
     padding: 4px 8px;
-    min-width: 70px;
 }
 
-#process-table tr td:nth-child(1) {
+#process-table tr td:nth-child(2) {
     min-width: 200px;
     overflow: hidden;
     text-wrap: none
 }
 
 #process-table tr td:nth-child(3) {
-    text-align: center;
-    width: 70px;
+    overflow-wrap: break-word;
+    max-width: 200px;
 }
 
 #process-table tr td:nth-child(4) {
     text-align: center;
-    width: 70px;
+    max-width: 50px;
 }
 
 #process-table tr td:nth-child(5) {
     text-align: center;
     width: 70px;
 }
 
+#process-table tr td:nth-child(6) {
+    text-align: center;
+    width: 70px;
+}
+
+#process-table tr td:nth-child(7) {
+    min-width: 400px;
+}
+
 .progress {
     margin: 0px;
 }

cws-ui/src/main/webapp/css/history.css

@@ -6,7 +6,8 @@ summary {
     width: 100px;
 }
 .historyLimitSize {
-    max-height: 150px;
+    max-height: 200px;
+    max-width: 200px;
 }
 .thumbnail {
     margin-top: 5px !important;
@@ -57,4 +58,19 @@ summary {
 }
 summary {
     display: list-item;
+}
+
+.proc-var-flex-main {
+    margin-bottom: 10px; 
+    display: flex; 
+    flex-direction: row; 
+    flex-wrap: nowrap; 
+    justify-content: flex-start; 
+    align-items: center;
+}
+
+.proc-var-flex-btn {
+    align-self: start; 
+    margin-top: auto; 
+    margin-bottom: auto;
 }

cws-ui/src/main/webapp/css/logs.css

@@ -183,4 +183,14 @@ div.dts tbody th, div.dts tbody td {
 
 #logData_info.dataTables_info {
     padding-top: 0px;
-}
+}
+
+.ajax-spinner{
+    height: 100%;
+    width:100%;
+    position: absolute;
+    z-index: 10;
+    background: #fff url('../images/ajax-spin.gif') no-repeat center;
+    opacity: 0.8;
+    display: none;
+  }

install/cws-ui/deployments.ftl

@@ -371,17 +371,27 @@
 			$("#process-table").DataTable({
 				columns: [
 					{
-						data: { name: "name", id: "id", key: "key" },
-						render: function (data, type) {
+						data: { id: "id", key: "key" },
+						render: function(data, type) {
 							if (type !== 'display') {
-								return data.name;
+								return "";
 							} else {
-								var html = `<div class="proc-name-flex"><div class="proc-name-btns">`
+								return `<div class="proc-name-btns">`
 									+ `<a href="/${base}/modeler?procDefKey=` + data.key + `" target="_blank">`
 									+ `<span style="float: right;" id="edit-` + data.key + `" class="glyphicon glyphicon-pencil"></span></a>`
 									+ `<a data-proc-key="` + data.key + `" onClick="handleDeleteProcDef('` + data.key + `')"><span style="cursor: pointer; float: right; color: #d9534f; padding-left: 7;" id="delete-` 
 									+ data.key + `" class="glyphicon glyphicon-remove-sign"></span></a>`
-									+ `</div><div class-"proc-name-name"><a style="cursor: pointer;" onClick='parent.location="/camunda/app/cockpit/default/#/process-definition/` + data.id + `/runtime"'/>` + data.name + `</a></div>`;
+									+ `</div>`;
+							}
+						}
+					},
+					{
+						data: { name: "name", id: "id", key: "key" },
+						render: function (data, type) {
+							if (type !== 'display') {
+								return data.name;
+							} else {
+								var html = `<div class-"proc-name-name"><a style="cursor: pointer;" onClick='parent.location="/camunda/app/cockpit/default/#/process-definition/` + data.id + `/runtime"'/>` + data.name + `</a></div>`;
 								return html;
 							}
 						}
@@ -501,9 +511,11 @@
 					}
 				],
 				columnDefs: [
-					{ orderable: false, targets: 5 },
-					{ orderable: false, targets: 3 }
+					{ orderable: false, targets: 0},
+					{ orderable: false, targets: 6 },
+					{ orderable: false, targets: 4 },
 				],
+				order: [[1, "asc"]],
 				"paging": false,
 				//filter is top left, length is top right, info is bottom left, pagination is bottom right
 				dom: "<'above-table-div'<'above-table-buttons'>f>"
@@ -525,21 +537,21 @@
 
 			$("#hide-sus-btn").click(function () {
 				if ($(this).prop("checked")) {
-					$("#process-table").DataTable().column(4).search("Active", false, true).draw();
+					$("#process-table").DataTable().column(5).search("Active", false, true).draw();
 					localStorage.setItem(hideSuspendedProcVar, "1");
 				}
 				else {
-					$("#process-table").DataTable().column(4).search("").draw();
+					$("#process-table").DataTable().column(5).search("").draw();
 				}
 			});
 
 			if (parseInt(localStorage.getItem(hideSuspendedProcVar)) == 0) {
 				$("#hide-sus-btn").prop("checked", false);
-				$("#process-table").DataTable().column(4).search("").draw();
+				$("#process-table").DataTable().column(5).search("").draw();
 			}
 			else {
 				$("#hide-sus-btn").prop("checked", true);
-				$("#process-table").DataTable().column(4).search("Active", false, true).draw();
+				$("#process-table").DataTable().column(5).search("Active", false, true).draw();
 			}
 
 			refreshStats();
@@ -822,14 +834,15 @@
 							</div>
 						</div>
 
-						<table id="process-table" class="table table-striped sortable">
+						<table id="process-table" class="table table-striped sortable" style="width: 100%;">
 							<thead>
 								<tr>
-									<th>Name</span></th>
-									<th>Key</span></th>
-									<th>Version&nbsp;</span></th>
-									<th>Workers</span></th>
-									<th>Status&nbsp;</span></th>
+									<th style="width: 30px"></th>
+									<th>Name</th>
+									<th>Key</th>
+									<th>Version</th>
+									<th>Workers</th>
+									<th>Status</th>
 									<th style="width:500px">Instance Statistics</th>
 								</tr>
 							</thead>