Merge remote-tracking branch 'origin/main' into 6649_add-remote-instance-immersive-view-instance-controls

Author: cstns

forge/db/controllers/Device.js

@@ -70,8 +70,9 @@ module.exports = {
      * Sends the project id, snapshot hash and settings hash to the device
      * so that the device can determine what/if it needs to update
      * @param {forge.db.models.Device} device The device to send an "update" command to
+     * @param {boolean} forceUpdate If true, the update command will instruct the agent to apply updates even if in developerMode. This require vTBD of the device-agent.
      */
-    sendDeviceUpdateCommand: async function (app, device) {
+    sendDeviceUpdateCommand: async function (app, device, forceUpdate = false) {
         if (app.comms) {
             // ensure the device has all associations loaded
             let team = device.Team
@@ -105,6 +106,9 @@ module.exports = {
                 mode: device.mode,
                 licensed: app.license.active()
             }
+            if (forceUpdate) {
+                payload.forceUpdate = true
+            }
             // if the device is assigned to an application but has no snapshot we need to send enough
             // info to start the device in application mode so that it can start node-red and
             // permit the user to generate new flows and submit a snapshot

forge/routes/api/device.js

@@ -475,6 +475,7 @@ module.exports = async function (app) {
         }
     }, async (request, reply) => {
         let sendDeviceUpdate = false
+        let forceUpdate = false
         const device = request.device
         /** @type {import('../../auditLog/formatters').UpdatesCollection} */
         const updates = new app.auditLog.formatters.UpdatesCollection()
@@ -610,6 +611,10 @@ module.exports = async function (app) {
                 await app.auditLog.Device.device.snapshot.targetSet(request.session.User, null, device, targetSnapshot)
                 updates.push('targetSnapshotId', originalSnapshotId, device.targetSnapshotId)
                 sendDeviceUpdate = true
+                // If in developer mode, set the force flag to true otherwise the agent will ignore the update
+                if (device.mode === 'developer') {
+                    forceUpdate = true
+                }
             }
             if (request.body.name !== undefined && request.body.name !== device.name) {
                 updates.push('name', device.name, request.body.name)
@@ -627,7 +632,7 @@ module.exports = async function (app) {
         await device.save()
         const updatedDevice = await app.db.models.Device.byId(device.id)
         if (sendDeviceUpdate) {
-            await app.db.controllers.Device.sendDeviceUpdateCommand(updatedDevice)
+            await app.db.controllers.Device.sendDeviceUpdateCommand(updatedDevice, forceUpdate)
         }
 
         // check post op audit log action - create audit log entry if required

frontend/src/components/TeamTypeSelection.vue

@@ -5,11 +5,11 @@
                 v-for="type in types" :key="type.id"
                 :team-type="type"
                 :billingInterval="isAnnualBilling ? 'year' : 'month'"
-                :enableCTA="!billingEnabled || !isAnnualBilling || !!type.annualBillingPrice"
+                :enableCTA="!isBillingEnabled || !isAnnualBilling || !!type.annualBillingPrice"
             />
         </div>
         <div class="flex gap-6 justify-center relative z-10 flex-wrap mt-4">
-            <div v-if="billingEnabled && annualBillingAvailable" class="text-sm font-medium text-gray-400 flex items-center gap-2">
+            <div v-if="isBillingEnabled && annualBillingAvailable" class="text-sm font-medium text-gray-400 flex items-center gap-2">
                 <span :class="{'text-gray-800': !isAnnualBilling }">Monthly</span>
                 <ff-toggle-switch v-model="isAnnualBilling" />
                 <span :class="{'text-gray-800': isAnnualBilling }">Yearly</span>
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 
 import teamTypesApi from '../api/teamTypes.js'
 
@@ -39,9 +39,7 @@ export default {
     },
     computed: {
         ...mapState('account', ['user']),
-        billingEnabled () {
-            return true
-        }
+        ...mapGetters('account', ['isBillingEnabled'])
     },
     async created () {
         const { types } = await teamTypesApi.getTeamTypes()

frontend/src/components/drawers/RightDrawer.vue

@@ -22,6 +22,7 @@
                     :disabled="typeof action.disabled === 'function' ? action.disabled() : action.disabled"
                     :has-left-icon="!!action.iconLeft"
                     v-bind="action.bind"
+                    :title="typeof action.tooltip === 'function' ? action.tooltip() : action.tooltip"
                     @click="action.handler"
                 >
                     <template v-if="!!action.iconLeft" #icon-left>

frontend/src/components/drawers/snapshots/SnapshotDetailsDrawer.vue

@@ -24,7 +24,7 @@
                 </information-well>
             </section>
 
-            <div class="flex-1">
+            <div class="flex flex-col flex-1 gap-4">
                 <section class="name">
                     <div class="header flex flex-row justify-between">
                         <span class="title font-bold">Name:</span>
@@ -196,6 +196,11 @@ export default defineComponent({
             required: false,
             default: true
         },
+        canRestoreReason: {
+            type: String,
+            required: false,
+            default: ''
+        },
         instance: {
             type: Object,
             required: false,
@@ -206,6 +211,11 @@ export default defineComponent({
             required: false,
             default: false
         },
+        isDeviceDevMode: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
         snapshot: {
             type: Object,
             required: true
@@ -215,7 +225,7 @@ export default defineComponent({
             required: true
         }
     },
-    emits: ['updated-snapshot', 'deleted-snapshot'],
+    emits: ['restored-snapshot', 'updated-snapshot', 'deleted-snapshot'],
     setup () {
         const { hasPermission } = usePermissions()
 
@@ -279,25 +289,30 @@ export default defineComponent({
             const currentTargetSnapshot = this.instance.targetSnapshot?.id
 
             if (typeof currentTargetSnapshot === 'string' && currentTargetSnapshot === snapshot.id) {
-                Alerts.emit('This snapshot is already deployed to this device.', 'info', 7500)
+                Alerts.emit('This snapshot is already deployed to this remote instance.', 'info', 7500)
                 return
             }
 
-            let body = `Are you sure you want to restore snapshot '${snapshot.name}' to this device?`
+            let body = `Are you sure you want to restore snapshot '${snapshot.name}' to this remote instance?`
             if (snapshot.device?.id !== this.instance.id) {
-                body = `Snapshot '${snapshot.name}' was not generated by this device. Are you sure you want to deploy it to this device?`
+                body = `Snapshot '${snapshot.name}' was not generated by this remote instance. Are you sure you want to deploy it to this remote instance?`
+            }
+            if (this.isDevice && this.isDeviceDevMode) {
+                body += `
+                        Any changes made to the remote instance whilst in developer mode will be lost.
+                        To avoid losses, you can cancel this operation and create a snapshot in the developer mode tab.`
             }
 
             Dialog.show({
-                header: `Restore Snapshot to device '${this.instance.name}'`,
+                header: `Restore Snapshot to remote instance '${this.instance.name}'`,
                 kind: 'danger',
                 text: body,
                 confirmLabel: 'Confirm'
             }, async () => {
                 try {
                     await DeviceApi.setSnapshotAsTarget(this.instance.id, snapshot.id)
                     Alerts.emit('Successfully applied the snapshot.', 'confirmation')
-                    this.$emit('updated-snapshot', this.snapshot)
+                    this.$emit('restored-snapshot', this.snapshot)
                 } catch (err) {
                     Alerts.emit('Failed to apply snapshot: ' + err.toString(), 'warning', 7500)
                 }
@@ -371,6 +386,9 @@ export default defineComponent({
                         disabled: function () {
                             return !context.canRestore
                         },
+                        tooltip: function () {
+                            return context.canRestoreReason || ''
+                        },
                         bind: {
                             'data-action': 'restore'
                         }

frontend/src/pages/device/VersionHistory/Snapshots/index.vue

@@ -105,6 +105,7 @@
 
 <script>
 import { FilterIcon, PlusSmIcon, UploadIcon } from '@heroicons/vue/outline'
+import SemVer from 'semver'
 import { markRaw } from 'vue'
 import { mapActions, mapState } from 'vuex'
 
@@ -334,7 +335,19 @@ export default {
         },
         // enable/disable snapshot actions
         canDeploy (_row) {
-            return !this.developerMode && this.hasPermission('device:edit', { application: this.device.application })
+            return (!this.developerMode || this.supportsDevModeSnapshotRestore()) && this.hasPermission('device:edit', { application: this.device.application })
+        },
+        canDeployReason (snapshot) {
+            if (!this.hasPermission('device:edit', { application: this.device.application })) {
+                return 'You do not have permission to deploy snapshots to this Remote Instance'
+            }
+            if (this.developerMode && !this.supportsDevModeSnapshotRestore()) {
+                return 'Snapshots deploys to Developer Mode Remote Instances requires Device Agent v3.8.0 or later'
+            }
+            return ''
+        },
+        supportsDevModeSnapshotRestore () {
+            return this.device.agentVersion && SemVer.gte(this.device.agentVersion, '3.8.0')
         },
         onRowSelected (snapshot) {
             this.openRightDrawer({
@@ -345,10 +358,18 @@ export default {
                     instance: this.device,
                     canSetDeviceTarget: false,
                     canRestore: this.canDeploy(snapshot),
-                    isDevice: true
+                    canRestoreReason: this.canDeployReason(snapshot),
+                    isDevice: true,
+                    isDeviceDevMode: this.developerMode
                 },
                 on: {
                     updatedSnapshot: () => this.fetchData(true),
+                    restoredSnapshot: () => {
+                        setTimeout(() => {
+                            this.$emit('device-updated')
+                        }, 100)
+                        this.fetchData(true)
+                    },
                     deletedSnapshot: () => {
                         this.closeRightDrawer()
                         this.fetchData(true)

frontend/src/pages/device/VersionHistory/index.vue

@@ -64,6 +64,7 @@
                 @show-import-snapshot-dialog="showImportSnapshotDialog"
                 @show-create-snapshot-dialog="showCreateSnapshotDialog"
                 @instance-updated="$emit('instance-updated')"
+                @device-updated="$emit('device-updated')"
             />
         </transition>
     </router-view>
@@ -120,7 +121,7 @@ export default {
             required: true
         }
     },
-    emits: ['instance-updated'],
+    emits: ['instance-updated', 'device-updated'],
     setup () {
         const { hasPermission } = usePermissions()
 

frontend/src/pages/instance/VersionHistory/Snapshots/index.vue

@@ -243,6 +243,7 @@ export default {
                 props: { snapshot, snapshotList: this.snapshotList, instance: this.instance },
                 on: {
                     updatedSnapshot: () => this.fetchData(true),
+                    restoredSnapshot: () => this.fetchData(true),
                     deletedSnapshot: () => {
                         this.closeRightDrawer()
                         this.fetchData(true)

frontend/src/store/modules/account/index.js

@@ -112,6 +112,9 @@ const getters = {
         !state.team?.type?.properties?.billing?.disabled &&
         !state.team?.billing?.active
     },
+    isBillingEnabled (state) {
+        return !!state.features.billing
+    },
     isTrialAccount (state) {
         return !!state.team?.billing?.trial
     },