[Snapshots] Add download as PNG and JPG buttons (#3123)

* working export

* fix lint errors

src/plugins/condition/components/ConditionDescription.vue

@@ -27,13 +27,13 @@
     >
         {{ condition.configuration.name }}
     </span>
-    <span class="c-style__condition-desc__text"
-          v-if="!condition.isDefault"
+    <span v-if="!condition.isDefault"
+          class="c-style__condition-desc__text"
     >
         {{ description }}
     </span>
-    <span class="c-style__condition-desc__text"
-          v-else
+    <span v-else
+          class="c-style__condition-desc__text"
     >
         Match if no other condition is matched
     </span>

src/plugins/notebook/components/notebook-embed.vue

@@ -60,6 +60,7 @@ export default {
     },
     mounted() {
         this.addPopupMenuItems();
+        this.exportImageService = this.openmct.$injector.get('exportImageService');
     },
     methods: {
         addPopupMenuItems() {
@@ -205,7 +206,7 @@ export default {
         },
         openSnapshot() {
             const self = this;
-            const snapshot = new Vue({
+            this.snapshot = new Vue({
                 data: () => {
                     return {
                         embed: self.embed
@@ -213,14 +214,15 @@ export default {
                 },
                 methods: {
                     formatTime: self.formatTime,
-                    annotateSnapshot: self.annotateSnapshot
+                    annotateSnapshot: self.annotateSnapshot,
+                    exportImage: self.exportImage
                 },
                 template: SnapshotTemplate
             });
 
             const snapshotOverlay = this.openmct.overlays.overlay({
-                element: snapshot.$mount().$el,
-                onDestroy: () => { snapshot.$destroy(true) },
+                element: this.snapshot.$mount().$el,
+                onDestroy: () => { this.snapshot.$destroy(true) },
                 size: 'large',
                 dismissable: true,
                 buttons: [
@@ -234,6 +236,15 @@ export default {
                 ]
             });
         },
+        exportImage(type) {
+            let element = this.snapshot.$refs['snapshot-image'];
+
+            if (type === 'png') {
+                this.exportImageService.exportPNG(element, this.embed.name);
+            } else {
+                this.exportImageService.exportJPG(element, this.embed.name);
+            }
+        },
         previewEmbed() {
             const self = this;
             const previewAction = new PreviewAction(self.openmct);

src/plugins/notebook/components/snapshot-template.html

@@ -15,14 +15,32 @@
             <div class="l-browse-bar__snapshot-datetime">
                 SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
             </div>
+            <span class="c-button-set c-button-set--strip-h">
+                <button 
+                    class="c-button icon-download"
+                    title="Export This View's Data as PNG"
+                    @click="exportImage('png')"
+                >
+                    <span class="c-button__label">PNG</span>
+                </button>
+                <button 
+                    class="c-button"
+                    title="Export This View's Data as JPG"
+                    @click="exportImage('jpg')"
+                >
+                    <span class="c-button__label">JPG</span>
+                </button>
+            </span>
             <a class="l-browse-bar__annotate-button c-button icon-pencil" title="Annotate" @click="annotateSnapshot">
                 <span class="title-label">Annotate</span>
             </a>
         </div>
     </div>
 
-    <div class="c-notebook-snapshot__image"
-         :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
+    <div
+        ref="snapshot-image"
+        class="c-notebook-snapshot__image"
+        :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
     >
     </div>
 </div>