@fleetbase/fleetops-engine 0.6.52 → 0.6.54

package/addon/controllers/connectivity/telematics/details/attachments.js

@@ -5,78 +5,136 @@ import { tracked } from '@glimmer/tracking';
 
 export default class ConnectivityTelematicsDetailsAttachmentsController extends Controller {
     @service deviceActions;
+    @service fetch;
     @service hostRouter;
     @service intl;
     @service modalsManager;
     @service notifications;
 
-    @tracked queryParams = ['query', 'status', 'attachment_state', 'vehicle', 'sort'];
+    @tracked queryParams = ['query', 'status', 'vehicle', 'sort'];
     @tracked telematic;
     @tracked query;
     @tracked status;
-    @tracked attachment_state;
     @tracked vehicle;
     @tracked sort = '-updated_at';
+    @tracked selectedDevice = null;
+    @tracked selectedVehicle = null;
+    @tracked isRefreshing = false;
 
     get syncedDevices() {
-        return Array.from(this.model ?? []);
+        return Array.from(this.model?.devices ?? this.model ?? []);
     }
 
-    get devices() {
-        const query = String(this.query ?? '')
-            .trim()
-            .toLowerCase();
-
-        return this.syncedDevices.filter((device) => {
-            const matchesQuery =
-                !query ||
-                [device.displayName, device.name, device.device_id, device.serial_number, device.imei, device.attached_to_name, device.status, device.connection_status]
-                    .filter(Boolean)
-                    .some((value) => String(value).toLowerCase().includes(query));
+    get loadError() {
+        return this.model?.error;
+    }
 
-            const matchesStatus = !this.status || device.status === this.status || device.connection_status === this.status;
-            const matchesAttachmentState =
-                !this.attachment_state || (this.attachment_state === 'attached' && device.attachable_uuid) || (this.attachment_state === 'unattached' && !device.attachable_uuid);
-            const matchesVehicle = !this.vehicle || device.attachable_uuid === this.vehicle;
+    get totalSyncedDevices() {
+        return this.model?.meta?.total ?? this.syncedDevices.length;
+    }
 
-            return matchesQuery && matchesStatus && matchesAttachmentState && matchesVehicle;
-        });
+    get devices() {
+        return [...this.unattachedDevices, ...this.attachedDevices];
     }
 
     get unattachedDevices() {
-        return this.devices.filter((device) => !device.attachable_uuid);
+        return this.syncedDevices.filter((device) => !device.attachable_uuid && this.deviceMatchesQuery(device) && this.deviceMatchesStatus(device));
     }
 
     get attachedDevices() {
-        return this.devices.filter((device) => device.attachable_uuid);
+        return this.syncedDevices.filter((device) => device.attachable_uuid && this.deviceMatchesQuery(device) && this.deviceMatchesStatus(device) && this.deviceMatchesVehicle(device));
     }
 
     get onlineDevicesCount() {
-        return this.devices.filter((device) => device.is_online || device.connection_status === 'online' || device.status === 'online' || device.status === 'active').length;
+        return this.syncedDevices.filter((device) => device.is_online || device.connection_status === 'online' || device.status === 'online' || device.status === 'active').length;
+    }
+
+    get attachedDevicesCount() {
+        return this.syncedDevices.filter((device) => device.attachable_uuid).length;
+    }
+
+    get unattachedDevicesCount() {
+        return this.syncedDevices.filter((device) => !device.attachable_uuid).length;
+    }
+
+    get mappedVehiclesCount() {
+        const vehicleIds = new Set(this.syncedDevices.filter((device) => device.attachable_uuid).map((device) => device.attachable_uuid));
+
+        return vehicleIds.size;
     }
 
     get vehicleGroups() {
         const groups = new Map();
 
         for (const device of this.attachedDevices) {
-            const key = device.attachable_uuid;
+            this.addDeviceToVehicleGroup(groups, device);
+        }
+
+        return this.sortVehicleGroups(groups);
+    }
 
-            if (!groups.has(key)) {
-                groups.set(key, {
-                    id: key,
-                    name: device.attached_to_name ?? 'Unknown vehicle',
-                    devices: [],
-                });
-            }
+    addDeviceToVehicleGroup(groups, device) {
+        const key = device.attachable_uuid;
 
-            groups.get(key).devices.push(device);
+        if (!groups.has(key)) {
+            const vehicle = device.attachable;
+
+            groups.set(key, {
+                id: key,
+                name: this.getDeviceVehicleName(device),
+                vehicle,
+                devices: [],
+            });
         }
 
+        groups.get(key).devices.push(device);
+    }
+
+    sortVehicleGroups(groups) {
         return Array.from(groups.values()).sort((a, b) => String(a.name).localeCompare(String(b.name)));
     }
 
+    get normalizedQuery() {
+        return String(this.query ?? '')
+            .trim()
+            .toLowerCase();
+    }
+
+    deviceMatchesQuery(device) {
+        const query = this.normalizedQuery;
+
+        if (!query) {
+            return true;
+        }
+
+        return [
+            device.displayName,
+            device.name,
+            device.device_id,
+            device.serial_number,
+            device.imei,
+            device.public_id,
+            device.attached_to_name,
+            device.attachable?.displayName,
+            device.attachable?.display_name,
+            device.attachable?.name,
+            device.status,
+            device.connection_status,
+        ]
+            .filter(Boolean)
+            .some((value) => String(value).toLowerCase().includes(query));
+    }
+
+    deviceMatchesStatus(device) {
+        return !this.status || device.status === this.status || device.connection_status === this.status;
+    }
+
+    deviceMatchesVehicle(device) {
+        return !this.vehicle || device.attachable_uuid === this.vehicle;
+    }
+
     get hasActiveFilters() {
-        return Boolean(this.query || this.status || this.attachment_state || this.vehicle);
+        return Boolean(this.query || this.status || this.vehicle);
     }
 
     get hasSyncedDevices() {
@@ -96,6 +154,10 @@ export default class ConnectivityTelematicsDetailsAttachmentsController extends
     }
 
     get emptyStateVariant() {
+        if (this.loadError) {
+            return 'error';
+        }
+
         if (!this.hasSyncedDevices) {
             return 'not_synced';
         }
@@ -117,6 +179,19 @@ export default class ConnectivityTelematicsDetailsAttachmentsController extends
 
     get emptyStateContent() {
         switch (this.emptyStateVariant) {
+            case 'error':
+                return {
+                    tone: 'danger',
+                    icon: 'triangle-exclamation',
+                    title: 'Unable to load device attachments',
+                    message: 'Fleetbase could not load the full provider device list. Refresh the tab or review the connection logs.',
+                    primaryText: 'Refresh',
+                    primaryIcon: 'refresh',
+                    primaryAction: this.refresh,
+                    secondaryText: 'Go to Logs',
+                    secondaryIcon: 'history',
+                    secondaryAction: this.goToLogs,
+                };
             case 'not_synced':
                 return {
                     tone: 'warning',
@@ -158,36 +233,96 @@ export default class ConnectivityTelematicsDetailsAttachmentsController extends
 
     get metrics() {
         return [
-            { label: 'Vehicles mapped', value: this.vehicleGroups.length, icon: 'truck', accentClass: 'fleetops-connectivity-kpi-accent-blue' },
-            { label: 'Attached devices', value: this.attachedDevices.length, icon: 'link', accentClass: 'fleetops-connectivity-kpi-accent-green' },
-            { label: 'Unattached devices', value: this.unattachedDevices.length, icon: 'link-slash', accentClass: 'fleetops-connectivity-kpi-accent-amber' },
+            { label: 'Synced devices', value: this.totalSyncedDevices, icon: 'microchip', accentClass: 'fleetops-connectivity-kpi-accent-blue' },
+            { label: 'Vehicles mapped', value: this.mappedVehiclesCount, icon: 'truck', accentClass: 'fleetops-connectivity-kpi-accent-blue' },
+            { label: 'Attached devices', value: this.attachedDevicesCount, icon: 'link', accentClass: 'fleetops-connectivity-kpi-accent-green' },
+            { label: 'Unattached devices', value: this.unattachedDevicesCount, icon: 'link-slash', accentClass: 'fleetops-connectivity-kpi-accent-amber' },
             { label: 'Online devices', value: this.onlineDevicesCount, icon: 'signal', accentClass: 'fleetops-connectivity-kpi-accent-green' },
         ];
     }
 
-    @action updateQuery(event) {
-        this.query = event.target.value;
+    get visibleDevicesCount() {
+        return this.devices.length;
+    }
+
+    get filteredUnattachedCount() {
+        return this.unattachedDevices.length;
+    }
+
+    get filteredAttachedCount() {
+        return this.attachedDevices.length;
     }
 
-    @action updateAttachmentState(event) {
-        this.attachment_state = event.target.value || null;
+    get selectedDeviceName() {
+        return this.selectedDevice?.displayName ?? this.selectedDevice?.name ?? this.selectedDevice?.device_id;
+    }
+
+    @action updateQuery(event) {
+        this.query = event.target.value;
     }
 
     @action updateStatus(event) {
         this.status = event.target.value || null;
     }
 
+    @action updateVehicle(valueOrEvent) {
+        const value = valueOrEvent?.target ? valueOrEvent.target.value : valueOrEvent;
+
+        this.vehicle = value || null;
+    }
+
+    @action updateSelectedVehicle(vehicle) {
+        this.selectedVehicle = vehicle;
+        this.vehicle = vehicle?.id ?? null;
+    }
+
     @action clearFilters() {
         this.query = null;
         this.status = null;
-        this.attachment_state = null;
         this.vehicle = null;
+        this.selectedVehicle = null;
     }
 
     @action goToDevices() {
         return this.hostRouter.transitionTo('console.fleet-ops.connectivity.telematics.details.devices', this.telematic);
     }
 
+    @action goToLogs() {
+        return this.hostRouter.transitionTo('console.fleet-ops.connectivity.telematics.details.logs', this.telematic);
+    }
+
+    @action async refresh() {
+        this.isRefreshing = true;
+
+        try {
+            return await this.hostRouter.refresh();
+        } finally {
+            this.isRefreshing = false;
+        }
+    }
+
+    @action selectUnattachedDevice(device) {
+        if (this.selectedDevice === device) {
+            this.selectedDevice = null;
+
+            return;
+        }
+
+        this.selectedDevice = device;
+    }
+
+    @action clearSelectedDevice() {
+        this.selectedDevice = null;
+    }
+
+    @action attachSelectedDeviceToGroup(group) {
+        if (!this.selectedDevice) {
+            return;
+        }
+
+        return this.attachDeviceToVehicle(this.selectedDevice, group.vehicle ?? { id: group.id, name: group.name });
+    }
+
     @action openAttachDeviceModal(device) {
         this.modalsManager.show('modals/attach-telematic-device', {
             title: this.intl.t('device.prompts.attach-device-to-vehicle-title', { deviceName: device.displayName ?? device.name ?? device.device_id ?? this.intl.t('resource.device') }),
@@ -200,20 +335,12 @@ export default class ConnectivityTelematicsDetailsAttachmentsController extends
                     return;
                 }
 
-                device.setProperties({
-                    attachable_uuid: selectedVehicle.id,
-                    attachable_type: 'fleet-ops:vehicle',
-                });
-
                 modal.startLoading();
 
                 try {
-                    await device.save();
-                    this.notifications.success(this.intl.t('device.prompts.attach-to-vehicle-success'));
-                    await this.hostRouter.refresh();
+                    await this.attachDeviceToVehicle(device, selectedVehicle);
                     modal.done();
                 } catch (error) {
-                    device.rollbackAttributes();
                     this.notifications.serverError(error);
                     modal.stopLoading();
                 }
@@ -221,6 +348,14 @@ export default class ConnectivityTelematicsDetailsAttachmentsController extends
         });
     }
 
+    async attachDeviceToVehicle(device, selectedVehicle) {
+        const response = await this.fetch.post(`devices/${device.id}/attach`, { vehicle: selectedVehicle.id });
+
+        this.applyDeviceAttachment(device, selectedVehicle, response?.device);
+        this.selectedDevice = null;
+        this.notifications.success(this.intl.t('device.prompts.attach-to-vehicle-success'));
+    }
+
     @action detachDevice(device) {
         const deviceName = device.displayName ?? device.name ?? device.device_id ?? this.intl.t('resource.device');
 
@@ -229,19 +364,50 @@ export default class ConnectivityTelematicsDetailsAttachmentsController extends
             body: this.intl.t('device.prompts.detach-telematic-device-body', { deviceName }),
             confirm: async (modal) => {
                 modal.startLoading();
-                device.setProperties({ attachable_uuid: null, attachable_type: null });
 
                 try {
-                    await device.save();
+                    const response = await this.fetch.post(`devices/${device.id}/detach`);
+
+                    this.applyDeviceDetachment(device, response?.device);
                     this.notifications.success(this.intl.t('device.prompts.detach-from-vehicle-success'));
-                    await this.hostRouter.refresh();
                     modal.done();
                 } catch (error) {
-                    device.rollbackAttributes();
                     this.notifications.serverError(error);
                     modal.stopLoading();
                 }
             },
         });
     }
+
+    getDeviceVehicleName(device) {
+        return device.attached_to_name ?? device.attachable?.display_name ?? device.attachable?.name ?? 'Unknown vehicle';
+    }
+
+    applyDeviceAttachment(device, selectedVehicle, serverDevice = {}) {
+        this.updateDevice(device, {
+            attachable_uuid: serverDevice.attachable_uuid ?? selectedVehicle.id,
+            attachable_type: serverDevice.attachable_type ?? 'fleet-ops:vehicle',
+            attached_to_name: serverDevice.attached_to_name ?? selectedVehicle.displayName ?? selectedVehicle.display_name ?? selectedVehicle.name,
+            attachable: serverDevice.attachable ?? selectedVehicle,
+        });
+    }
+
+    applyDeviceDetachment(device, serverDevice = {}) {
+        this.updateDevice(device, {
+            attachable_uuid: serverDevice.attachable_uuid ?? null,
+            attachable_type: serverDevice.attachable_type ?? null,
+            attached_to_name: serverDevice.attached_to_name ?? null,
+            attachable: serverDevice.attachable ?? null,
+        });
+    }
+
+    updateDevice(device, properties) {
+        if (typeof device.setProperties === 'function') {
+            device.setProperties(properties);
+
+            return;
+        }
+
+        Object.assign(device, properties);
+    }
 }

package/addon/controllers/connectivity/telematics/details/devices.js

@@ -3,7 +3,14 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
-import fleetOpsOptions from '../../../../utils/fleet-ops-options';
+
+const connectionStatusOptions = [
+    { label: 'Online', value: 'online' },
+    { label: 'Recently Offline', value: 'recently_offline' },
+    { label: 'Offline', value: 'offline' },
+    { label: 'Long Offline', value: 'long_offline' },
+    { label: 'Never Connected', value: 'never_connected' },
+];
 
 export default class ConnectivityTelematicsDetailsDevicesController extends Controller {
     @service deviceActions;
@@ -13,7 +20,7 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
     @service modalsManager;
     @service notifications;
 
-    @tracked queryParams = ['page', 'limit', 'sort', 'query', 'status', 'provider', 'attachment_state', 'device_id'];
+    @tracked queryParams = ['page', 'limit', 'sort', 'query', 'status', 'provider', 'attachment_state', 'vehicle', 'connection_status', 'device_id', 'last_online_at', 'updated_at'];
     @tracked telematic;
     @tracked page = 1;
     @tracked limit;
@@ -22,7 +29,11 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
     @tracked status;
     @tracked provider;
     @tracked attachment_state;
+    @tracked vehicle;
+    @tracked connection_status;
     @tracked device_id;
+    @tracked last_online_at;
+    @tracked updated_at;
 
     get devices() {
         return Array.from(this.model ?? []);
@@ -45,7 +56,9 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
     }
 
     get hasActiveFilters() {
-        return Boolean(this.query || this.status || this.provider || this.attachment_state || this.device_id);
+        return Boolean(
+            this.query || this.status || this.provider || this.attachment_state || this.vehicle || this.connection_status || this.device_id || this.last_online_at || this.updated_at
+        );
     }
 
     get hasDevices() {
@@ -145,35 +158,39 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
         ];
     }
 
-    @tracked actionButtons = [
-        {
-            icon: 'refresh',
-            size: 'xs',
-            onClick: this.refresh,
-            helpText: this.intl.t('common.refresh'),
-            wrapperClass: 'fleetops-telematics-action-button',
-        },
-        {
-            icon: 'ellipsis-h',
-            prefix: 'fas',
-            text: 'Actions',
-            type: 'primary',
-            size: 'xs',
-            triggerClass: 'fleetops-telematics-action-button',
-            items: [
-                {
-                    icon: 'satellite-dish',
-                    text: 'Sync Devices',
-                    onClick: this.startDeviceSync,
-                },
-                {
-                    icon: 'link',
-                    text: 'Attach Unassigned',
-                    onClick: this.openAttachmentsForUnassigned,
-                },
-            ],
-        },
-    ];
+    get actionButtons() {
+        return [
+            {
+                icon: 'refresh',
+                size: 'sm',
+                onClick: this.refresh,
+                helpText: this.intl.t('common.refresh'),
+                wrapperClass: 'fleetops-telematics-action-button',
+                isLoading: this.refreshTask.isRunning,
+                disabled: this.refreshTask.isRunning,
+            },
+            {
+                icon: 'ellipsis-h',
+                prefix: 'fas',
+                helpText: 'Actions',
+                type: 'primary',
+                size: 'sm',
+                triggerClass: 'fleetops-telematics-action-button',
+                items: [
+                    {
+                        icon: 'satellite-dish',
+                        text: 'Sync Devices',
+                        onClick: this.startDeviceSync,
+                    },
+                    {
+                        icon: 'link',
+                        text: 'Attach Unassigned',
+                        onClick: this.openAttachmentsForUnassigned,
+                    },
+                ],
+            },
+        ];
+    }
 
     @tracked bulkActions = [];
 
@@ -207,12 +224,11 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
                 resizable: true,
                 sortable: true,
                 filterable: true,
-                filterParam: 'attachment_state',
-                filterComponent: 'filter/multi-option',
-                filterOptions: [
-                    { label: 'Attached', value: 'attached' },
-                    { label: 'Unattached', value: 'unattached' },
-                ],
+                filterParam: 'vehicle',
+                filterComponent: 'filter/model',
+                filterComponentPlaceholder: 'Select vehicle',
+                model: 'vehicle',
+                modelNamePath: 'displayName',
             },
             {
                 label: 'Connection',
@@ -221,9 +237,11 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
                 resizable: true,
                 sortable: true,
                 filterable: true,
-                filterParam: 'status',
+                filterParam: 'connection_status',
                 filterComponent: 'filter/multi-option',
-                filterOptions: fleetOpsOptions('deviceStatuses'),
+                filterOptions: connectionStatusOptions,
+                filterOptionLabel: 'label',
+                filterOptionValue: 'value',
             },
             {
                 label: 'Last Seen',
@@ -231,6 +249,25 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
                 sortParam: 'last_online_at',
                 resizable: true,
                 sortable: true,
+                filterable: true,
+                filterParam: 'last_online_at',
+                filterComponent: 'filter/date',
+            },
+            {
+                label: 'Attachment',
+                valuePath: 'attachable_uuid',
+                hidden: true,
+                resizable: true,
+                sortable: false,
+                filterable: true,
+                filterParam: 'attachment_state',
+                filterComponent: 'filter/select',
+                filterOptions: [
+                    { label: 'Attached', value: 'attached' },
+                    { label: 'Unattached', value: 'unattached' },
+                ],
+                filterOptionLabel: 'label',
+                filterOptionValue: 'value',
             },
             {
                 label: this.intl.t('column.updated-at'),
@@ -284,7 +321,11 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
     }
 
     @action refresh() {
-        return this.hostRouter.refresh();
+        if (this.refreshTask.isRunning) {
+            return;
+        }
+
+        return this.refreshTask.perform();
     }
 
     @action clearFilters() {
@@ -292,7 +333,11 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
         this.status = null;
         this.provider = null;
         this.attachment_state = null;
+        this.vehicle = null;
+        this.connection_status = null;
         this.device_id = null;
+        this.last_online_at = null;
+        this.updated_at = null;
         this.page = 1;
     }
 
@@ -356,6 +401,10 @@ export default class ConnectivityTelematicsDetailsDevicesController extends Cont
         return this.syncDevices.perform();
     }
 
+    @task *refreshTask() {
+        yield this.hostRouter.refresh();
+    }
+
     @task *syncDevices() {
         try {
             yield this.fetch.post(`telematics/${this.telematic.id}/discover`);