Merge pull request #6122 from FlowFuse/enhance-visibility-of-device-modes

Add device mode filters and badge to DevicesBrowser component

Author: knolleary

frontend/src/components/DevicesBrowser.vue

@@ -25,6 +25,28 @@
                 @update:sort="updateSort"
             >
                 <template #actions>
+                    <ff-popover button-text="Filters" button-kind="secondary">
+                        <template #panel="{ close }">
+                            <section>
+                                <popover-item
+                                    title="Fleet Mode"
+                                    @click="onFilterClick('fleetMode', close)"
+                                >
+                                    <template #icon>
+                                        <ff-checkbox v-model="deviceModeFilters.fleetMode" style="top: -8px;" />
+                                    </template>
+                                </popover-item>
+                                <popover-item
+                                    title="Developer Mode"
+                                    @click="onFilterClick('developerMode', close)"
+                                >
+                                    <template #icon>
+                                        <ff-checkbox v-model="deviceModeFilters.developerMode" style="top: -8px;" />
+                                    </template>
+                                </popover-item>
+                            </section>
+                        </template>
+                    </ff-popover>
                     <DropdownMenu v-if="hasPermission('team:device:bulk-delete', applicationContext) || hasPermission('team:device:bulk-edit', applicationContext)" :disabled="!checkedDevices?.length" data-el="bulk-actions-dropdown" buttonClass="ff-btn ff-btn--secondary" :options="bulkActionsDropdownOptions">Actions</DropdownMenu>
                     <ff-button
                         v-if="displayingInstance && hasPermission('project:snapshot:create', applicationContext)"
@@ -325,6 +347,7 @@ import DeviceLink from '../pages/application/components/cells/DeviceLink.vue'
 import Snapshot from '../pages/application/components/cells/Snapshot.vue'
 
 import DeviceLastSeenCell from '../pages/device/components/DeviceLastSeenCell.vue'
+import DeviceModeBadge from '../pages/device/components/DeviceModeBadge.vue'
 import SnapshotAssignDialog from '../pages/instance/VersionHistory/Snapshots/dialogs/SnapshotAssignDialog.vue'
 import InstanceStatusBadge from '../pages/instance/components/InstanceStatusBadge.vue'
 import DeviceAssignApplicationDialog from '../pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue'
@@ -333,6 +356,9 @@ import DeviceCredentialsDialog from '../pages/team/Devices/dialogs/DeviceCredent
 import TeamDeviceCreateDialog from '../pages/team/Devices/dialogs/TeamDeviceCreateDialog.vue'
 
 import Alerts from '../services/alerts.js'
+import FfPopover from '../ui-components/components/Popover.vue'
+import PopoverItem from '../ui-components/components/PopoverItem.vue'
+import FfCheckbox from '../ui-components/components/form/Checkbox.vue'
 
 import { debounce } from '../utils/eventHandling.js'
 import { createPollTimer } from '../utils/timers.js'
@@ -346,6 +372,9 @@ const POLL_TIME = 10000
 export default {
     name: 'DevicesBrowser',
     components: {
+        FfCheckbox,
+        PopoverItem,
+        FfPopover,
         ClockIcon,
         DeviceAssignApplicationDialog,
         DeviceAssignInstanceDialog,
@@ -401,7 +430,11 @@ export default {
             },
             /** @type { import('../utils/timers.js').PollTimer } */
             pollTimer: null,
-            deviceEditModalOpened: false
+            deviceEditModalOpened: false,
+            deviceModeFilters: {
+                fleetMode: false,
+                developerMode: false
+            }
         }
     },
     computed: {
@@ -413,6 +446,7 @@ export default {
                 { label: 'Remote Instance', key: 'name', sortable: !this.moreThanOnePage, component: { is: markRaw(DeviceLink) } },
                 { label: 'Type', key: 'type', class: ['w-48'], sortable: !this.moreThanOnePage },
                 { label: 'Last Seen', key: 'lastSeenAt', class: ['w-48'], sortable: !this.moreThanOnePage, component: { is: markRaw(DeviceLastSeenCell) } },
+                { label: 'Mode', key: 'mode', class: ['w-48'], sortable: true, component: { is: markRaw(DeviceModeBadge) } },
                 { label: 'Last Known Status', class: ['w-32'], component: { is: markRaw(InstanceStatusBadge), map: { instanceId: 'id' }, extraProps: { instanceType: 'device' } } }
             ]
 
@@ -548,12 +582,19 @@ export default {
          *  - property: which filter row is being applied, e.g. status or lastseen
          *  - bucket: which value of this property are we filtering on from the buckets in the status bar
          */
-        applyFilter (filter) {
+        applyFilter (filter, shouldClearDeviceModeFilters = true) {
             this.filter = filter
 
             if (this.unfilteredHasMoreThanOnePage) {
                 this.doFilterServerSide()
             }
+
+            if (shouldClearDeviceModeFilters) {
+                this.deviceModeFilters = {
+                    fleetMode: false,
+                    developerMode: false
+                }
+            }
         },
 
         updateSearch (searchTerm) {
@@ -789,6 +830,29 @@ export default {
             }
 
             return 'Unassigned'
+        },
+
+        onFilterClick (filter, closeCallback) {
+            const compare = filter === 'fleetMode' ? 'autonomous' : 'developer'
+            this.deviceModeFilters[filter] = !this.deviceModeFilters[filter]
+
+            this.applyFilter(
+                {
+                    devices: Array.from(this.devices.values())
+                        .filter((device) => !this.deviceModeFilters[filter] ? true : device.mode === compare)
+                        .map(device => device.id),
+                    property: 'mode'
+                },
+                false
+            )
+
+            // resetting filters because we can't have multiple filters applied at once
+            const filters = {
+                fleetMode: false,
+                developerMode: false
+            }
+            filters[filter] = this.deviceModeFilters[filter]
+            this.deviceModeFilters = filters
         }
     }
 }

test/e2e/frontend/cypress/tests/devices/bulk.spec.js

@@ -155,9 +155,9 @@ describe('FlowFuse - Devices', () => {
                     })
 
                     // check the table columns for the moved devices
-                    cy.get('[data-el="devices-browser"] tbody tr').contains(deviceName1).parent().parent().find('td').eq(5).contains(options.moveTo)
-                    cy.get('[data-el="devices-browser"] tbody tr').contains(deviceName2).parent().parent().find('td').eq(5).contains(options.moveTo)
-                    cy.get('[data-el="devices-browser"] tbody tr').contains(deviceName3).parent().parent().find('td').eq(5).contains(options.moveTo)
+                    cy.get('[data-el="devices-browser"] tbody tr').contains(deviceName1).parent().parent().find('td').eq(6).contains(options.moveTo)
+                    cy.get('[data-el="devices-browser"] tbody tr').contains(deviceName2).parent().parent().find('td').eq(6).contains(options.moveTo)
+                    cy.get('[data-el="devices-browser"] tbody tr').contains(deviceName3).parent().parent().find('td').eq(6).contains(options.moveTo)
                 })
             }
         })