@fleetbase/fleetops-engine 0.6.54 → 0.6.56

package/addon/components/telematic/settings.hbs

@@ -112,7 +112,7 @@
                     {{/if}}
                 {{else}}
                     <div class="rounded-md border border-dashed border-gray-300 p-3 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-300">
-                        This provider does not require FleetOps webhook configuration.
+                        This provider does not require Fleet-Ops webhook configuration.
                     </div>
                 {{/if}}
             </section>

package/addon/components/vendor/panel-header.hbs

@@ -0,0 +1,82 @@
+<div class="px-4 py-3" ...attributes>
+    <div class="flex flex-1 flex-row items-start justify-between gap-4">
+        <div class="flex min-w-0 flex-row items-start gap-3">
+            <div class="relative flex flex-shrink-0 items-start justify-start">
+                <Image
+                    src={{this.imageUrl}}
+                    @fallbackSrc={{config "defaultValues.vendorImage"}}
+                    alt={{this.name}}
+                    height="48"
+                    width="48"
+                    class="h-14 w-14 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700"
+                />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                    <InputInfo @text={{this.name}} />
+                </Attach::Tooltip>
+            </div>
+            <div class="flex min-w-0 flex-col">
+                <div class="flex min-w-0 flex-wrap items-center gap-2">
+                    <h1 class="truncate text-base font-semibold leading-5 text-gray-900 dark:text-gray-100">{{this.name}}</h1>
+                    <Badge @status={{this.status}} @size="xs">{{smart-humanize this.status}}</Badge>
+                </div>
+
+                <div class="mt-1 flex max-w-2xl flex-wrap items-center gap-1.5">
+                    {{#if this.businessId}}
+                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="id-card" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.businessId}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.type}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="building" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{smart-humanize this.type}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.email}}
+                        <span class="inline-flex max-w-[14rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="envelope" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.email}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.phone}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="phone" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.phone}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.country}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="globe" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate"><CountryName @country={{this.country}} @showFlag={{true}} /></span>
+                        </span>
+                    {{/if}}
+                    {{#if this.address}}
+                        <span class="inline-flex max-w-[16rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="location-dot" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.address}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.website}}
+                        <span class="inline-flex max-w-[14rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="link" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.website}}</span>
+                        </span>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+        <div class="next-view-header-right flex-shrink-0">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

package/addon/components/vendor/panel-header.js

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+
+export default class VendorPanelHeaderComponent extends Component {
+    get resource() {
+        return this.args.resource;
+    }
+
+    get imageUrl() {
+        return get(this.resource, 'photo_url') ?? get(this.resource, 'logo_url');
+    }
+
+    get name() {
+        return get(this.resource, 'name') ?? get(this.resource, 'displayName') ?? get(this.resource, 'business_id') ?? get(this.resource, 'public_id') ?? '-';
+    }
+
+    get status() {
+        return get(this.resource, 'status') ?? 'active';
+    }
+
+    get businessId() {
+        return get(this.resource, 'business_id') ?? get(this.resource, 'internal_id') ?? get(this.resource, 'public_id');
+    }
+
+    get type() {
+        return get(this.resource, 'type');
+    }
+
+    get email() {
+        return get(this.resource, 'email');
+    }
+
+    get phone() {
+        return get(this.resource, 'phone');
+    }
+
+    get country() {
+        return get(this.resource, 'country');
+    }
+
+    get address() {
+        return get(this.resource, 'address_street') ?? get(this.resource, 'address');
+    }
+
+    get website() {
+        return get(this.resource, 'website_url');
+    }
+}

package/addon/controllers/connectivity/devices/index/details/events.js

@@ -56,7 +56,7 @@ export default class ConnectivityDevicesIndexDetailsEventsController extends Con
     }
 
     get unprocessedEventsCount() {
-        return this.events.filter((event) => !event.processed_at && !event.is_processed).length;
+        return this.events.filter((event) => !event.processed_at).length;
     }
 
     get processedEventsCount() {

package/addon/controllers/connectivity/devices/index/details/vehicle.js

@@ -7,17 +7,27 @@ export default class ConnectivityDevicesIndexDetailsVehicleController extends Co
     @service deviceActions;
     @service hostRouter;
     @service intl;
+    @service mapManager;
+    @service vehicleActions;
 
     @tracked queryParams = [];
 
     get device() {
-        return this.model;
+        return this.model?.device ?? this.model;
     }
 
     get vehicle() {
         return this.device?.attachable;
     }
 
+    get positions() {
+        return Array.from(this.model?.positions ?? []);
+    }
+
+    get hasPositions() {
+        return this.positions.length > 0;
+    }
+
     get vehicleName() {
         return this.device?.attached_to_name ?? this.vehicle?.displayName ?? this.vehicle?.display_name ?? this.vehicle?.name;
     }
@@ -58,6 +68,14 @@ export default class ConnectivityDevicesIndexDetailsVehicleController extends Co
         return Boolean(this.vehicleName || this.device?.attachable_uuid);
     }
 
+    get canOpenVehicle() {
+        return Boolean(this.vehicle?.id);
+    }
+
+    get canLocateVehicle() {
+        return Boolean(this.vehicle?.id && (this.vehicle?.location || this.vehicle?.last_position || this.hasPositions));
+    }
+
     @action attachToVehicle() {
         return this.deviceActions.attachToVehicle(this.device, { callback: () => this.hostRouter.refresh() });
     }
@@ -68,7 +86,37 @@ export default class ConnectivityDevicesIndexDetailsVehicleController extends Co
 
     @action openVehicle() {
         if (this.vehicle?.id) {
-            return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', this.vehicle);
+            return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', this.vehicle.public_id);
+        }
+    }
+
+    @action openVehiclePositions() {
+        if (this.vehicle?.id) {
+            return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details.positions', this.vehicle.public_id);
+        }
+    }
+
+    @action async locateVehicle() {
+        if (!this.vehicle?.id) {
+            return;
+        }
+
+        await this.transitionToLiveMap();
+        await this.mapManager.waitForMap({ timeoutMs: 8000 });
+
+        this.mapManager.focusResource(this.vehicle, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.vehicleActions.panel?.view?.(this.vehicle, { closeOnTransition: true });
+            },
+        });
+    }
+
+    async transitionToLiveMap() {
+        try {
+            await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
+        } catch (_) {
+            // Keep locate actions usable even if the current transition is already in-flight.
         }
     }
 }

package/addon/controllers/connectivity/devices/index.js

@@ -1,15 +1,41 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import buildDeviceTableColumns from '../../../utils/device-table-columns';
 import fleetOpsOptions from '../../../utils/fleet-ops-options';
 
 export default class ConnectivityDevicesIndexController extends Controller {
     @service deviceActions;
+    @service hostRouter;
     @service telematicActions;
     @service intl;
+    @service mapManager;
+    @service notifications;
+    @service store;
+    @service vehicleActions;
 
     /** query params */
-    @tracked queryParams = ['name', 'status', 'attachment_state', 'telematic', 'page', 'limit', 'sort', 'query', 'public_id', 'created_at', 'updated_at'];
+    @tracked queryParams = [
+        'name',
+        'status',
+        'attachment_state',
+        'telematic',
+        'provider',
+        'vehicle',
+        'connection_status',
+        'device_id',
+        'type',
+        'serial_number',
+        'last_online_at',
+        'page',
+        'limit',
+        'sort',
+        'query',
+        'public_id',
+        'created_at',
+        'updated_at',
+    ];
     @tracked page = 1;
     @tracked limit;
     @tracked sort = '-created_at';
@@ -18,6 +44,13 @@ export default class ConnectivityDevicesIndexController extends Controller {
     @tracked status;
     @tracked attachment_state;
     @tracked telematic;
+    @tracked provider;
+    @tracked vehicle;
+    @tracked connection_status;
+    @tracked device_id;
+    @tracked type;
+    @tracked serial_number;
+    @tracked last_online_at;
 
     /** action buttons */
     @tracked actionButtons = [
@@ -56,133 +89,115 @@ export default class ConnectivityDevicesIndexController extends Controller {
         },
     ];
 
-    /** columns */
-    @tracked columns = [
-        {
-            sticky: true,
-            label: this.intl.t('column.name'),
-            valuePath: 'displayName',
-            cellComponent: 'table/cell/anchor',
-            action: this.deviceActions.transition.view,
-            permission: 'fleet-ops view device',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterParam: 'name',
-            filterComponent: 'filter/string',
-        },
-        {
-            label: 'Telematic',
-            valuePath: 'telematic.provider',
-            cellComponent: 'table/cell/anchor',
-            action: this.telematicActions.transition.view,
-            permission: 'fleet-ops view telematic',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/model',
-            filterComponentPlaceholder: 'Select telematic',
-            filterParam: 'telematic',
-            model: 'telematic',
-        },
-        {
-            label: 'Type',
-            valuePath: 'type',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterParam: 'type',
-            filterComponent: 'filter/multi-option',
-            filterOptions: fleetOpsOptions('deviceTypes'),
-        },
-        {
-            label: 'Serial Number',
-            valuePath: 'serial_number',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterParam: 'serial_number',
-            filterComponent: 'filter/string',
-        },
-        {
-            label: this.intl.t('column.status'),
-            valuePath: 'status',
-            cellComponent: 'table/cell/status',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/multi-option',
-            filterOptions: fleetOpsOptions('deviceStatuses'),
-        },
-        {
-            label: this.intl.t('column.created-at'),
-            valuePath: 'createdAt',
-            sortParam: 'created_at',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/date',
-        },
-        {
-            label: this.intl.t('column.updated-at'),
-            valuePath: 'updatedAt',
-            sortParam: 'updated_at',
-            resizable: true,
-            sortable: true,
-            hidden: true,
-            filterable: true,
-            filterComponent: 'filter/date',
-        },
+    get deviceTypeOptions() {
+        return fleetOpsOptions('deviceTypes');
+    }
 
-        {
-            label: '',
-            cellComponent: 'table/cell/dropdown',
-            ddButtonText: false,
-            ddButtonIcon: 'ellipsis-h',
-            ddButtonIconPrefix: 'fas',
-            ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.device') }),
-            cellClassNames: 'overflow-visible',
-            wrapperClass: 'flex items-center justify-end mx-2',
-            sticky: 'right',
-            width: 60,
-            actions: [
-                {
-                    label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.device') }),
-                    fn: this.deviceActions.transition.view,
-                    permission: 'fleet-ops view device',
-                },
-                {
-                    label: this.intl.t('common.edit-resource', { resource: this.intl.t('resource.device') }),
-                    fn: this.deviceActions.transition.edit,
-                    permission: 'fleet-ops update device',
-                },
-                {
-                    separator: true,
-                },
-                {
-                    label: this.intl.t('device.actions.attach-to-vehicle'),
-                    fn: this.deviceActions.attachToVehicle,
-                    permission: 'fleet-ops update device',
-                },
-                {
-                    label: this.intl.t('device.actions.detach-from-vehicle'),
-                    fn: this.deviceActions.detachFromVehicle,
-                    permission: 'fleet-ops update device',
-                    isVisible: (device) => Boolean(device.attachable_uuid || device.attached_to_name || device.attachable),
-                },
-                {
-                    separator: true,
-                },
-                {
-                    label: this.intl.t('common.delete-resource', { resource: this.intl.t('resource.device') }),
-                    fn: this.deviceActions.delete,
-                    permission: 'fleet-ops delete device',
-                },
-            ],
-            sortable: false,
-            filterable: false,
-            resizable: false,
-            searchable: false,
-        },
-    ];
+    get deviceStatusOptions() {
+        return fleetOpsOptions('deviceStatuses');
+    }
+
+    get columns() {
+        const columns = buildDeviceTableColumns(this, { deviceActionMode: 'route', showDeviceStatus: false });
+        const actionsColumn = columns.find((column) => column.cellComponent === 'table/cell/dropdown');
+
+        actionsColumn?.actions.push(
+            {
+                separator: true,
+            },
+            {
+                label: this.intl.t('common.delete-resource', { resource: this.intl.t('resource.device') }),
+                fn: this.deviceActions.delete,
+                permission: 'fleet-ops delete device',
+            }
+        );
+
+        return columns;
+    }
+
+    @action openTelematic(telematic) {
+        if (telematic?.id) {
+            return this.telematicActions.transition.view(telematic);
+        }
+    }
+
+    @action hasAttachedVehicle(device) {
+        return Boolean(device?.attachable_uuid && this.isVehicleAttachment(device));
+    }
+
+    @action async viewAttachedVehicle(device) {
+        const vehicle = await this.resolveAttachedVehicle(device);
+
+        if (!vehicle) {
+            return;
+        }
+
+        if (this.vehicleActions.panel?.view) {
+            return this.vehicleActions.panel.view(vehicle);
+        }
+
+        return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', vehicle);
+    }
+
+    @action async locateAttachedVehicle(device) {
+        const vehicle = await this.resolveAttachedVehicle(device);
+
+        if (!vehicle) {
+            return;
+        }
+
+        await this.transitionToLiveMap();
+        await this.mapManager.waitForMap({ timeoutMs: 8000 });
+
+        this.mapManager.focusResource(vehicle, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.vehicleActions.panel?.view?.(vehicle, { closeOnTransition: true });
+            },
+        });
+    }
+
+    async transitionToLiveMap() {
+        try {
+            await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
+        } catch (_) {
+            // Keep locate actions usable even if another map transition is already active.
+        }
+    }
+
+    isVehicleAttachment(device) {
+        const attachableType = `${device?.attachable_type ?? ''}`.toLowerCase();
+
+        return !attachableType || attachableType.includes('vehicle');
+    }
+
+    async resolveAttachedVehicle(device) {
+        if (!device?.attachable_uuid || !this.isVehicleAttachment(device)) {
+            return null;
+        }
+
+        const attachable = device.attachable;
+
+        if (attachable && typeof attachable.then !== 'function') {
+            return attachable;
+        }
+
+        if (attachable && typeof attachable.then === 'function') {
+            return await attachable;
+        }
+
+        const cachedVehicle = this.store.peekRecord('vehicle', device.attachable_uuid);
+
+        if (cachedVehicle) {
+            return cachedVehicle;
+        }
+
+        try {
+            return await this.store.findRecord('vehicle', device.attachable_uuid);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+
+        return null;
+    }
 }

package/addon/controllers/connectivity/events/details.js

@@ -0,0 +1,70 @@
+import Controller from '@ember/controller';
+import { action, set } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+function firstPresent(...values) {
+    return values.find((value) => value !== undefined && value !== null && value !== '');
+}
+
+function toDate(value) {
+    if (value instanceof Date) {
+        return value;
+    }
+
+    const date = new Date(value);
+
+    return Number.isNaN(date.getTime()) ? value : date;
+}
+
+export default class ConnectivityEventsDetailsController extends Controller {
+    @service deviceEventActions;
+    @service hostRouter;
+
+    @tracked isMarkingProcessed = false;
+
+    get event() {
+        return this.model;
+    }
+
+    get isProcessed() {
+        return Boolean(firstPresent(this.event?.processed_at, this.event?.processedAt));
+    }
+
+    get processedStatus() {
+        return this.isProcessed ? 'success' : 'warning';
+    }
+
+    get processedLabel() {
+        return this.isProcessed ? 'Processed' : 'Unprocessed';
+    }
+
+    @action goBack() {
+        return this.hostRouter.transitionTo('console.fleet-ops.connectivity.events.index');
+    }
+
+    @action refresh() {
+        return this.hostRouter.refresh();
+    }
+
+    @action async markProcessed() {
+        if (this.isMarkingProcessed) {
+            return;
+        }
+
+        this.isMarkingProcessed = true;
+
+        try {
+            const response = await this.deviceEventActions.markProcessed(this.event);
+            const processedAt = firstPresent(response?.device_event?.processed_at, response?.device_event?.processedAt, new Date());
+
+            if (this.event) {
+                set(this.event, 'processed_at', toDate(processedAt));
+            }
+
+            return response;
+        } finally {
+            this.isMarkingProcessed = false;
+        }
+    }
+}