From 63d57d27ca90319a179cf2fa2ff30887b5785cde Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 7 May 2024 16:07:37 +0100
Subject: [PATCH 1/8] Add front end API for accessing new snapshots api

---
 frontend/src/api/snapshots.js | 61 +++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 frontend/src/api/snapshots.js

diff --git a/frontend/src/api/snapshots.js b/frontend/src/api/snapshots.js
new file mode 100644
index 0000000000..b0c9d4359b
--- /dev/null
+++ b/frontend/src/api/snapshots.js
@@ -0,0 +1,61 @@
+import product from '../services/product.js'
+import daysSince from '../utils/daysSince.js'
+
+import client from './client.js'
+
+/**
+ * Get summary of a snapshot
+ */
+const getSummary = (snapshotId) => {
+    return client.get(`/api/v1/snapshots/${snapshotId}`).then(res => {
+        res.data.createdSince = daysSince(res.data.createdAt)
+        res.data.updatedSince = daysSince(res.data.updatedAt)
+        return res.data
+    })
+}
+
+/**
+ * Get full snapshot
+ */
+const getFullSnapshot = (snapshotId) => {
+    return client.get(`/api/v1/snapshots/${snapshotId}/full`).then(res => {
+        res.data.createdSince = daysSince(res.data.createdAt)
+        res.data.updatedSince = daysSince(res.data.updatedAt)
+        return res.data
+    })
+}
+
+/**
+ * Export a snapshot for later import in another project or platform
+ */
+const exportSnapshot = (snapshotId, options) => {
+    return client.post(`/api/v1/snapshots/${snapshotId}/export`, options).then(res => {
+        const props = {
+            'snapshot-id': res.data.id
+        }
+        product.capture('$ff-snapshot-export', props, {})
+        return res.data
+    })
+}
+
+/**
+ * Delete a snapshot
+ * @param {String} snapshotId - id of the snapshot
+ */
+const deleteSnapshot = async (snapshotId) => {
+    return client.delete(`/api/v1/snapshots/${snapshotId}`).then(res => {
+        const props = {
+            'snapshot-id': snapshotId,
+            'deleted-at': (new Date()).toISOString()
+        }
+        product.capture('$ff-snapshot-deleted', props, {})
+        return res.data
+    })
+}
+
+export default {
+    deleteSnapshot,
+    getFullSnapshot,
+    exportSnapshot,
+    getSummary
+}

From b9cf130379abac324b28340a86cfba8ef1548ca5 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 7 May 2024 16:18:09 +0100
Subject: [PATCH 2/8] add snapshot view dialog

---
 .../dialogs/SnapshotViewerDialog.vue          | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 frontend/src/components/dialogs/SnapshotViewerDialog.vue

diff --git a/frontend/src/components/dialogs/SnapshotViewerDialog.vue b/frontend/src/components/dialogs/SnapshotViewerDialog.vue
new file mode 100644
index 0000000000..e14ef74858
--- /dev/null
+++ b/frontend/src/components/dialogs/SnapshotViewerDialog.vue
@@ -0,0 +1,68 @@
+<template>
+    <ff-dialog ref="dialog" :header="header" confirm-label="Close" :closeOnConfirm="true" data-el="snapshot-view-dialog" boxClass="!min-w-[80%] !min-h-[80%] !w-[80%] !h-[80%]" contentClass="overflow-hidden" @confirm="confirm()">
+        <template #default>
+            <div ref="viewer" data-el="ff-flow-previewer" class="ff-flow-viewer">
+                Loading...
+            </div>
+        </template>
+        <template #actions>
+            <div class="flex justify-end">
+                <ff-button @click="confirm()">Close</ff-button>
+            </div>
+        </template>
+    </ff-dialog>
+</template>
+<script>
+
+import FlowRenderer from '@flowfuse/flow-renderer'
+
+export default {
+    name: 'SnapshotViewerDialog',
+    components: {
+        // FlowViewer
+    },
+    setup () {
+        return {
+            show (snapshot) {
+                this.$refs.dialog.show()
+                this.snapshot = snapshot
+                setTimeout(() => {
+                    this.renderFlows()
+                }, 20)
+            }
+        }
+    },
+    data () {
+        return {
+            snapshot: []
+        }
+    },
+    computed: {
+        flow () {
+            return this.snapshot?.flows?.flows || []
+        },
+        header () {
+            return this.snapshot?.name || 'Snapshot'
+        }
+    },
+    mounted () {
+    },
+    methods: {
+        confirm () {
+            this.$refs.dialog.close()
+        },
+        renderFlows () {
+            const flowRenderer = new FlowRenderer()
+            flowRenderer.renderFlows(this.flow, {
+                container: this.$refs.viewer
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+.ff-flow-viewer {
+    height: 100%;
+}
+</style>

From 44526e66ca05a26cff54c7049b7e4399d8fe2936 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 7 May 2024 17:06:50 +0100
Subject: [PATCH 3/8] allow custom styles on dialog boc

---
 frontend/src/ui-components/components/DialogBox.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ui-components/components/DialogBox.vue b/frontend/src/ui-components/components/DialogBox.vue
index 45d6692dc4..0da16717a9 100644
--- a/frontend/src/ui-components/components/DialogBox.vue
+++ b/frontend/src/ui-components/components/DialogBox.vue
@@ -1,8 +1,8 @@
 <template>
     <div ref="container" class="ff-dialog-container" :class="'ff-dialog-container--' + (open ? 'open' : 'closed')">
-        <div class="ff-dialog-box">
+        <div class="ff-dialog-box" :class="boxClass">
             <div class="ff-dialog-header" data-sentry-unmask>{{ header }}</div>
-            <div ref="content" class="ff-dialog-content">
+            <div ref="content" class="ff-dialog-content" :class="contentClass">
                 <slot></slot>
             </div>
             <div class="ff-dialog-actions">
@@ -38,6 +38,14 @@ export default {
         closeOnConfirm: {
             type: Boolean,
             default: true
+        },
+        boxClass: {
+            type: String,
+            default: ''
+        },
+        contentClass: {
+            type: String,
+            default: ''
         }
     },
     emits: ['cancel', 'confirm'],

From 94bbea9ef8b56932fe08ba95058b9da908e43b90 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 7 May 2024 17:07:32 +0100
Subject: [PATCH 4/8] add "view snapshot" kebab menu entry for "instance"

---
 frontend/src/pages/instance/Snapshots/index.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/instance/Snapshots/index.vue b/frontend/src/pages/instance/Snapshots/index.vue
index 178c9a8744..59e1d92688 100644
--- a/frontend/src/pages/instance/Snapshots/index.vue
+++ b/frontend/src/pages/instance/Snapshots/index.vue
@@ -17,6 +17,7 @@
                 </template>
                 <template v-if="showContextMenu" #context-menu="{row}">
                     <ff-list-item v-if="hasPermission('project:snapshot:rollback')" label="Rollback" @click="showRollbackDialog(row)" />
+                    <ff-list-item v-if="hasPermission('snapshot:full')" label="View Snapshot" @click="showViewSnapshotDialog(row)" />
                     <ff-list-item v-if="hasPermission('project:snapshot:export')" label="Download Snapshot" @click="showDownloadSnapshotDialog(row)" />
                     <ff-list-item v-if="hasPermission('project:snapshot:read')" label="Download package.json" @click="downloadSnapshotPackage(row)" />
                     <ff-list-item v-if="hasPermission('project:snapshot:set-target')" label="Set as Device Target" @click="showDeviceTargetDialog(row)" />
@@ -50,6 +51,7 @@
         </template>
         <SnapshotCreateDialog ref="snapshotCreateDialog" data-el="dialog-create-snapshot" :project="instance" @snapshot-created="snapshotCreated" />
         <SnapshotExportDialog ref="snapshotExportDialog" data-el="dialog-export-snapshot" :project="instance" />
+        <SnapshotViewerDialog ref="snapshotViewerDialog" data-el="dialog-view-snapshot" />
     </div>
 </template>
 
@@ -60,9 +62,11 @@ import { mapState } from 'vuex'
 
 import InstanceApi from '../../../api/instances.js'
 import SnapshotApi from '../../../api/projectSnapshots.js'
+import SnapshotsApi from '../../../api/snapshots.js'
 
 import EmptyState from '../../../components/EmptyState.vue'
 import SectionTopMenu from '../../../components/SectionTopMenu.vue'
+import SnapshotViewerDialog from '../../../components/dialogs/SnapshotViewerDialog.vue'
 import UserCell from '../../../components/tables/cells/UserCell.vue'
 import permissionsMixin from '../../../mixins/Permissions.js'
 import Alerts from '../../../services/alerts.js'
@@ -81,6 +85,7 @@ export default {
         EmptyState,
         SnapshotCreateDialog,
         SnapshotExportDialog,
+        SnapshotViewerDialog,
         PlusSmIcon
     },
     mixins: [permissionsMixin],
@@ -102,7 +107,7 @@ export default {
     computed: {
         ...mapState('account', ['teamMembership']),
         showContextMenu: function () {
-            return this.hasPermission('project:snapshot:rollback') || this.hasPermission('project:snapshot:set-target') || this.hasPermission('project:snapshot:delete') || this.hasPermission('project:snapshot:export')
+            return this.hasPermission('project:snapshot:rollback') || this.hasPermission('project:snapshot:set-target') || this.hasPermission('project:snapshot:delete') || this.hasPermission('project:snapshot:export') || this.hasPermission('snapshot:full')
         },
         columns () {
             const cols = [
@@ -259,6 +264,14 @@ export default {
         },
         showDownloadSnapshotDialog (snapshot) {
             this.$refs.snapshotExportDialog.show(snapshot)
+        },
+        showViewSnapshotDialog (snapshot) {
+            SnapshotsApi.getFullSnapshot(snapshot.id).then((data) => {
+                this.$refs.snapshotViewerDialog.show(data)
+            }).catch(err => {
+                console.error(err)
+                Alerts.emit('Failed to get snapshot.', 'warning')
+            })
         }
     }
 }

From e204187331c2da2f43d6747490ce43ca2719ed1a Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 7 May 2024 17:07:57 +0100
Subject: [PATCH 5/8] add "view snapshot" kebab menu entry for "device"

---
 frontend/src/pages/device/Snapshots/index.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/device/Snapshots/index.vue b/frontend/src/pages/device/Snapshots/index.vue
index 09a14ff8bd..858e763b54 100644
--- a/frontend/src/pages/device/Snapshots/index.vue
+++ b/frontend/src/pages/device/Snapshots/index.vue
@@ -21,6 +21,7 @@
                     <ff-button kind="primary" data-action="create-snapshot" :disabled="!developerMode || busyMakingSnapshot" @click="showCreateSnapshotDialog"><template #icon-left><PlusSmIcon /></template>Create Snapshot</ff-button>
                 </template>
                 <template v-if="showContextMenu" #context-menu="{row}">
+                    <ff-list-item v-if="hasPermission('snapshot:full')" label="View Snapshot" @click="showViewSnapshotDialog(row)" />
                     <ff-list-item v-if="hasPermission('device:snapshot:delete') && rowIsThisDevice(row)" label="Delete Snapshot" kind="danger" @click="showDeleteSnapshotDialog(row)" />
                     <ff-list-item v-if="!rowIsThisDevice(row)" disabled label="No actions available" kind="info" />
                 </template>
@@ -52,6 +53,7 @@
             </EmptyState>
         </template>
         <SnapshotCreateDialog ref="snapshotCreateDialog" title="Create Device Snapshot" data-el="dialog-create-device-snapshot" :show-set-as-target="true" :device="device" @device-upload-success="onSnapshotCreated" @device-upload-failed="onSnapshotFailed" @canceled="onSnapshotCancel" />
+        <SnapshotViewerDialog ref="snapshotViewerDialog" data-el="dialog-view-snapshot" />
     </div>
 </template>
 
@@ -62,9 +64,11 @@ import { mapState } from 'vuex'
 
 import ApplicationApi from '../../../api/application.js'
 import DeviceApi from '../../../api/devices.js'
+import SnapshotApi from '../../../api/snapshots.js'
 
 import EmptyState from '../../../components/EmptyState.vue'
 import SectionTopMenu from '../../../components/SectionTopMenu.vue'
+import SnapshotViewerDialog from '../../../components/dialogs/SnapshotViewerDialog.vue'
 import UserCell from '../../../components/tables/cells/UserCell.vue'
 import permissionsMixin from '../../../mixins/Permissions.js'
 import Alerts from '../../../services/alerts.js'
@@ -82,6 +86,7 @@ export default {
         SectionTopMenu,
         EmptyState,
         SnapshotCreateDialog,
+        SnapshotViewerDialog,
         PlusSmIcon
     },
     mixins: [permissionsMixin],
@@ -105,7 +110,7 @@ export default {
     computed: {
         ...mapState('account', ['teamMembership', 'features']),
         showContextMenu: function () {
-            return this.hasPermission('device:snapshot:delete')
+            return this.hasPermission('snapshot:delete') || this.hasPermission('snapshot:export')
         },
         columns () {
             const cols = [
@@ -222,7 +227,7 @@ export default {
                 kind: 'danger',
                 confirmLabel: 'Delete'
             }, async () => {
-                await DeviceApi.deleteSnapshot(this.device.id, snapshot.id)
+                await SnapshotApi.deleteSnapshot(snapshot.id)
                 const index = this.snapshots.indexOf(snapshot)
                 this.snapshots.splice(index, 1)
                 Alerts.emit('Successfully deleted snapshot.', 'confirmation')
@@ -241,7 +246,7 @@ export default {
         },
         onSnapshotFailed (err) {
             console.error(err)
-            Alerts.emit('Failed to create snapshot of device.', 'error')
+            Alerts.emit('Failed to create snapshot of device.', 'warning')
             this.busyMakingSnapshot = false
         },
         onSnapshotCancel () {
@@ -288,6 +293,14 @@ export default {
                     Alerts.emit('Failed to apply snapshot: ' + err.toString(), 'warning', 7500)
                 }
             })
+        },
+        showViewSnapshotDialog (snapshot) {
+            SnapshotApi.getFullSnapshot(snapshot.id).then((data) => {
+                this.$refs.snapshotViewerDialog.show(data)
+            }).catch(err => {
+                console.error(err)
+                Alerts.emit('Failed to get snapshot.', 'warning')
+            })
         }
     }
 }

From 3b4b38b5cd8b5448a1d1c1b046749fc88fe48fbe Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 7 May 2024 17:09:02 +0100
Subject: [PATCH 6/8] add kebab menu with "view snapshot" entry for
 "application" view

---
 frontend/src/pages/application/Snapshots.vue | 26 +++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/application/Snapshots.vue b/frontend/src/pages/application/Snapshots.vue
index c99e6f64c4..1110e77c9c 100644
--- a/frontend/src/pages/application/Snapshots.vue
+++ b/frontend/src/pages/application/Snapshots.vue
@@ -11,7 +11,11 @@
         </div>
         <ff-loading v-if="loading" message="Loading Snapshots..." />
         <template v-if="snapshots.length > 0">
-            <ff-data-table data-el="snapshots" class="space-y-4" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots..." />
+            <ff-data-table data-el="snapshots" class="space-y-4" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
+                <template #context-menu="{row}">
+                    <ff-list-item :disabled="!canViewSnapshot(row)" label="View Snapshot" @click="showViewSnapshotDialog(row)" />
+                </template>
+            </ff-data-table>
         </template>
         <template v-else-if="!loading">
             <EmptyState>
@@ -32,17 +36,22 @@
             </EmptyState>
         </template>
     </div>
+    <SnapshotViewerDialog ref="snapshotViewerDialog" data-el="dialog-view-snapshot" />
 </template>
 
 <script>
 import { markRaw } from 'vue'
+import { mapState } from 'vuex'
 
 import ApplicationApi from '../../api/application.js'
+import SnapshotsApi from '../../api/snapshots.js'
 
 import EmptyState from '../../components/EmptyState.vue'
 import SectionTopMenu from '../../components/SectionTopMenu.vue'
+import SnapshotViewerDialog from '../../components/dialogs/SnapshotViewerDialog.vue'
 import UserCell from '../../components/tables/cells/UserCell.vue'
 import permissionsMixin from '../../mixins/Permissions.js'
+import Alerts from '../instance/Settings/Alerts.vue'
 
 // Table Cells
 import DaysSince from './Snapshots/components/cells/DaysSince.vue'
@@ -53,6 +62,7 @@ export default {
     name: 'ApplicationSnapshots',
     components: {
         SectionTopMenu,
+        SnapshotViewerDialog,
         EmptyState
     },
     mixins: [permissionsMixin],
@@ -102,6 +112,9 @@ export default {
             ]
         }
     },
+    computed: {
+        ...mapState('account', ['teamMembership'])
+    },
     mounted () {
         this.loadSnapshots()
     },
@@ -111,6 +124,17 @@ export default {
             const data = await ApplicationApi.getSnapshots(this.application.id, null, null, null)
             this.snapshots = [...data.snapshots]
             this.loading = false
+        },
+        canViewSnapshot: function (row) {
+            return this.hasPermission('snapshot:full')
+        },
+        showViewSnapshotDialog (row) {
+            SnapshotsApi.getFullSnapshot(row.id).then((data) => {
+                this.$refs.snapshotViewerDialog.show(data)
+            }).catch(err => {
+                console.error(err)
+                Alerts.emit('Failed to get snapshot.', 'warning')
+            })
         }
     }
 }

From f893fb3bfd41e96b85e3432bc49a02b4ab362d78 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 7 May 2024 17:09:43 +0100
Subject: [PATCH 7/8] correction to permission description

---
 forge/lib/permissions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forge/lib/permissions.js b/forge/lib/permissions.js
index 91a07e05eb..6ffde9ec5a 100644
--- a/forge/lib/permissions.js
+++ b/forge/lib/permissions.js
@@ -81,7 +81,7 @@ const Permissions = {
 
     // Snapshots (common)
     'snapshot:meta': { description: 'View a Snapshot', role: Roles.Viewer },
-    'snapshot:full': { description: 'Export a Snapshot', role: Roles.Member },
+    'snapshot:full': { description: 'View the full a Snapshot', role: Roles.Member },
     'snapshot:export': { description: 'Export a Snapshot', role: Roles.Member },
     'snapshot:delete': { description: 'Delete a Snapshot', role: Roles.Owner },
 

From 3a0d75e3dbb803d4a3653fdfb83d62adb43c80be Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Wed, 8 May 2024 10:23:42 +0100
Subject: [PATCH 8/8] add e2e tests for snapshot viewing

---
 .../fixtures/snapshots/device-snapshots.json  |  23 ++++
 .../snapshots/device2-full-snapshot1.json     |  20 ++++
 .../snapshots/instance-snapshots.json         |  23 ++++
 .../snapshots/instance2-full-snapshot2.json   |  20 ++++
 .../tests-ee/devices/snapshots.spec.js        |  29 +++++
 .../tests/applications/snapshots.spec.js      | 100 ++++++++++++++++++
 .../cypress/tests/instances/snapshots.spec.js |  38 +++++--
 7 files changed, 247 insertions(+), 6 deletions(-)
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/device-snapshots.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/device2-full-snapshot1.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json
 create mode 100644 test/e2e/frontend/cypress/tests/applications/snapshots.spec.js

diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/device-snapshots.json b/test/e2e/frontend/cypress/fixtures/snapshots/device-snapshots.json
new file mode 100644
index 0000000000..fc30cfc533
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/device-snapshots.json
@@ -0,0 +1,23 @@
+{
+    "count": 1,
+    "snapshots": [
+        {
+            "createdAt": "2024-01-01T11:22:33.444Z",
+            "updatedAt": "2024-01-01T11:22:33.444Z",
+            "ownerType": "device",
+            "deviceId": "2",
+            "device": {
+                "id": "2",
+                "name": "device-2",
+                "type": "type-1",
+                "lastSeenMs": null,
+                "status": "running",
+                "mode": "autonomous",
+                "isDeploying": false
+            },
+            "id": "1",
+            "name": "application device-2 snapshot-1",
+            "description": "a device snapshot"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/device2-full-snapshot1.json b/test/e2e/frontend/cypress/fixtures/snapshots/device2-full-snapshot1.json
new file mode 100644
index 0000000000..1ccb2f68d4
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/device2-full-snapshot1.json
@@ -0,0 +1,20 @@
+{
+  "flows": {
+    "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}]
+  },
+  "id": "KR6Ov5pj5z",
+  "name": "application device snapshot 1",
+  "description": "a device snapshot",
+  "createdAt": "2024-01-01T11:22:33.444Z",
+  "updatedAt": "2024-01-01T11:22:33.444Z",
+  "ownerType": "device",
+  "settings": {
+    "settings": {},
+    "env": {},
+    "modules": {
+      "@flowfuse/nr-file-nodes": "0.0.5",
+      "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
+      "node-red": "3.1.9"
+    }
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json b/test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json
new file mode 100644
index 0000000000..e4e9ccb4d1
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json
@@ -0,0 +1,23 @@
+{
+    "count": 1,
+    "snapshots": [
+        {
+            "createdAt": "2024-01-01T11:22:33.444Z",
+            "updatedAt": "2024-01-01T11:22:33.444Z",
+            "ownerType": "instance",
+            "projectId": "2",
+            "project": {
+                "id": "2",
+                "name": "instance-2",
+                "type": "type-1",
+                "lastSeenMs": null,
+                "status": "running",
+                "mode": "autonomous",
+                "isDeploying": false
+            },
+            "id": "2",
+            "name": "instance-2 snapshot-2",
+            "description": "an instance snapshot"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json b/test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json
new file mode 100644
index 0000000000..c9bcc9fc88
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json
@@ -0,0 +1,20 @@
+{
+  "flows": {
+    "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}]
+  },
+  "id": "2",
+  "name": "instance-2 snapshot-2",
+  "description": "an instance snapshot",
+  "createdAt": "2024-01-01T11:22:33.444Z",
+  "updatedAt": "2024-01-01T11:22:33.444Z",
+  "ownerType": "instance",
+  "settings": {
+    "settings": {},
+    "env": {},
+    "modules": {
+      "@flowfuse/nr-file-nodes": "0.0.5",
+      "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
+      "node-red": "3.1.9"
+    }
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js b/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
index 9de6093bd6..6b6f5e55bd 100644
--- a/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
@@ -1,3 +1,11 @@
+/// <reference types="cypress" />
+
+import deviceSnapshots from '../../fixtures/snapshots/device-snapshots.json'
+import deviceFullSnapshot from '../../fixtures/snapshots/device2-full-snapshot1.json'
+
+const IDX_VIEW_SNAPSHOT = 0
+// const IDX_DELETE_SNAPSHOT = 1
+
 describe('FlowForge - Devices - With Billing', () => {
     beforeEach(() => {
         cy.enableBilling()
@@ -75,4 +83,25 @@ describe('FlowForge - Devices - With Billing', () => {
             cy.get('[data-el="snapshots"] tbody').find('tr').should('have.length', snapshots)
         })
     })
+
+    it('provides functionality to view a snapshot', () => {
+        cy.intercept('GET', '/api/*/applications/*/snapshots*', deviceSnapshots).as('getSnapshots')
+        cy.intercept('GET', '/api/*/snapshots/*/full', deviceFullSnapshot).as('fullSnapshot')
+
+        cy.contains('span', 'application-device-a').click()
+        cy.get('[data-nav="device-snapshots"]').click()
+
+        // click kebab menu in row 1
+        cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
+        // click the View Snapshot option
+        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_VIEW_SNAPSHOT).click()
+
+        cy.wait('@fullSnapshot')
+
+        // check the snapshot dialog is visible and contains the snapshot name
+        cy.get('[data-el="dialog-view-snapshot"]').should('be.visible')
+        cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-header').contains(deviceFullSnapshot.name)
+        // check an SVG in present the content section
+        cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-content svg').should('exist')
+    })
 })
diff --git a/test/e2e/frontend/cypress/tests/applications/snapshots.spec.js b/test/e2e/frontend/cypress/tests/applications/snapshots.spec.js
new file mode 100644
index 0000000000..d5d45cf394
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests/applications/snapshots.spec.js
@@ -0,0 +1,100 @@
+/// <reference types="cypress" />
+
+import deviceSnapshots from '../../fixtures/snapshots/device-snapshots.json'
+import deviceFullSnapshot from '../../fixtures/snapshots/device2-full-snapshot1.json'
+import instanceSnapshots from '../../fixtures/snapshots/instance-snapshots.json'
+import instanceFullSnapshot from '../../fixtures/snapshots/instance2-full-snapshot2.json'
+const snapshots = {
+    count: 2,
+    snapshots: [deviceSnapshots.snapshots[0], instanceSnapshots.snapshots[0]]
+}
+const emptySnapshots = {
+    count: 0,
+    snapshots: []
+}
+
+const IDX_VIEW_SNAPSHOT = 0
+// const IDX_DELETE_SNAPSHOT = 1
+
+describe('FlowForge - Application - Snapshots', () => {
+    let application
+    function navigateToApplication (teamName, projectName) {
+        cy.request('GET', '/api/v1/user/teams')
+            .then((response) => {
+                const team = response.body.teams.find(
+                    (team) => team.name === teamName
+                )
+                return cy.request('GET', `/api/v1/teams/${team.id}/applications`)
+            })
+            .then((response) => {
+                application = response.body.applications.find(
+                    (app) => app.name === projectName
+                )
+                cy.visit(`/application/${application.id}/instances`)
+                cy.wait('@getApplication')
+            })
+    }
+
+    beforeEach(() => {
+        cy.intercept('GET', '/api/*/applications/*').as('getApplication')
+
+        cy.login('bob', 'bbPassword')
+        cy.home()
+        navigateToApplication('BTeam', 'application-2')
+    })
+
+    it('can navigate to the /snapshots page', () => {
+        cy.visit(`/application/${application.id}`)
+        cy.get('[data-nav="application-snapshots"]').should('exist').click()
+
+        cy.url().should('include', `/application/${application.id}/snapshots`)
+    })
+
+    it('empty state informs users they need to add snapshots', () => {
+        cy.intercept('GET', '/api/*/applications/*/snapshots*', emptySnapshots).as('getSnapshots')
+
+        cy.get('[data-nav="application-snapshots"]').click()
+
+        cy.get('[data-el="empty-state"]').contains('What are Snapshots')
+    })
+
+    it('provides functionality to view a device snapshot', () => {
+        cy.intercept('GET', '/api/*/applications/*/snapshots*', snapshots).as('getSnapshots')
+        cy.intercept('GET', '/api/*/snapshots/*/full', deviceFullSnapshot).as('fullSnapshot')
+
+        cy.get('[data-nav="application-snapshots"]').click()
+
+        // click kebab menu in row 1
+        cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
+        // click the View Snapshot option
+        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_VIEW_SNAPSHOT).click()
+
+        cy.wait('@fullSnapshot')
+
+        // check the snapshot dialog is visible and contains the snapshot name
+        cy.get('[data-el="dialog-view-snapshot"]').should('be.visible')
+        cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-header').contains(deviceFullSnapshot.name)
+        // check an SVG in present the content section
+        cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-content svg').should('exist')
+    })
+
+    it('provides functionality to view an instance snapshot', () => {
+        cy.intercept('GET', '/api/*/applications/*/snapshots*', snapshots).as('getSnapshots')
+        cy.intercept('GET', '/api/*/snapshots/*/full', instanceFullSnapshot).as('fullSnapshot')
+
+        cy.get('[data-nav="application-snapshots"]').click()
+
+        // click kebab menu in row 2
+        cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(1).click()
+        // click the View Snapshot option
+        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_VIEW_SNAPSHOT).click()
+
+        cy.wait('@fullSnapshot')
+
+        // check the snapshot dialog is visible and contains the snapshot name
+        cy.get('[data-el="dialog-view-snapshot"]').should('be.visible')
+        cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-header').contains(instanceFullSnapshot.name)
+        // check an SVG in present the content section
+        cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-content svg').should('exist')
+    })
+})
diff --git a/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js b/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js
index e70a86cf88..d134acc420 100644
--- a/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js
@@ -1,4 +1,12 @@
 /// <reference types="cypress" />
+
+// const IDX_ROLLBACK = 0
+const IDX_VIEW_SNAPSHOT = 1
+const IDX_DOWNLOAD_SNAPSHOT = 2
+const IDX_DOWNLOAD_PACKAGE = 3
+// const IDX_SET_TARGET = 4
+const IDX_DELETE_SNAPSHOT = 5
+
 describe('FlowForge - Instance Snapshots', () => {
     beforeEach(() => {
         cy.intercept('GET', '/api/*/projects/*/snapshots').as('getProjectSnapshots')
@@ -41,13 +49,31 @@ describe('FlowForge - Instance Snapshots', () => {
         cy.get('[data-el="snapshots"] tbody').find('tr').contains('snapshot1')
     })
 
+    it('provides functionality to view a snapshot', () => {
+        cy.intercept('GET', '/api/*/snapshots/*/full').as('fullSnapshot')
+        // click kebab menu in row 1
+        cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
+        // click the View Snapshot option
+        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_VIEW_SNAPSHOT).click()
+
+        cy.wait('@fullSnapshot')
+
+        cy.get('[data-el="dialog-view-snapshot"]').should('be.visible')
+
+        // check the snapshot name in the dialog header
+        cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-header').contains('snapshot1')
+
+        // check the flow renders an SVG in the content section
+        cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-content svg').should('exist')
+    })
+
     it('download snapshot', () => {
         cy.intercept('POST', '/api/*/projects/*/snapshots/*/export').as('exportSnapshot')
 
         // click kebab menu in row 1
         cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
-        // click the 2nd option (Download)
-        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(1).click()
+        // click the Download Snapshot option
+        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_SNAPSHOT).click()
 
         // wait for SnapshotExportDialog dialog to appear
         cy.get('[data-el="dialog-export-snapshot"]').should('be.visible')
@@ -104,8 +130,8 @@ describe('FlowForge - Instance Snapshots', () => {
     it('download snapshot package.json', () => {
         // click kebab menu in row 1
         cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
-        // click the 3rd option (Download Package.json)
-        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(2).click()
+        // click the Download Package.json option
+        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_PACKAGE).click()
 
         const downloadsFolder = Cypress.config('downloadsFolder')
         cy.task('fileExists', { dir: downloadsFolder, file: 'package.json' })
@@ -116,8 +142,8 @@ describe('FlowForge - Instance Snapshots', () => {
 
         // click kebab menu in row 1
         cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
-        // click the 5th option (Delete)
-        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(4).click()
+        // click the Delete option
+        cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DELETE_SNAPSHOT).click()
 
         cy.get('[data-el="platform-dialog"]').should('be.visible')
         cy.get('[data-el="platform-dialog"] .ff-dialog-header').contains('Delete Snapshot')