Zoom in on real browser screenshot (#3925)

* Screenshot in modal

* Update src/components/ScreenshotDialog.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Update src/pages/Details.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Added title

* Update ScreenshotDialog.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Add translations

---------

Co-authored-by: Frank Elsinga <frank@elsinga.de>

src/assets/app.scss

@@ -635,6 +635,10 @@ $shadow-box-padding: 20px;
     }
 }
 
+.zoom-cursor {
+  cursor: zoom-in;
+}
+
 // Localization
 
 @import "localization.scss";

src/components/ScreenshotDialog.vue

@@ -0,0 +1,52 @@
+<template>
+    <div ref="modal" class="modal fade" tabindex="-1">
+        <div class="modal-dialog modal-xl modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        {{ $t("Browser Screenshot") }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                </div>
+                <div class="modal-body"></div>
+                <img :src="imageURL" alt="screenshot of the website">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap";
+
+export default {
+    props: {
+        imageURL: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            modal: null,
+        };
+    },
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+        show() {
+            this.modal.show();
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>

src/lang/en.json

@@ -859,5 +859,6 @@
     "successEnabled": "Enabled Successfully.",
     "tagNotFound": "Tag not found.",
     "foundChromiumVersion": "Found Chromium/Chrome. Version: {0}",
-    "GrafanaOncallUrl": "Grafana Oncall URL"
+    "GrafanaOncallUrl": "Grafana Oncall URL",
+    "Browser Screenshot": "Browser Screenshot"
 }

src/pages/Details.vue

@@ -184,9 +184,10 @@
             <!-- Screenshot -->
             <div v-if="monitor.type === 'real-browser'" class="shadow-box">
                 <div class="row">
-                    <div class="col-md-6">
+                    <div class="col-md-6 zoom-cursor">
-                        <img :src="screenshotURL" alt style="width: 100%;">
+                        <img :src="screenshotURL" style="width: 100%;" alt="screenshot of the website" @click="showScreenshotDialog">
                     </div>
+                    <ScreenshotDialog ref="screenshotDialog" :imageURL="screenshotURL" />
                 </div>
             </div>
 
@@ -283,6 +284,7 @@ import "prismjs/components/prism-javascript";
 import "prismjs/components/prism-css";
 import { PrismEditor } from "vue-prism-editor";
 import "vue-prism-editor/dist/prismeditor.min.css";
+import ScreenshotDialog from "../components/ScreenshotDialog.vue";
 
 export default {
     components: {
@@ -297,6 +299,7 @@ export default {
         Tag,
         CertificateInfo,
         PrismEditor,
+        ScreenshotDialog
     },
     data() {
         return {
@@ -476,6 +479,14 @@ export default {
             this.$refs.confirmDelete.show();
         },
 
+        /**
+         * Show Screenshot Dialog
+         * @returns {void}
+         */
+        showScreenshotDialog() {
+            this.$refs.screenshotDialog.show();
+        },
+
         /**
          * Show dialog to confirm clearing events
          * @returns {void}