@fleetbase/fleetops-engine 0.6.54 → 0.6.56

package/addon/services/vehicle-actions.js

@@ -66,6 +66,26 @@ export default class VehicleActionsService extends ResourceActionService {
         this.initialize('vehicle', { status: 'available' });
     }
 
+    async resolveVehicleResource(vehicle) {
+        if (typeof vehicle?.then === 'function') {
+            return await vehicle;
+        }
+
+        if (typeof vehicle?.loadResource === 'function') {
+            return (await vehicle.loadResource()) ?? vehicle;
+        }
+
+        return vehicle;
+    }
+
+    async reloadIndexResource(vehicle) {
+        if (vehicle?.meta?._index_resource) {
+            await vehicle.reload();
+        }
+
+        return vehicle;
+    }
+
     transition = {
         view: (vehicle) => this.transitionTo('management.vehicles.index.details', vehicle),
         edit: (vehicle) => this.transitionTo('management.vehicles.index.edit', vehicle),
@@ -87,9 +107,7 @@ export default class VehicleActionsService extends ResourceActionService {
             });
         },
         edit: async (vehicle, options = {}) => {
-            if (vehicle?.meta?._index_resource) {
-                await vehicle.reload();
-            }
+            vehicle = await this.reloadIndexResource(await this.resolveVehicleResource(vehicle));
 
             return this.resourceContextPanel.open({
                 content: 'vehicle/form',
@@ -109,9 +127,7 @@ export default class VehicleActionsService extends ResourceActionService {
             });
         },
         view: async (vehicle, options = {}) => {
-            if (vehicle?.meta?._index_resource) {
-                await vehicle.reload();
-            }
+            vehicle = await this.reloadIndexResource(await this.resolveVehicleResource(vehicle));
 
             return this.resourceContextPanel.open({
                 vehicle,
@@ -144,9 +160,7 @@ export default class VehicleActionsService extends ResourceActionService {
             });
         },
         edit: async (vehicle, options = {}, saveOptions = {}) => {
-            if (vehicle?.meta?._index_resource) {
-                await vehicle.reload();
-            }
+            vehicle = await this.reloadIndexResource(await this.resolveVehicleResource(vehicle));
 
             return this.modalsManager.show('modals/resource', {
                 resource: vehicle,
@@ -159,9 +173,7 @@ export default class VehicleActionsService extends ResourceActionService {
             });
         },
         view: async (vehicle, options = {}) => {
-            if (vehicle?.meta?._index_resource) {
-                await vehicle.reload();
-            }
+            vehicle = await this.reloadIndexResource(await this.resolveVehicleResource(vehicle));
 
             return this.modalsManager.show('modals/resource', {
                 resource: vehicle,

package/addon/services/vendor-actions.js

@@ -43,8 +43,11 @@ export default class VendorActionsService extends ResourceActionService {
         view: (vendor) => {
             return this.resourceContextPanel.open({
                 vendor,
+                header: 'vendor/panel-header',
                 tabs: [
                     {
+                        key: 'overview',
+                        id: 'overview',
                         label: this.intl.t('common.overview'),
                         component: 'vendor/details',
                     },

package/addon/styles/fleetops-engine.css

@@ -1,4 +1,4 @@
-/* stylelint-disable alpha-value-notation -- FleetOps lazy engine production CSS is minified by legacy clean-css, which corrupts comma-form rgba() percent alpha values. */
+/* stylelint-disable alpha-value-notation -- Fleet-Ops lazy engine production CSS is minified by legacy clean-css, which corrupts comma-form rgba() percent alpha values. */
 .scheduler-left-sidebar {
     border-right: 1px rgb(229 231 235 / 100%) solid;
     height: 100vh;
@@ -294,6 +294,14 @@ body[data-theme='dark'] .fleetops-connectivity-kpi-accent-rose .fleetops-connect
     color: #fde047;
 }
 
+.fleetops-device-status-badge.status-badge > span {
+    padding: 0 0.25rem !important;
+    border-radius: 0.125rem !important;
+    font-size: 0.5625rem !important;
+    line-height: 0.75rem !important;
+    font-weight: 700;
+}
+
 .fleetops-provider-connections-panel .table-wrapper table tbody tr td,
 .fleetops-provider-connections-panel .next-table-wrapper table tbody tr td {
     vertical-align: top;

package/addon/templates/connectivity/devices/index/details/vehicle.hbs

@@ -1,5 +1,5 @@
 <div class="flex flex-col gap-3 p-3">
-    <div class="flex items-start justify-between gap-3">
+    <div class="flex flex-col items-start justify-between gap-3">
         <div class="min-w-0">
             <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Vehicle Attachment</h2>
             <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Fleet context for telemetry from this device.</p>
@@ -7,9 +7,12 @@
 
         {{#if this.hasVehicle}}
             <div class="flex flex-nowrap items-center gap-2 whitespace-nowrap">
-                {{#if this.vehicle.id}}
+                {{#if this.canOpenVehicle}}
                     <Button @icon="eye" @text="Open Vehicle" @size="xs" @onClick={{this.openVehicle}} />
                 {{/if}}
+                {{#if this.canLocateVehicle}}
+                    <Button @icon="location-dot" @text="Locate" @size="xs" @onClick={{this.locateVehicle}} />
+                {{/if}}
                 <Button @icon="shuffle" @text="Change Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
                 <Button @icon="unlink" @text="Detach" @size="xs" @type="danger" @onClick={{this.detachFromVehicle}} />
             </div>
@@ -70,6 +73,67 @@
                 </div>
             </div>
         </section>
+
+        <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="flex items-start justify-between gap-3 border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <div class="min-w-0">
+                    <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Latest Positions</h3>
+                    <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Recent vehicle coordinates reported through this device attachment.</p>
+                </div>
+                {{#if this.canOpenVehicle}}
+                    <Button @icon="route" @text="Full History" @size="xs" @onClick={{this.openVehiclePositions}} />
+                {{/if}}
+            </div>
+
+            {{#if this.hasPositions}}
+                <div class="grid grid-cols-1 gap-0 divide-y divide-gray-100 dark:divide-gray-700">
+                    {{#each this.positions as |position index|}}
+                        <div class="flex flex-wrap items-center justify-between gap-3 px-3 py-2 text-xs">
+                            <div class="flex min-w-0 items-center gap-2">
+                                <div class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300">
+                                    <span class="font-bold">{{add index 1}}</span>
+                                </div>
+                                <div class="min-w-0">
+                                    <div class="truncate font-semibold text-gray-900 dark:text-gray-100">{{n-a (format-date-fns position.created_at "dd MMM yyyy, HH:mm")}}</div>
+                                    <div class="truncate text-gray-500 dark:text-gray-400">{{n-a (point-coordinates position.coordinates)}}</div>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 gap-2 text-right text-gray-500 dark:text-gray-400 sm:grid-cols-3">
+                                <div>
+                                    <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Speed</div>
+                                    <div class="text-gray-800 dark:text-gray-100">{{n-a position.speed}}</div>
+                                </div>
+                                <div>
+                                    <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Heading</div>
+                                    <div class="text-gray-800 dark:text-gray-100">{{n-a position.heading position.bearing}}</div>
+                                </div>
+                                <div>
+                                    <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Altitude</div>
+                                    <div class="text-gray-800 dark:text-gray-100">{{n-a position.altitude}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+
+                <div class="border-t border-gray-200 dark:border-gray-700">
+                    <PositionsReplay @resource={{this.vehicle}} @mapHeight={{180}} class="max-h-[360px] overflow-hidden" />
+                </div>
+                <Spacer @height="150px" />
+            {{else}}
+                <div class="p-3">
+                    <Telematic::TabEmptyState
+                        @tone="info"
+                        @icon="location-dot"
+                        @title="No recent positions"
+                        @message="This attached vehicle does not have recent position history available yet."
+                        @primaryText="Locate Vehicle"
+                        @primaryIcon="location-dot"
+                        @primaryAction={{this.locateVehicle}}
+                    />
+                </div>
+            {{/if}}
+        </section>
     {{else}}
         <Telematic::TabEmptyState
             @tone="warning"

package/addon/templates/connectivity/events/details.hbs

@@ -0,0 +1,40 @@
+<div class="h-full overflow-y-auto bg-gray-50 dark:bg-gray-900">
+    <section class="sticky top-0 z-40 border-b border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
+        <div class="mx-auto flex w-full max-w-7xl flex-col gap-3 px-4 py-3 md:px-6 lg:flex-row lg:items-start lg:justify-between">
+            <div class="min-w-0 flex-1">
+                <div class="flex flex-wrap items-center gap-2">
+                    <h1 class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{{smart-humanize this.event.event_type}}</h1>
+                    <Badge @status={{this.event.severity}} @hideStatusDot={{true}}>{{smart-humanize this.event.severity}}</Badge>
+                    <Badge @status={{this.processedStatus}} @hideStatusDot={{true}}>{{this.processedLabel}}</Badge>
+                </div>
+                <div class="mt-1 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
+                    <span>{{n-a this.event.public_id}}</span>
+                    <span>Device: {{n-a (or this.event.device_name this.event.device_id this.event.ident)}}</span>
+                    <span>Provider: {{n-a (or this.event.telematic_name this.event.provider)}}</span>
+                    <span>Occurred: {{n-a (format-date-fns this.event.occurred_at "dd MMM yyyy, HH:mm")}}</span>
+                </div>
+            </div>
+
+            <div class="flex shrink-0 flex-row flex-nowrap items-center gap-2 whitespace-nowrap">
+                <Button @icon="arrow-left" @text="Back" @size="xs" @wrapperClass="shrink-0" @onClick={{this.goBack}} />
+                <Button @icon="refresh" @text="Refresh" @size="xs" @wrapperClass="shrink-0" @onClick={{this.refresh}} />
+                {{#unless this.isProcessed}}
+                    <Button
+                        @icon="check"
+                        @text="Mark Processed"
+                        @type="primary"
+                        @size="xs"
+                        @wrapperClass="shrink-0"
+                        @isLoading={{this.isMarkingProcessed}}
+                        @disabled={{this.isMarkingProcessed}}
+                        @onClick={{this.markProcessed}}
+                    />
+                {{/unless}}
+            </div>
+        </div>
+    </section>
+
+    <section class="mx-auto w-full max-w-7xl">
+        <DeviceEvent::Details @resource={{this.event}} />
+    </section>
+</div>

package/addon/templates/management/vendors/index/details.hbs

@@ -1,7 +1,7 @@
 <Layout::Resource::Panel
     @resource={{@model}}
     @controller={{this}}
-    @headerTitle={{or @model.name}}
+    @headerComponent={{component "vendor/panel-header"}}
     @actionButtons={{this.actionButtons}}
     @onPressCancel={{transition-to "management.vendors.index"}}
     @onOverlayReady={{fn (mut this.overlay)}}
@@ -11,4 +11,4 @@
     <TabNavigation @tabs={{this.tabs}} @contentClass="scrollable" @tablistClass="pl-2">
         {{outlet}}
     </TabNavigation>
-</Layout::Resource::Panel>
+</Layout::Resource::Panel>

package/addon/templates/settings/map.hbs

@@ -14,15 +14,12 @@
     <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
 
-            {{!-- ─── Map Provider Panel ──────────────────────────────────────────── --}}
+            {{! ─── Map Provider Panel ──────────────────────────────────────────── }}
             <ContentPanel @title={{t "settings.map.configure-map"}} @open={{true}} @wrapperClass="bordered-classic">
                 {{#if this.settingsLoaded}}
 
-                    {{!-- Provider selector --}}
-                    <InputGroup
-                        @name={{t "settings.map.map-provider"}}
-                        @helpText={{t "settings.map.map-provider-help-text"}}
-                    >
+                    {{! Provider selector }}
+                    <InputGroup @name={{t "settings.map.map-provider"}} @helpText={{t "settings.map.map-provider-help-text"}}>
                         <Select
                             class="w-full flex-1"
                             @value={{this.mapProvider}}
@@ -34,15 +31,47 @@
                         />
                     </InputGroup>
 
+                    {{#if this.isGoogleMapsSelected}}
+                        <InputGroup @name={{t "settings.map.google-maps-map-type"}} @helpText={{t "settings.map.google-maps-map-type-help-text"}}>
+                            <Select
+                                class="w-full flex-1"
+                                @value={{this.googleMapsMapType}}
+                                @options={{this.googleMapsMapTypeOptions}}
+                                @optionLabel="label"
+                                @optionValue="value"
+                                @placeholder={{t "settings.map.select-map-type"}}
+                                @onSelect={{fn (mut this.googleMapsMapType)}}
+                            />
+                        </InputGroup>
+
+                        <InputGroup>
+                            <Toggle
+                                @label={{t "settings.map.show-traffic-layer"}}
+                                @isToggled={{this.showGoogleMapsTrafficLayer}}
+                                @onToggle={{fn (mut this.showGoogleMapsTrafficLayer)}}
+                                @helpText={{t "settings.map.show-traffic-layer-help-text"}}
+                            />
+                        </InputGroup>
+
+                        <InputGroup>
+                            <Toggle
+                                @label={{t "settings.map.show-transit-layer"}}
+                                @isToggled={{this.showGoogleMapsTransitLayer}}
+                                @onToggle={{fn (mut this.showGoogleMapsTransitLayer)}}
+                                @helpText={{t "settings.map.show-transit-layer-help-text"}}
+                            />
+                        </InputGroup>
+                    {{/if}}
+
                 {{else}}
-                    {{!-- Loading state --}}
+                    {{! Loading state }}
                     <div class="flex items-center justify-center py-8">
                         <Spinner />
                     </div>
                 {{/if}}
             </ContentPanel>
 
-            {{!-- Extension point for third-party panels --}}
+            {{! Extension point for third-party panels }}
             <RegistryYield @registry="fleet-ops:template:settings:map" as |RegistryComponent|>
                 <RegistryComponent @controller={{this}} />
             </RegistryYield>
@@ -50,4 +79,4 @@
         </div>
     </div>
     <Spacer @height="600px" />
-</Layout::Section::Body>
+</Layout::Section::Body>

package/addon/templates/settings/notifications.hbs

@@ -19,6 +19,7 @@
                         <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                             <PowerSelectMultiple
                                 @searchEnabled={{true}}
+                                @searchField="label"
                                 @options={{this.notifiables}}
                                 @selected={{get this.notificationSettings (concat (get-notification-key notification.definition notification.name) ".notifiables")}}
                                 @onChange={{fn this.onSelectNotifiable notification}}
@@ -35,4 +36,4 @@
         </div>
     </div>
     <Spacer @height="600px" />
-</Layout::Section::Body>
+</Layout::Section::Body>

package/addon/templates/settings/routing.hbs

@@ -64,6 +64,7 @@
                     <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                         <PowerSelectMultiple
                             @searchEnabled={{true}}
+                            @searchField="label"
                             @options={{this.trackingProviderOptions}}
                             @selected={{this.selectedTrackingFallbackOptions}}
                             @onChange={{this.setTrackingFallbacks}}

package/addon/utils/device-table-columns.js

@@ -0,0 +1,288 @@
+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' },
+];
+
+const attachmentStateOptions = [
+    { label: 'Attached', value: 'attached' },
+    { label: 'Unattached', value: 'unattached' },
+];
+
+export { connectionStatusOptions, attachmentStateOptions };
+
+export default function buildDeviceTableColumns(controller, options = {}) {
+    const { showProvider = true, showActions = true, deviceActionMode = 'route', showDeviceStatus = true } = options;
+    const viewDevice =
+        deviceActionMode === 'panel'
+            ? (controller.deviceActions.panel?.view ?? controller.deviceActions.transition?.view)
+            : (controller.deviceActions.transition?.view ?? controller.deviceActions.panel?.view);
+    const editDevice =
+        deviceActionMode === 'panel'
+            ? (controller.deviceActions.panel?.edit ?? controller.deviceActions.transition?.edit)
+            : (controller.deviceActions.transition?.edit ?? controller.deviceActions.panel?.edit);
+
+    const columns = [
+        {
+            sticky: true,
+            label: 'Telematic Device',
+            valuePath: 'displayName',
+            cellComponent: 'cell/device-identity',
+            action: viewDevice,
+            compact: true,
+            permission: 'fleet-ops view device',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterParam: 'query',
+            filterComponent: 'filter/string',
+            showStatus: showDeviceStatus,
+        },
+        {
+            label: 'Connection',
+            valuePath: 'connection_status',
+            cellComponent: 'table/cell/status',
+            resizable: true,
+            sortable: false,
+            filterable: true,
+            filterParam: 'connection_status',
+            filterComponent: 'filter/multi-option',
+            filterOptions: connectionStatusOptions,
+            filterOptionLabel: 'label',
+            filterOptionValue: 'value',
+        },
+    ];
+    const providerIdColumn = {
+        label: 'Provider ID / IMEI',
+        valuePath: 'device_id',
+        resizable: true,
+        sortable: true,
+        filterable: true,
+        filterParam: 'device_id',
+        filterComponent: 'filter/string',
+    };
+    const vehicleColumn = {
+        label: 'Vehicle',
+        valuePath: 'attached_to_name',
+        cellComponent: 'cell/vehicle-identity',
+        action: async (vehicle) => {
+            const resolvedVehicle = vehicle?.loadResource ? ((await vehicle.loadResource()) ?? vehicle) : vehicle;
+
+            if (resolvedVehicle?.id && controller.vehicleActions?.panel?.view) {
+                return controller.vehicleActions.panel.view(resolvedVehicle);
+            }
+        },
+        compact: true,
+        permission: 'fleet-ops view vehicle',
+        showStatusBadge: true,
+        emptyText: '-',
+        resourcePath: (device) => {
+            const attachableType = `${device?.attachable_type ?? ''}`.toLowerCase();
+
+            if (!device?.attachable_uuid || (attachableType && !attachableType.includes('vehicle'))) {
+                return null;
+            }
+
+            return (
+                device.attachable ?? {
+                    id: device.attachable_uuid,
+                    displayName: device.attached_to_name,
+                    display_name: device.attached_to_name,
+                    name: device.attached_to_name,
+                    public_id: device.attachable_uuid,
+                    vehicle_number: device.plate_number ?? device.call_sign ?? device.vehicle_number ?? device.attachable_uuid,
+                    loadResource: () => controller.resolveAttachedVehicle?.(device),
+                }
+            );
+        },
+        resizable: true,
+        sortable: false,
+        filterable: true,
+        filterParam: 'vehicle',
+        filterComponent: 'filter/model',
+        filterComponentPlaceholder: 'Select vehicle',
+        model: 'vehicle',
+        modelNamePath: 'displayName',
+    };
+
+    if (showProvider) {
+        columns.push({
+            label: 'Telematic Provider',
+            valuePath: 'telematic_name',
+            cellComponent: 'cell/telematic-provider',
+            compact: true,
+            action: controller.openTelematic,
+            permission: 'fleet-ops view telematic',
+            resizable: true,
+            sortable: false,
+            filterable: true,
+            filterParam: 'telematic',
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: 'Select telematic',
+            model: 'telematic',
+        });
+        columns.push(vehicleColumn, providerIdColumn);
+    } else {
+        columns.push(providerIdColumn, vehicleColumn);
+    }
+
+    columns.push(
+        {
+            label: 'Sensors',
+            valuePath: 'sensors_count',
+            resizable: true,
+            sortable: false,
+            filterable: false,
+        },
+        {
+            label: 'Last Seen',
+            valuePath: 'lastOnlineAt',
+            sortParam: 'last_online_at',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterParam: 'last_online_at',
+            filterComponent: 'filter/date',
+        },
+        {
+            label: 'Provider',
+            valuePath: 'provider',
+            hidden: true,
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterParam: 'provider',
+            filterComponent: 'filter/string',
+        },
+        {
+            label: 'Type',
+            valuePath: 'type',
+            hidden: true,
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterParam: 'type',
+            filterComponent: 'filter/multi-option',
+            filterOptions: controller.deviceTypeOptions,
+        },
+        {
+            label: 'Serial Number',
+            valuePath: 'serial_number',
+            hidden: true,
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterParam: 'serial_number',
+            filterComponent: 'filter/string',
+        },
+        {
+            label: controller.intl.t('column.status'),
+            valuePath: 'status',
+            cellComponent: 'table/cell/status',
+            hidden: true,
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterParam: 'status',
+            filterComponent: 'filter/multi-option',
+            filterOptions: controller.deviceStatusOptions,
+        },
+        {
+            label: 'Attachment',
+            valuePath: 'attachable_uuid',
+            hidden: true,
+            resizable: true,
+            sortable: false,
+            filterable: true,
+            filterParam: 'attachment_state',
+            filterComponent: 'filter/select',
+            filterOptions: attachmentStateOptions,
+            filterOptionLabel: 'label',
+            filterOptionValue: 'value',
+        },
+        {
+            label: controller.intl.t('column.updated-at'),
+            valuePath: 'updatedAt',
+            sortParam: 'updated_at',
+            resizable: true,
+            sortable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/date',
+        }
+    );
+
+    if (showActions) {
+        columns.push({
+            label: '',
+            cellComponent: 'table/cell/dropdown',
+            ddButtonText: false,
+            ddButtonIcon: 'ellipsis-h',
+            ddButtonIconPrefix: 'fas',
+            ddMenuLabel: controller.intl.t('common.resource-actions', { resource: controller.intl.t('resource.device') }),
+            cellClassNames: 'overflow-visible align-middle',
+            wrapperClass: 'flex items-center justify-end mx-2',
+            sticky: 'right',
+            width: 60,
+            actions: [
+                {
+                    label: controller.intl.t('common.view-resource', { resource: controller.intl.t('resource.device') }),
+                    fn: viewDevice,
+                    permission: 'fleet-ops view device',
+                },
+                {
+                    label: controller.intl.t('common.edit-resource', { resource: controller.intl.t('resource.device') }),
+                    fn: editDevice,
+                    permission: 'fleet-ops update device',
+                },
+                {
+                    label: 'Attach or change vehicle',
+                    fn: controller.openAttachDeviceModal ?? controller.deviceActions.attachToVehicle,
+                    permission: 'fleet-ops update device',
+                },
+                {
+                    label: controller.intl.t('device.actions.detach-from-vehicle'),
+                    fn: controller.deviceActions.detachFromVehicle,
+                    permission: 'fleet-ops update device',
+                    isVisible: controller.hasAttachedVehicle,
+                },
+                {
+                    separator: true,
+                    isVisible: controller.hasAttachedVehicle,
+                },
+                {
+                    label: 'View attached vehicle',
+                    fn: controller.viewAttachedVehicle,
+                    permission: 'fleet-ops view vehicle',
+                    isVisible: controller.hasAttachedVehicle,
+                },
+                {
+                    label: 'Locate attached vehicle on map',
+                    fn: controller.locateAttachedVehicle,
+                    permission: 'fleet-ops view vehicle',
+                    isVisible: controller.hasAttachedVehicle,
+                },
+                ...(controller.openDeviceEvents
+                    ? [
+                          {
+                              separator: true,
+                          },
+                          {
+                              label: 'Review recent events',
+                              fn: controller.openDeviceEvents,
+                              permission: 'fleet-ops view device-event',
+                          },
+                      ]
+                    : []),
+            ],
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        });
+    }
+
+    return columns;
+}

package/addon/utils/identity-cell-resource.js

@@ -0,0 +1,20 @@
+import { get } from '@ember/object';
+
+export function resolveIdentityCellResource(args) {
+    const column = args.column ?? {};
+    const resourcePath = column.resourcePath;
+
+    if (typeof resourcePath === 'function') {
+        return resourcePath(args.row, args.value, column) ?? null;
+    }
+
+    if (typeof resourcePath === 'string') {
+        return get(args.row, resourcePath) ?? null;
+    }
+
+    if (args.value && typeof args.value === 'object') {
+        return args.value;
+    }
+
+    return args.row;
+}