From 466ae3934632f8f8edcf36fabd671d90ec8ab334 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Sun, 13 Sep 2020 22:39:15 -0400
Subject: [PATCH] Color the background of the connection state to make it more
 clear

---
 src/App.vue | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 02792c9..1ae4774 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,13 +7,9 @@
       Hide <code>saltutil.find_job</code> jobs
       <input type="checkbox" v-model="hideFindJob" />
     </label>
-    {{
-      !evtSource || evtSource.readyState == evtSource.CLOSED
-        ? 'Disconnected'
-        : evtSource.readyState == evtSource.OPEN
-        ? 'Connected'
-        : 'Connecting'
-    }}
+    <span class="event-source-state" :class="evtSourceState">
+      {{ evtSourceState }}
+    </span>
     <Job
       v-for="(jobEvents, jid) in jobs"
       :key="jid"
@@ -43,6 +39,7 @@ export default class App extends Vue {
   showRawEvents: boolean = false;
   hideFindJob: boolean = true;
   evtSourceTimeout: number | null = null;
+  evtSourceState: 'Disconnected' | 'Connecting' | 'Connected' = 'Disconnected';
 
   mounted(): void {
     fetch(BASE_URL + 'login', {
@@ -64,7 +61,7 @@ export default class App extends Vue {
 
     this.evtSource.onopen = (e) => {
       console.info('Connected to eventSource.');
-      this.$forceUpdate(); // evtSource.readyState won't be detected otherwise
+      this.updateEvtSourceState();
     };
 
     this.evtSource.onmessage = (e) => {
@@ -83,8 +80,8 @@ export default class App extends Vue {
       if (!this.evtSourceTimeout) {
         console.info('Lost eventSource, reconnecting');
         console.info(e);
-        this.$forceUpdate(); // evtSource.readyState won't be detected otherwise
-        this.evtSource.close();
+        this.updateEvtSourceState();
+        this.evtSource?.close();
         this.evtSourceTimeout = window.setTimeout(
           this.connectEventSource,
           1000,
@@ -100,5 +97,28 @@ export default class App extends Vue {
   ): event is Extract<salt.SaltEvent, { splitTag: ['salt', T, ...any[]] }> {
     return event.splitTag[1] === type;
   }
+
+  updateEvtSourceState(): void {
+    this.evtSourceState =
+      !this.evtSource || this.evtSource.readyState == this.evtSource.CLOSED
+        ? 'Disconnected'
+        : this.evtSource.readyState == this.evtSource.OPEN
+        ? 'Connected'
+        : 'Connecting';
+  }
 }
 </script>
+
+<style lang="scss">
+.event-source-state {
+  &.Disconnected {
+    background-color: red;
+  }
+  &.Connecting {
+    background-color: yellow;
+  }
+  &.Connected {
+    background-color: green;
+  }
+}
+</style>