From e9e1cd8be8caf67b9f74fb86993870a108929330 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Wed, 11 May 2022 13:09:01 +0200
Subject: [PATCH] Web: show SocketIO connection status

---
 web/app/src/assets/base.css                |  3 ++
 web/app/src/components/NotificationBar.vue | 32 ++++++++++++++++++-
 web/app/src/components/UpdateListener.vue  | 13 ++++++++
 web/app/src/stores/socket-status.js        | 36 ++++++++++++++++++++++
 4 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 web/app/src/stores/socket-status.js

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 46be8d2c..a52c4095 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -54,6 +54,9 @@
 
   --color-status-cancel-requested: hsl(194 30% 50%);
   --color-status-under-construction: hsl(194 30% 50%);
+
+  --color-connection-lost-text: hsl(17, 65%, 65%);
+  --color-connection-lost-bg: hsl(17, 65%, 20%);
 }
 
 html,
diff --git a/web/app/src/components/NotificationBar.vue b/web/app/src/components/NotificationBar.vue
index 013f1083..cb1350b7 100644
--- a/web/app/src/components/NotificationBar.vue
+++ b/web/app/src/components/NotificationBar.vue
@@ -1,14 +1,44 @@
 <template>
-  <span class='notifications' v-if="notifs.last">{{ notifs.last.msg }}</span>
+  <section class="notification-bar">
+    <span class='notifications' v-if="notifs.last">{{ notifs.last.msg }}</span>
+    <span class='socket-status' v-if="!sockStatus.isConnected" :title="sockStatus.message">Connection Lost</span>
+  </section>
 </template>
 
 <script>
 import { useNotifs } from '@/stores/notifications';
+import { useSocketStatus } from '@/stores/socket-status';
 
 export default {
   name: 'NotificationBar',
   data: () => ({
     notifs: useNotifs(),
+    sockStatus: useSocketStatus(),
   }),
 }
 </script>
+
+<style scoped>
+.notification-bar {
+  width: 100%;
+}
+
+.socket-status {
+  float: right;
+
+  font-weight: bold;
+  font-size: larger;
+
+  min-width: 1.2em;
+  padding: 0.2em 1em;
+  border-radius: 0.5em;
+  text-align: center;
+
+  color: var(--color-connection-lost-text);
+  background-color: var(--color-connection-lost-bg);
+  box-shadow: 0 0 1em var(--color-connection-lost-bg);
+  border: solid thin var(--color-connection-lost-text);
+
+  cursor: help;
+}
+</style>
diff --git a/web/app/src/components/UpdateListener.vue b/web/app/src/components/UpdateListener.vue
index 302eed75..2a0d364b 100644
--- a/web/app/src/components/UpdateListener.vue
+++ b/web/app/src/components/UpdateListener.vue
@@ -5,6 +5,8 @@
 <script>
 import io from "socket.io-client";
 import * as API from "@/manager-api"
+import { useSocketStatus } from '@/stores/socket-status';
+
 
 export default {
   emits: [
@@ -17,6 +19,7 @@ export default {
   data() {
     return {
       socket: null,
+      sockStatus: useSocketStatus(),
     }
   },
   mounted: function () {
@@ -57,20 +60,29 @@ export default {
       // console.
       window.ws = ws;
 
+      this.socket.on('open', (error) => {
+        console.log("socketIO connection open");
+        this.sockStatus.connected();
+      });
       this.socket.on('connect_error', (error) => {
         // Don't log the error here, it's too long and noisy for regular logs.
         console.log("socketIO connection error");
+        this.sockStatus.disconnected(error);
       });
       this.socket.on('error', (error) => {
         console.log("socketIO error:", error);
+        this.sockStatus.disconnected(error);
       });
       this.socket.on('connect_timeout', (timeout) => {
         console.log("socketIO connection timeout:", timeout);
+        this.sockStatus.disconnected("Connection timeout");
       });
 
       this.socket.on("disconnect", (reason) => {
         console.log("socketIO disconnected:", reason);
         this.$emit("sioDisconnected", reason);
+        this.sockStatus.disconnected(reason);
+
         if (reason === 'io server disconnect') {
           // The disconnection was initiated by the server, need to reconnect
           // manually. If the disconnect was for other reasons, the socket
@@ -84,6 +96,7 @@ export default {
       });
       this.socket.on("reconnect", (attemptNumber) => {
         console.log("socketIO reconnected after", attemptNumber, "attempts");
+        this.sockStatus.connected();
 
         // Resubscribe to whatever we want to be subscribed to:
         if (this.subscribedJob) this._updateJobSubscription("subscribe", this.subscribedJob);
diff --git a/web/app/src/stores/socket-status.js b/web/app/src/stores/socket-status.js
new file mode 100644
index 00000000..2672468b
--- /dev/null
+++ b/web/app/src/stores/socket-status.js
@@ -0,0 +1,36 @@
+import { stringifyStyle } from '@vue/shared'
+import { defineStore } from 'pinia'
+
+/**
+ * Status of the SocketIO/Websocket connection to Flamenco Manager.
+ */
+export const useSocketStatus = defineStore('socket-status', {
+  state: () => ({
+    /** @type { bool } */
+    isConnected: false,
+
+    /** @type {string} */
+    message: "",
+  }),
+  actions: {
+    /**
+     * Indicate the connection was lost.
+     * @param {string} reason
+     */
+     disconnected(reason) {
+      this.$patch({
+        isConnected: false,
+        message: `${reason}`,
+      });
+    },
+    /**
+     * Indicate the connection is good.
+     */
+     connected() {
+      this.$patch({
+        isConnected: true,
+        message: "",
+      });
+    },
+  }
+})