Logs inside the WebUI (#634)

src_assets/common/assets/web/troubleshooting.html

@@ -16,11 +16,7 @@
         Error while closing Appplication
       </div>
       <div>
-        <button
-          class="btn btn-warning"
-          :disabled="closeAppPressed"
-          @click="closeApp"
-        >
+        <button class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
           Force Close
         </button>
       </div>
@@ -39,16 +35,28 @@
         Error while unpairing
       </div>
       <div>
-        <button
-          class="btn btn-danger"
-          :disabled="unpairAllPressed"
-          @click="unpairAll"
-        >
+        <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
           Unpair All
         </button>
       </div>
     </div>
   </div>
+  <!--Logs-->
+  <div class="card p-2 my-4">
+    <div class="card-body">
+      <h2>Logs</h2>
+      <br />
+      <div class="d-flex justify-content-between align-items-baseline py-2">
+        <p>See the logs uploaded by Sunshine</p>
+        <input type="text" class="form-control" v-model="logFilter" placeholder="Find..." style="width: 300px">
+      </div>
+      <div>
+        <div class="troubleshooting-logs">
+          <button class="copy-icon"><i class="fas fa-copy " @click="copyLogs"></i></button>{{actualLogs}}
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <script>
@@ -60,9 +68,36 @@
         closeAppStatus: null,
         unpairAllPressed: false,
         unpairAllStatus: null,
+        logs: 'Loading...',
+        logFilter: null,
+        logInterval: null,
       };
     },
+    computed: {
+      actualLogs(){
+        if(!this.logFilter)return this.logs;
+        let lines = this.logs.split("\n");
+        lines = lines.filter(x => x.indexOf(this.logFilter) != -1);
+        return lines.join("\n");
+      }
+    },
+    created() {
+      this.logInterval = setInterval(() => {
+        this.refreshLogs();
+      }, 5000);
+      this.refreshLogs();
+    },
+    beforeDestroy(){
+      clearInterval(this.logInterval);
+    },
     methods: {
+      refreshLogs() {
+        fetch("/api/logs",)
+          .then((r) => r.text())
+          .then((r) => {
+            this.logs = r;
+          });
+      },
       closeApp() {
         this.closeAppPressed = true;
         fetch("/api/apps/close", { method: "POST" })
@@ -87,6 +122,40 @@
             }, 5000);
           });
       },
+      copyLogs(){
+        navigator.clipboard.writeText(this.actualLogs);
+      }
     },
   });
 </script>
+
+<style>
+  .troubleshooting-logs {
+    white-space: pre;
+    font-family: monospace;
+    overflow: auto;
+    max-height: 500px;
+    min-height: 500px;
+    font-size: 16px;
+    position: relative;
+  }
+
+  .copy-icon {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    padding: 8px;
+    cursor: pointer;
+    color: rgba(0,0,0,1);
+    appearance: none;
+    border: none;
+    background: none;
+  }
+
+  .copy-icon:hover {
+    color: rgba(0,0,0,0.75);
+  }
+  .copy-icon:active {
+    color: rgba(0,0,0,1);
+  }
+</style>