add option to activate a new snapshot on creation

forge/routes/api/projectSnapshots.js

@@ -79,6 +79,7 @@ module.exports = async function (app) {
 
     /**
      * Create a snapshot
+     * @name /api/v1/projects/:projectId/snapshots
      */
     app.post('/', {
         preHandler: app.needsPermission('project:snapshot:create')
@@ -90,6 +91,24 @@ module.exports = async function (app) {
         )
         snapShot.User = request.session.User
         await app.auditLog.Project.project.snapshot.created(request.session.User, null, request.project, snapShot)
+        if (request.body.setAsTarget) {
+            await snapShot.reload()
+            await request.project.updateSetting('deviceSettings', {
+                targetSnapshot: snapShot.id
+            })
+            // Update the targetSnapshot of the devices assigned to this project
+            await app.db.models.Device.update({ targetSnapshotId: snapShot.id }, {
+                where: {
+                    ProjectId: request.project.id
+                }
+            })
+            await app.auditLog.Project.project.snapshot.deviceTargetSet(request.session.User, null, request.project, snapShot)
+            if (app.comms) {
+                app.comms.devices.sendCommandToProjectDevices(request.project.Team.hashid, request.project.id, 'update', {
+                    snapshot: snapShot.hashid
+                })
+            }
+        }
         reply.send(app.db.views.ProjectSnapshot.snapshot(snapShot))
     })
 }

frontend/src/pages/project/Snapshots/dialogs/SnapshotCreateDialog.vue

@@ -8,23 +8,29 @@
                         <textarea v-model="input.description" rows="8" class="ff-input ff-text-input" style="height: auto"></textarea>
                     </template>
                 </FormRow>
+                <FormRow v-model="input.setAsTarget" type="checkbox" data-form="snapshot-name">
+                    <span class="" v-ff-tooltip:right="'If checked, all devices in this team will be restarted on this snapshot.'">
+                        Set as Target <QuestionMarkCircleIcon class="ff-icon" style="margin: 0px 0px 0px 4px; height: 18px;"></QuestionMarkCircleIcon>
+                    </span>
+                </FormRow>
             </form>
         </template>
     </ff-dialog>
 </template>
-
 <script>
 
 import snapshotApi from '@/api/projectSnapshots'
 
 import alerts from '@/services/alerts'
 
-import FormRow from '@/components/FormRow'
+import FormRow from '@/components/FormRow.vue'
+import { QuestionMarkCircleIcon } from '@heroicons/vue/solid'
 
 export default {
-    name: 'TeamDeviceCreateDialog',
+    name: 'SnapshotCreateDialog',
     components: {
-        FormRow
+        FormRow,
+        QuestionMarkCircleIcon
     },
     props: ['project'],
     emits: ['snapshotCreated'],
@@ -33,7 +39,8 @@ export default {
             submitted: false,
             input: {
                 name: '',
-                description: ''
+                description: '',
+                setAsTarget: false
             },
             errors: {}
         }
@@ -51,18 +58,21 @@ export default {
                 this.submitted = true
                 const opts = {
                     name: this.input.name,
-                    description: this.input.description
+                    description: this.input.description,
+                    setAsTarget: this.input.setAsTarget
                 }
                 snapshotApi.create(this.project.id, opts).then((response) => {
                     this.$emit('snapshotCreated', response)
                     alerts.emit('Successfully created snapshot of project.', 'confirmation')
                 }).catch(err => {
-                    console.log(err.response.data)
-                    if (err.response.data) {
+                    console.log(err.response?.data)
+                    if (err.response?.data) {
                         if (/name/.test(err.response.data.error)) {
                             this.errors.name = err.response.data.error
+                            return
                         }
                     }
+                    alerts.emit('Failed to create snapshot of project.', 'error')
                 })
             }
         }
@@ -73,6 +83,7 @@ export default {
                 this.$refs.dialog.show()
                 this.input.name = ''
                 this.input.description = ''
+                this.input.setAsTarget = false
                 this.submitted = false
                 this.errors = {}
             }

frontend/src/pages/project/Snapshots/index.vue

@@ -74,7 +74,7 @@ export default {
         this.fetchData()
     },
     methods: {
-        fetchData: async function (newVal) {
+        fetchData: async function () {
             if (this.project.id) {
                 this.loading = true
                 const deviceCounts = await this.countDevices()
@@ -148,6 +148,9 @@ export default {
         },
         snapshotCreated (snapshot) {
             this.snapshots.unshift(snapshot)
+            // on next tick, update the table data to ensure
+            // the new snapshot is shown and the correct status are shown
+            this.$emit('projectUpdated')
         },
         async downloadSnapshotPackage (snapshot) {
             const ss = await snapshotApi.getSnapshot(this.project.id, snapshot.id)