Real browser monitor type (#3308)

src/pages/Details.vue

@@ -68,6 +68,7 @@
                 </div>
             </div>
 
+            <!-- Stats -->
             <div class="shadow-box big-padding text-center stats">
                 <div class="row">
                     <div v-if="monitor.type !== 'group'" class="col-12 col-sm col row d-flex align-items-center d-sm-block">
@@ -131,6 +132,15 @@
                 </div>
             </div>
 
+            <!-- Screenshot -->
+            <div v-if="monitor.type === 'real-browser'" class="shadow-box">
+                <div class="row">
+                    <div class="col-md-6">
+                        <img :src="screenshotURL" alt style="width: 100%;">
+                    </div>
+                </div>
+            </div>
+
             <div class="shadow-box table-shadow-box">
                 <div class="dropdown dropdown-clear-data">
                     <button class="btn btn-sm btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">
@@ -217,6 +227,7 @@ import Tag from "../components/Tag.vue";
 import CertificateInfo from "../components/CertificateInfo.vue";
 import { getMonitorRelativeURL } from "../util.ts";
 import { URL } from "whatwg-url";
+import { getResBaseURL } from "../util-frontend";
 
 export default {
     components: {
@@ -242,6 +253,7 @@ export default {
                 hideCount: true,
                 chunksNavigation: "scroll",
             },
+            cacheTime: Date.now(),
         };
     },
     computed: {
@@ -251,6 +263,10 @@ export default {
         },
 
         lastHeartBeat() {
+            // Also trigger screenshot refresh here
+            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+            this.cacheTime = Date.now();
+
             if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
                 return this.$root.lastHeartbeatList[this.monitor.id];
             }
@@ -325,11 +341,16 @@ export default {
         pushURL() {
             return this.$root.baseURL + "/api/push/" + this.monitor.pushToken + "?status=up&msg=OK&ping=";
         },
+
+        screenshotURL() {
+            return getResBaseURL() + this.monitor.screenshot + "?time=" + this.cacheTime;
+        }
     },
     mounted() {
 
     },
     methods: {
+        getResBaseURL,
         /** Request a test notification be sent for this monitor */
         testNotification() {
             this.$root.getSocket().emit("testNotification", this.monitor.id);