Add fade for dismissable alerts

Adds a 'fade' param for dismissable alerts that if
true will cause alerts to fade out and disappear after
5s. Setting it to false will keep alerts onscreen until
they're manually dismissed by the user.

Change-Id: If16b634c564e7ab906ecea33fd33128374570010

internal/commands/plugins.go

@@ -87,6 +87,7 @@ func RunBinaryWithOptions(ctx context.Context, cmd string, args []string, wg *sy
 		webservice.SendAlert(
 			webservice.Error,
 			fmt.Sprintf("Plugin '%s' failed to start: %v", cmd, err),
+			true,
 		)
 	}
 }

internal/commands/plugins_windows.go

@@ -146,6 +146,7 @@ func RunBinaryWithOptions(ctx context.Context, cmd string, args []string, wg *sy
 		webservice.SendAlert(
 			webservice.Error,
 			fmt.Sprintf("Plugin '%s' failed to start: %v", cmd, err),
+			true,
 		)
 	}
 }

internal/commands/root.go

@@ -75,7 +75,7 @@ func launch(cmd *cobra.Command, args []string) {
 		}
 	} else {
 		log.Printf("config %s", err)
-		webservice.SendAlert(webservice.Info, fmt.Sprintf("%s", err))
+		webservice.SendAlert(webservice.Info, fmt.Sprintf("%s", err), true)
 	}
 
 	// just a little ditty to see if we should open the ui or the webservice or both

internal/webservice/alerts.go

@@ -34,6 +34,7 @@ const (
 type Alert struct {
 	Level   AlertLevel
 	Message string
+	Fade    bool
 }
 
 // Alerts serves as a queue to hold alerts to be sent to the UI,
@@ -44,10 +45,11 @@ var Alerts []Alert
 // SendAlert tests for the existence of an established websocket
 // and either sends the message over the websocket, or adds it
 // to the Alerts queue to be sent later
-func SendAlert(lvl AlertLevel, msg string) {
+func SendAlert(lvl AlertLevel, msg string, fade bool) {
 	alert := Alert{
 		Level:   lvl,
 		Message: msg,
+		Fade:    fade,
 	}
 
 	if ws == nil {
@@ -63,6 +65,7 @@ func sendAlertMessage(a Alert) {
 		"component": "alert",
 		"level":     a.Level,
 		"message":   a.Message,
+		"fade":      a.Fade,
 		"timestamp": time.Now().UnixNano() / 1000000,
 	}); err != nil {
 		onError(err)

web/index.html

@@ -26,7 +26,7 @@
                   spinner.style.display = "none";
               }
               const loadFail = (err) => {
-                  showDismissableAlert("danger", `Error loading '${err.validatedURL}': ${err.errorDescription} (${err.errorCode})`);
+                  showDismissableAlert("danger", `Error loading '${err.validatedURL}': ${err.errorDescription} (${err.errorCode})`, true);
               }
               webview.addEventListener("did-start-loading", loadStart)
               webview.addEventListener("did-stop-loading", loadStop)

web/js/common.js

@@ -97,8 +97,11 @@ function removeElement(id) { // eslint-disable-line no-unused-vars
     }
 }
 
-function showDismissableAlert(alertLevel, msg) { // eslint-disable-line no-unused-vars
+// show a dismissable alert in the UI
+// if 'fade' is set to true, the alert will fade out and disappear after 5s
+function showDismissableAlert(alertLevel, msg, fade) { // eslint-disable-line no-unused-vars
     let e = document.getElementById("alert-div");
+    let alertId = `alert-${Math.floor(Math.random() * 1000)}`;
     let alertHeading = "";
 
     switch (alertLevel) {
@@ -113,9 +116,11 @@ function showDismissableAlert(alertLevel, msg) { // eslint-disable-line no-unuse
     }
 
     let div = document.createElement("div");
+    div.id = alertId;
     div.className = `alert alert-${alertLevel} alert-dismissable fade show`;
     div.setAttribute("role", "alert");
     div.innerHTML = `<strong>${alertHeading}: </strong>${msg}`;
+    div.style.opacity = "1";
 
     // dismissable button
     let btn = document.createElement("button");
@@ -131,5 +136,24 @@ function showDismissableAlert(alertLevel, msg) { // eslint-disable-line no-unuse
     btn.appendChild(span);
     div.appendChild(btn);
 
+    // add auto-hide if fade is true
+    if (fade === true) {
+        let script = document.createElement("script");
+        let inline = `alertFadeOut("${alertId}")`;
+        script.innerText = inline;
+        div.appendChild(script);
+    }
+
     e.appendChild(div);
+}
+
+function alertFadeOut(id) { // eslint-disable-line no-unused-vars
+    let element = document.getElementById(id);
+    setTimeout(function() {
+        element.style.transition = "opacity 2s ease";
+        element.style.opacity = "0";
+    }, 5000);
+    element.addEventListener("transitionend", function() {
+        element.parentNode.removeChild(element);
+    });
 }

web/js/websocket.js

@@ -77,7 +77,7 @@ function handleMessages(message) {
         } else if (json["component"] === "authcomplete") {
             authComplete();
         } else if (json["component"] === "alert") {
-            showDismissableAlert(json["level"], json["message"]);
+            showDismissableAlert(json["level"], json["message"], json["fade"]);
         }
     } else {
         // TODO: determine if we're dispatching events or just doing function calls