From 84958502b1aa899061cdb78efa96a161ca21ddc6 Mon Sep 17 00:00:00 2001
From: simon987 <me@simon987.net>
Date: Wed, 12 Jul 2023 19:39:52 -0400
Subject: [PATCH] Fix websocket for #384

---
 sist2-admin/frontend/src/App.vue        | 129 ++++++------
 sist2-admin/frontend/src/views/Tail.vue | 252 ++++++++++++------------
 2 files changed, 195 insertions(+), 186 deletions(-)

diff --git a/sist2-admin/frontend/src/App.vue b/sist2-admin/frontend/src/App.vue
index 23305ad..dea643e 100644
--- a/sist2-admin/frontend/src/App.vue
+++ b/sist2-admin/frontend/src/App.vue
@@ -1,14 +1,15 @@
 <template>
-  <div id="app">
-    <NavBar></NavBar>
-    <b-container class="pt-4">
-      <b-alert show dismissible variant="info">
-        This is a beta version of sist2-admin. Please submit bug reports, usability issues and feature requests
-        to the <a href="https://github.com/simon987/sist2/issues/new/choose" target="_blank">issue tracker on Github</a>. Thank you!
-      </b-alert>
-      <router-view/>
-    </b-container>
-  </div>
+    <div id="app">
+        <NavBar></NavBar>
+        <b-container class="pt-4">
+            <b-alert show dismissible variant="info">
+                This is a beta version of sist2-admin. Please submit bug reports, usability issues and feature requests
+                to the <a href="https://github.com/simon987/sist2/issues/new/choose" target="_blank">issue tracker on
+                Github</a>. Thank you!
+            </b-alert>
+            <router-view/>
+        </b-container>
+    </div>
 </template>
 
 <script>
@@ -16,83 +17,87 @@ import NavBar from "@/components/NavBar";
 import Sist2AdminApi from "@/Sist2AdminApi";
 
 export default {
-  components: {NavBar},
-  data() {
-    return {
-      socket: null
-    }
-  },
-  mounted() {
-    Sist2AdminApi.getSist2AdminInfo()
-        .then(resp => this.$store.commit("setSist2AdminInfo", resp.data));
-    this.$store.dispatch("loadBrowserSettings");
-    this.connectNotifications();
-    // this.socket.onclose = this.connectNotifications;
-  },
-  methods: {
-    connectNotifications() {
-      this.socket = new WebSocket(`ws://${window.location.host}/notifications`);
-      this.socket.onopen = () => {
-        this.socket.send("Hello from client");
-      }
-
-      this.socket.onmessage = e => {
-        const notification = JSON.parse(e.data);
-        if (notification.message) {
-          notification.messageString = this.$t(notification.message).toString();
+    components: {NavBar},
+    data() {
+        return {
+            socket: null
         }
+    },
+    mounted() {
+        Sist2AdminApi.getSist2AdminInfo()
+            .then(resp => this.$store.commit("setSist2AdminInfo", resp.data));
+        this.$store.dispatch("loadBrowserSettings");
+        this.connectNotifications();
+        // this.socket.onclose = this.connectNotifications;
+    },
+    methods: {
+        connectNotifications() {
+            if (window.location.protocol === "https:") {
+                this.socket = new WebSocket(`wss://${window.location.host}/notifications`);
+            } else {
+                this.socket = new WebSocket(`ws://${window.location.host}/notifications`);
+            }
+            this.socket.onopen = () => {
+                this.socket.send("Hello from client");
+            }
 
-        this.$store.dispatch("notify", notification)
-      }
+            this.socket.onmessage = e => {
+                const notification = JSON.parse(e.data);
+                if (notification.message) {
+                    notification.messageString = this.$t(notification.message).toString();
+                }
+
+                this.$store.dispatch("notify", notification)
+            }
+        }
     }
-  }
 }
 </script>
 
 <style>
 html, body {
-  height: 100%;
+    height: 100%;
 }
 
 #app {
-  /*font-family: Avenir, Helvetica, Arial, sans-serif;*/
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  /*text-align: center;*/
-  color: #2c3e50;
-  padding-bottom: 1em;
-  min-height: 100%;
+    /*font-family: Avenir, Helvetica, Arial, sans-serif;*/
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /*text-align: center;*/
+    color: #2c3e50;
+    padding-bottom: 1em;
+    min-height: 100%;
 }
 
 .info-icon {
-  width: 1rem;
-  margin-right: 0.2rem;
-  cursor: pointer;
-  line-height: 1rem;
-  height: 1rem;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICB2aWV3Qm94PSIwIDAgNDI2LjY2NyA0MjYuNjY3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MjYuNjY3IDQyNi42Njc7IiBmaWxsPSIjZmZmIj4KPGc+CiAgICA8Zz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHJlY3QgeD0iMTkyIiB5PSIxOTIiIHdpZHRoPSI0Mi42NjciIGhlaWdodD0iMTI4Ii8+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMTMuMzMzLDBDOTUuNDY3LDAsMCw5NS40NjcsMCwyMTMuMzMzczk1LjQ2NywyMTMuMzMzLDIxMy4zMzMsMjEzLjMzM1M0MjYuNjY3LDMzMS4yLDQyNi42NjcsMjEzLjMzMwogICAgICAgICAgICAgICAgUzMzMS4yLDAsMjEzLjMzMywweiBNMjEzLjMzMywzODRjLTk0LjA4LDAtMTcwLjY2Ny03Ni41ODctMTcwLjY2Ny0xNzAuNjY3UzExOS4yNTMsNDIuNjY3LDIxMy4zMzMsNDIuNjY3CiAgICAgICAgICAgICAgICBTMzg0LDExOS4yNTMsMzg0LDIxMy4zMzNTMzA3LjQxMywzODQsMjEzLjMzMywzODR6Ii8+CiAgICAgICAgICAgIDxyZWN0IHg9IjE5MiIgeT0iMTA2LjY2NyIgd2lkdGg9IjQyLjY2NyIgaGVpZ2h0PSI0Mi42NjciLz4KICAgICAgICA8L2c+CiAgICA8L2c+CjwvZz4KPC9zdmc+Cg==);
-  filter: brightness(45%);
-  display: block;
+    width: 1rem;
+    margin-right: 0.2rem;
+    cursor: pointer;
+    line-height: 1rem;
+    height: 1rem;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICB2aWV3Qm94PSIwIDAgNDI2LjY2NyA0MjYuNjY3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MjYuNjY3IDQyNi42Njc7IiBmaWxsPSIjZmZmIj4KPGc+CiAgICA8Zz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHJlY3QgeD0iMTkyIiB5PSIxOTIiIHdpZHRoPSI0Mi42NjciIGhlaWdodD0iMTI4Ii8+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMTMuMzMzLDBDOTUuNDY3LDAsMCw5NS40NjcsMCwyMTMuMzMzczk1LjQ2NywyMTMuMzMzLDIxMy4zMzMsMjEzLjMzM1M0MjYuNjY3LDMzMS4yLDQyNi42NjcsMjEzLjMzMwogICAgICAgICAgICAgICAgUzMzMS4yLDAsMjEzLjMzMywweiBNMjEzLjMzMywzODRjLTk0LjA4LDAtMTcwLjY2Ny03Ni41ODctMTcwLjY2Ny0xNzAuNjY3UzExOS4yNTMsNDIuNjY3LDIxMy4zMzMsNDIuNjY3CiAgICAgICAgICAgICAgICBTMzg0LDExOS4yNTMsMzg0LDIxMy4zMzNTMzA3LjQxMywzODQsMjEzLjMzMywzODR6Ii8+CiAgICAgICAgICAgIDxyZWN0IHg9IjE5MiIgeT0iMTA2LjY2NyIgd2lkdGg9IjQyLjY2NyIgaGVpZ2h0PSI0Mi42NjciLz4KICAgICAgICA8L2c+CiAgICA8L2c+CjwvZz4KPC9zdmc+Cg==);
+    filter: brightness(45%);
+    display: block;
 }
 
 .tabs {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .modal-title {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 @media screen and (min-width: 1500px) {
-  .container {
-    max-width: 1440px;
-  }
+    .container {
+        max-width: 1440px;
+    }
 }
 
 label {
-  margin-top: 0.5rem;
-  margin-bottom: 0;
+    margin-top: 0.5rem;
+    margin-bottom: 0;
 }
 </style>
diff --git a/sist2-admin/frontend/src/views/Tail.vue b/sist2-admin/frontend/src/views/Tail.vue
index 98e7fbb..0aa4e58 100644
--- a/sist2-admin/frontend/src/views/Tail.vue
+++ b/sist2-admin/frontend/src/views/Tail.vue
@@ -1,168 +1,172 @@
 <template>
-  <b-card>
-    <b-card-body>
+    <b-card>
+        <b-card-body>
 
-      <h4 class="mb-3">{{ taskId }} {{ $t("logs") }}</h4>
+            <h4 class="mb-3">{{ taskId }} {{ $t("logs") }}</h4>
 
-      <div v-if="$store.state.sist2AdminInfo">
-        {{ $t("logFile") }}
-        <code>{{ $store.state.sist2AdminInfo.logs_folder }}/sist2-{{ taskId }}.log</code>
-        <br/>
-        <br/>
-      </div>
+            <div v-if="$store.state.sist2AdminInfo">
+                {{ $t("logFile") }}
+                <code>{{ $store.state.sist2AdminInfo.logs_folder }}/sist2-{{ taskId }}.log</code>
+                <br/>
+                <br/>
+            </div>
 
-      <b-row>
-        <b-col>
-          <span>{{ $t("logLevel") }}</span>
-          <b-select :options="levels.slice(0, -1)" v-model="logLevel" @input="connect()"></b-select>
-        </b-col>
-        <b-col>
-          <span>{{ $t("logMode") }}</span>
-          <b-select :options="modeOptions" v-model="mode" @input="connect()"></b-select>
-        </b-col>
-      </b-row>
+            <b-row>
+                <b-col>
+                    <span>{{ $t("logLevel") }}</span>
+                    <b-select :options="levels.slice(0, -1)" v-model="logLevel" @input="connect()"></b-select>
+                </b-col>
+                <b-col>
+                    <span>{{ $t("logMode") }}</span>
+                    <b-select :options="modeOptions" v-model="mode" @input="connect()"></b-select>
+                </b-col>
+            </b-row>
 
-      <div id="log-tail-output" class="mt-3 ml-1"></div>
+            <div id="log-tail-output" class="mt-3 ml-1"></div>
 
-    </b-card-body>
-  </b-card>
+        </b-card-body>
+    </b-card>
 </template>
 
 <script>
 
 export default {
-  name: "Tail",
-  data() {
-    return {
-      logLevel: "DEBUG",
-      levels: ["DEBUG", "INFO", "WARNING", "ERROR", "ADMIN", "FATAL"],
-      socket: null,
-      mode: "follow",
-      modeOptions: [
-        {
-          "text": this.$t('follow'),
-          "value": "follow"
-        },
-        {
-          "text": this.$t('wholeFile'),
-          "value": "wholeFile"
+    name: "Tail",
+    data() {
+        return {
+            logLevel: "DEBUG",
+            levels: ["DEBUG", "INFO", "WARNING", "ERROR", "ADMIN", "FATAL"],
+            socket: null,
+            mode: "follow",
+            modeOptions: [
+                {
+                    "text": this.$t('follow'),
+                    "value": "follow"
+                },
+                {
+                    "text": this.$t('wholeFile'),
+                    "value": "wholeFile"
+                }
+            ]
         }
-      ]
+    },
+    computed: {
+        taskId: function () {
+            return this.$route.params.taskId;
+        }
+    },
+    methods: {
+        connect() {
+            let lineCount = 0;
+            const outputElem = document.getElementById("log-tail-output")
+            outputElem.replaceChildren();
+            if (this.socket !== null) {
+                this.socket.close();
+            }
+
+            const n = this.mode === "follow" ? 32 : 9999999999;
+            if (window.location.protocol === "https:") {
+                this.socket = new WebSocket(`wss://${window.location.host}/log/${this.taskId}?n=${n}`);
+            } else {
+                this.socket = new WebSocket(`ws://${window.location.host}/log/${this.taskId}?n=${n}`);
+            }
+            this.socket.onopen = () => {
+                this.socket.send("Hello from client");
+            }
+
+            this.socket.onmessage = e => {
+                let message;
+                try {
+                    message = JSON.parse(e.data);
+                } catch {
+                    console.error(e.data)
+                    return;
+                }
+
+                if ("ping" in message) {
+                    return;
+                }
+
+                if (message.level === undefined) {
+
+                    if ("stderr" in message) {
+                        message.level = "ERROR";
+                        message.message = message["stderr"];
+                    } else {
+                        message.level = "ADMIN";
+                        message.message = message["sist2-admin"];
+                    }
+                    message.datetime = ""
+                    message.filepath = ""
+                }
+
+                if (this.levels.indexOf(message.level) < this.levels.indexOf(this.logLevel)) {
+                    return;
+                }
+
+                const logLine = `${message.datetime} [${message.level} ${message.filepath}] ${message.message}`;
+
+                const span = document.createElement("span");
+                span.setAttribute("class", message.level);
+                span.appendChild(document.createTextNode(logLine));
+
+                outputElem.appendChild(span);
+                lineCount += 1;
+
+                if (this.mode === "follow" && lineCount >= n) {
+                    outputElem.firstChild.remove();
+                }
+            }
+        }
+    },
+    mounted() {
+        this.connect()
     }
-  },
-  computed: {
-    taskId: function () {
-      return this.$route.params.taskId;
-    }
-  },
-  methods: {
-    connect() {
-      let lineCount = 0;
-      const outputElem = document.getElementById("log-tail-output")
-      outputElem.replaceChildren();
-      if (this.socket !== null) {
-        this.socket.close();
-      }
-
-      const n = this.mode === "follow" ? 32 : 9999999999;
-      this.socket = new WebSocket(`ws://${window.location.host}/log/${this.taskId}?n=${n}`);
-      this.socket.onopen = () => {
-        this.socket.send("Hello from client");
-      }
-
-      this.socket.onmessage = e => {
-        let message;
-        try {
-          message = JSON.parse(e.data);
-        } catch {
-          console.error(e.data)
-          return;
-        }
-
-        if ("ping" in message) {
-          return;
-        }
-
-        if (message.level === undefined) {
-
-          if ("stderr" in message) {
-            message.level = "ERROR";
-            message.message = message["stderr"];
-          } else {
-            message.level = "ADMIN";
-            message.message = message["sist2-admin"];
-          }
-          message.datetime = ""
-          message.filepath = ""
-        }
-
-        if (this.levels.indexOf(message.level) < this.levels.indexOf(this.logLevel)) {
-          return;
-        }
-
-        const logLine = `${message.datetime} [${message.level} ${message.filepath}] ${message.message}`;
-
-        const span = document.createElement("span");
-        span.setAttribute("class", message.level);
-        span.appendChild(document.createTextNode(logLine));
-
-        outputElem.appendChild(span);
-        lineCount += 1;
-
-        if (this.mode === "follow" && lineCount >= n) {
-          outputElem.firstChild.remove();
-        }
-      }
-    }
-  },
-  mounted() {
-    this.connect()
-  }
 }
 
 </script>
 
 <style>
 #log-tail-output span {
-  display: block;
+    display: block;
 }
 
 span.DEBUG {
-  color: #9E9E9E;
+    color: #9E9E9E;
 }
 
 span.WARNING {
-  color: #FFB300;
+    color: #FFB300;
 }
 
 span.INFO {
-  color: #039BE5;
+    color: #039BE5;
 }
 
 span.ERROR {
-  color: #F4511E;
+    color: #F4511E;
 }
 
 span.FATAL {
-  color: #F4511E;
+    color: #F4511E;
 }
 
 span.ADMIN {
-  color: #ee05ff;
+    color: #ee05ff;
 }
 
 
 #log-tail-output {
-  font-size: 13px;
-  font-family: monospace;
+    font-size: 13px;
+    font-family: monospace;
 
-  padding: 6px;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  margin: 3px;
-  white-space: pre;
-  color: #000;
-  overflow: hidden;
+    padding: 6px;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin: 3px;
+    white-space: pre;
+    color: #000;
+    overflow: hidden;
 }
 </style>
\ No newline at end of file