From 2b6ce25954fe05d56ece944117c95c85a1fdeafa Mon Sep 17 00:00:00 2001
From: Frederick Michielssen <fmichielssen@openanalytics.eu>
Date: Fri, 11 Aug 2017 16:54:02 +0200
Subject: [PATCH] Added animated loading feedback while container is launching

---
 .../controllers/AppController.java            |  33 +++++++++++++-----
 .../controllers/BaseController.java           |  13 +++++++
 .../openanalytics/services/DockerService.java |   4 +--
 src/main/resources/static/css/default.css     |  15 ++++++++
 src/main/resources/static/img/loading.gif     | Bin 0 -> 4799 bytes
 src/main/resources/templates/app.html         |  16 +++++++++
 6 files changed, 70 insertions(+), 11 deletions(-)
 create mode 100644 src/main/resources/static/img/loading.gif

diff --git a/src/main/java/eu/openanalytics/controllers/AppController.java b/src/main/java/eu/openanalytics/controllers/AppController.java
index db48cb40..92f34489 100644
--- a/src/main/java/eu/openanalytics/controllers/AppController.java
+++ b/src/main/java/eu/openanalytics/controllers/AppController.java
@@ -26,6 +26,8 @@
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.ModelMap;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.ResponseBody;
 
 import eu.openanalytics.ShinyProxyApplication;
 import eu.openanalytics.services.AppService;
@@ -40,23 +42,36 @@ public class AppController extends BaseController {
 	@Inject
 	AppService appService;
 
-	@RequestMapping("/app/*")
+	@RequestMapping(value="/app/*", method=RequestMethod.GET)
 	String app(ModelMap map, HttpServletRequest request) {
 		prepareMap(map, request);
 		
-		String mapping = dockerService.getMapping(getUserName(request), getAppName(request));
-		
-		String queryString = request.getQueryString();
-		if (queryString == null) queryString = "";
-		else queryString = "?" + queryString;
-		
+		String mapping = dockerService.getMapping(getUserName(request), getAppName(request), false);
 		String contextPath = ShinyProxyApplication.getContextPath(environment);
-		String containerPath = contextPath + "/" + mapping + environment.getProperty("shiny.proxy.landing-page") + queryString;
 
-		map.put("container", containerPath);
+		map.put("appTitle", getAppTitle(request));
+		map.put("container", buildContainerPath(mapping, request));
 		map.put("heartbeatRate", environment.getProperty("shiny.proxy.heartbeat-rate", "10000"));
 		map.put("heartbeatPath", contextPath + "/heartbeat");
 		
 		return "app";
 	}
+	
+	@RequestMapping(value="/app/*", method=RequestMethod.POST)
+	@ResponseBody
+	String startApp(HttpServletRequest request) {
+		String mapping = dockerService.getMapping(getUserName(request), getAppName(request), true);
+		return buildContainerPath(mapping, request);
+	}
+	
+	private String buildContainerPath(String mapping, HttpServletRequest request) {
+		if (mapping == null) return "";
+		
+		String queryString = request.getQueryString();
+		queryString = (queryString == null) ? "" : "?" + queryString;
+		
+		String contextPath = ShinyProxyApplication.getContextPath(environment);
+		String containerPath = contextPath + "/" + mapping + environment.getProperty("shiny.proxy.landing-page") + queryString;
+		return containerPath;
+	}
 }
diff --git a/src/main/java/eu/openanalytics/controllers/BaseController.java b/src/main/java/eu/openanalytics/controllers/BaseController.java
index f7c975d4..1383fed7 100644
--- a/src/main/java/eu/openanalytics/controllers/BaseController.java
+++ b/src/main/java/eu/openanalytics/controllers/BaseController.java
@@ -40,10 +40,15 @@
 import org.springframework.ui.ModelMap;
 import org.springframework.util.StreamUtils;
 
+import eu.openanalytics.services.AppService;
 import eu.openanalytics.services.UserService;
+import eu.openanalytics.services.AppService.ShinyApp;
 
 public abstract class BaseController {
 
+	@Inject
+	AppService appService;
+	
 	@Inject
 	UserService userService;
 	
@@ -70,6 +75,14 @@ protected String getAppName(String uri) {
 		return appName;
 	}
 	
+	protected String getAppTitle(HttpServletRequest request) {
+		String appName = getAppName(request);
+		if (appName == null || appName.isEmpty()) return "";
+		ShinyApp app = appService.getApp(appName);
+		if (app == null || app.getDisplayName() == null || app.getDisplayName().isEmpty()) return appName;
+		else return app.getDisplayName();
+	}
+	
 	protected void prepareMap(ModelMap map, HttpServletRequest request) {
 		map.put("title", environment.getProperty("shiny.proxy.title"));
 		if (logoURI == null) logoURI = toAccessibleURI(environment.getProperty("shiny.proxy.logo-url"));
diff --git a/src/main/java/eu/openanalytics/services/DockerService.java b/src/main/java/eu/openanalytics/services/DockerService.java
index cda4813f..d7d18b6a 100644
--- a/src/main/java/eu/openanalytics/services/DockerService.java
+++ b/src/main/java/eu/openanalytics/services/DockerService.java
@@ -178,10 +178,10 @@ public List<Proxy> listProxies() {
 		}
 	}
 	
-	public String getMapping(String userName, String appName) {
+	public String getMapping(String userName, String appName, boolean startNew) {
 		waitForLaunchingProxy(userName, appName);
 		Proxy proxy = findProxy(userName, appName);
-		if (proxy == null) {
+		if (proxy == null && startNew) {
 			// The user has no proxy yet.
 			proxy = startProxy(userName, appName);
 		}
diff --git a/src/main/resources/static/css/default.css b/src/main/resources/static/css/default.css
index d94af585..cb5fbf3c 100644
--- a/src/main/resources/static/css/default.css
+++ b/src/main/resources/static/css/default.css
@@ -48,4 +48,19 @@ body > div#navbar { padding-top: 0px; }
 
 #error {
 	padding-left: 15px;
+}
+
+.loading {
+	display: none;
+	position: fixed;
+	top: 150px;
+	width: 100%;
+	z-index: 9999;
+	background: url(../img/loading.gif) center no-repeat #fff;
+}
+
+.loading-txt {
+	text-align: center;
+	font-size: 24px;
+	margin-top: -50px;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/img/loading.gif b/src/main/resources/static/img/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..98218271f56841295547959676187cc79d0b94ed
GIT binary patch
literal 4799
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
Qg#uqHr%#|IAfRpk13idq>Hq)$

literal 0
HcmV?d00001

diff --git a/src/main/resources/templates/app.html b/src/main/resources/templates/app.html
index 1ecda2c2..b339f843 100644
--- a/src/main/resources/templates/app.html
+++ b/src/main/resources/templates/app.html
@@ -37,6 +37,7 @@
 	
 	<!-- content -->
     <iframe id="shinyframe" th:src="${container}" width="100%"></iframe>
+    <div class="loading"><div class="loading-txt">Launching <span th:text="${appTitle}"></span>...</div></div>
     
 	<script type="text/javascript" th:inline="javascript">
 		function setShinyframeHeight() {
@@ -53,6 +54,21 @@
 			}, [[${heartbeatRate}]]);
 		};
 		heartbeat();
+		
+		$(window).load(function() {
+			var source = $("#shinyframe").attr("src");
+			if (source == "") {
+				$(".loading").show();
+				$.post(window.location.pathname, function(containerPath) {
+					$("#shinyframe").attr("src", containerPath);
+					$(".loading").fadeOut("slow");
+				}).fail(function(request) {
+					var newDoc = document.open("text/html", "replace");
+					newDoc.write(request.responseText);
+					newDoc.close();
+				});
+			}
+		});
 	</script>
 </body>
 </html>