Add connectivity status indicator

apps/fz_http/assets/js/app.js

@@ -58,6 +58,21 @@ const liveSocket = new LiveSocket(
   }
 )
 
+const toggleConnectStatus = function (info) {
+  let success = document.getElementById("web-ui-connect-success")
+  let error = document.getElementById("web-ui-connect-error")
+  if (userSocket.isConnected()) {
+    success.classList.remove("is-hidden")
+    error.classList.add("is-hidden")
+  } else {
+    success.classList.add("is-hidden")
+    error.classList.remove("is-hidden")
+  }
+}
+
+userSocket.onError(toggleConnectStatus)
+userSocket.onOpen(toggleConnectStatus)
+
 /* XXX: Refactor this into a LiveView. */
 const sessionConnect = function (pres) {
   let tbody = document.getElementById("sessions-table-body")

apps/fz_http/lib/fz_http_web/templates/layout/root.html.heex

@@ -58,9 +58,14 @@
             <% end %>
           </div>
         </div>
-        <a href="https://github.com/firezone/firezone/wiki" title="Documentation" class="navbar-item has-divider is-desktop-icon-only">
+        <a href="https://docs.firez.one" title="Documentation" class="navbar-item has-divider is-desktop-icon-only">
           <span class="icon"><i class="mdi mdi-help-circle-outline"></i></span>
-          <span>Documentation</span>
+        </a>
+        <a id="web-ui-connect-success" href="#" title="You are connected to the Firezone Web UI." class="navbar-item has-divider is-desktop-icon-only">
+          <span class="icon has-text-success"><i class="mdi mdi-wifi"></i></span>
+        </a>
+        <a id="web-ui-connect-error" href="#" title="You are disconnected from the Firezone Web UI." class="is-hidden navbar-item has-divider is-desktop-icon-only">
+          <span class="icon has-text-danger"><i class="mdi mdi-wifi-off"></i></span>
         </a>
       </div>
     </div>