@fleetbase/fleetops-engine 0.6.54 → 0.6.55

package/addon/components/cell/telematic-provider.hbs

@@ -1,16 +1,33 @@
-<div ...attributes>
-    <button
-        type="button"
-        disabled={{and @column.permission (cannot @column.permission)}}
-        {{on "click" this.onClick}}
-        class="flex min-w-0 max-w-md items-start gap-2 py-1 text-left"
-    >
-        <div class="pt-0.5">
-            <Image src={{this.icon}} class="mr-3 h-8 w-8 flex-shrink-0 rounded-md" />
-        </div>
-        <div class="min-w-0 text-left">
-            <div class="truncate text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-300">{{n-a this.name}}</div>
-            <div class="mt-0.5 line-clamp-2 whitespace-normal text-left text-xs leading-4 text-gray-500 dark:text-gray-400">{{n-a this.description}}</div>
-        </div>
-    </button>
-</div>
+{{#if this.telematic}}
+    {{#if this.compact}}
+        <button
+            type="button"
+            disabled={{and @column.permission (cannot @column.permission)}}
+            {{on "click" this.onClick}}
+            class="group flex w-full min-w-0 cursor-pointer items-center gap-2 py-0.5 text-left"
+            data-test-telematic-provider-compact
+            ...attributes
+        >
+            <Image src={{this.icon}} @fallbackSrc="/engines-dist/images/telematics/providers/default.webp" class="h-5 w-5 flex-shrink-0 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
+            <div class="min-w-0 truncate text-sm leading-4 text-gray-900 group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-300">{{n-a this.name}}</div>
+        </button>
+    {{else}}
+        <button
+            type="button"
+            disabled={{and @column.permission (cannot @column.permission)}}
+            {{on "click" this.onClick}}
+            class="group flex w-full min-w-0 max-w-md cursor-pointer items-start gap-2 py-1 text-left"
+            ...attributes
+        >
+            <div class="pt-0.5">
+                <Image src={{this.icon}} @fallbackSrc="/engines-dist/images/telematics/providers/default.webp" class="mr-0.5 h-8 w-8 flex-shrink-0 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
+            </div>
+            <div class="min-w-0 text-left">
+                <div class="truncate text-sm text-gray-900 group-hover:text-blue-600 dark:text-gray-100 dark:group-hover:text-blue-300">{{n-a this.name}}</div>
+                <div class="mt-0.5 max-w-[225px] truncate whitespace-nowrap text-left text-xs leading-4 text-gray-500 dark:text-gray-400">{{n-a this.description}}</div>
+            </div>
+        </button>
+    {{/if}}
+{{else}}
+    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-telematic-provider-empty-text ...attributes>{{this.emptyText}}</div>
+{{/if}}

package/addon/components/cell/telematic-provider.js

@@ -1,36 +1,78 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
+import { action, get } from '@ember/object';
+
+const DEFAULT_PROVIDER_ICON = '/engines-dist/images/telematics/providers/default.webp';
 
 export default class CellTelematicProviderComponent extends Component {
+    get telematic() {
+        const resourcePath = this.args.column?.resourcePath;
+
+        if (typeof resourcePath === 'function') {
+            const resource = resourcePath(this.args.row, this.args.value, this.args.column);
+
+            return resource ?? null;
+        }
+
+        if (typeof resourcePath === 'string') {
+            const resource = get(this.args.row, resourcePath);
+
+            return resource ?? null;
+        }
+
+        if (this.args.row?.telematic) {
+            return this.args.row.telematic;
+        }
+
+        if (this.args.row?.telematic_uuid || this.args.row?.telematic_name) {
+            return {
+                id: this.args.row.telematic_uuid,
+                name: this.args.row.telematic_name,
+                provider: this.args.row.provider,
+                provider_descriptor: this.args.row.provider_descriptor,
+            };
+        }
+
+        return this.args.row;
+    }
+
+    get emptyText() {
+        return this.args.column?.emptyText ?? '-';
+    }
+
+    get compact() {
+        return this.args.column?.compact ?? false;
+    }
+
     get descriptor() {
-        return this.args.row?.provider_descriptor ?? {};
+        return this.telematic?.provider_descriptor ?? this.args.row?.provider_descriptor ?? {};
     }
 
     get name() {
-        return this.args.row?.name ?? this.descriptor.label ?? this.args.row?.provider;
+        return this.telematic?.name ?? this.descriptor.label ?? this.telematic?.provider ?? this.args.row?.provider ?? this.args.row?.telematic_name;
     }
 
     get description() {
-        return this.descriptor.description ?? this.args.row?.provider;
+        return this.descriptor.description ?? this.telematic?.provider ?? this.args.row?.provider;
     }
 
     get icon() {
-        return this.descriptor.icon;
+        return this.descriptor.icon ?? DEFAULT_PROVIDER_ICON;
     }
 
     @action onClick(event) {
         const { row, column, onClick } = this.args;
+        const resource = this.telematic ?? row;
 
         if (typeof onClick === 'function') {
-            onClick(row, event);
+            onClick(resource, event);
         }
 
         if (typeof column?.action === 'function') {
-            column.action(row, event);
+            column.action(resource, event);
         }
 
         if (typeof column?.onClick === 'function') {
-            column.onClick(row, event);
+            column.onClick(resource, event);
         }
     }
 }

package/addon/components/cell/vehicle-identity.hbs

@@ -0,0 +1,33 @@
+{{#if this.resource}}
+    {{#if this.compact}}
+        <button
+            type="button"
+            disabled={{and @column.permission (cannot @column.permission)}}
+            {{on "click" this.onClick}}
+            class="group flex w-full min-w-0 cursor-pointer items-center gap-2 py-0.5 text-left"
+            data-test-vehicle-identity-compact
+            ...attributes
+        >
+            <div class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
+                <Image src={{this.mediaUrl}} @fallbackSrc={{this.fallbackImage}} class="h-5 w-5 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
+                {{#if this.hasCompactStatusDot}}
+                    <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -ml-1 -mt-1 {{this.compactStatusDotClass}}" data-test-resource-identity-status-dot />
+                {{/if}}
+            </div>
+            <div class="min-w-0 truncate text-sm leading-4 text-gray-900 group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-300">{{n-a this.label}}</div>
+            {{#if this.assignedDriverLabel}}
+                <span
+                    data-test-resource-identity-meta-badge
+                    class="inline-flex min-w-0 max-w-[12rem] flex-shrink items-center rounded-lg bg-gray-200 px-1 py-0 text-[10px] leading-4 text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-300"
+                >
+                    <FaIcon @icon="user" @prefix="fas" @size="xs" class="mr-1 flex-shrink-0" />
+                    <span class="truncate">{{n-a this.assignedDriverLabel}}</span>
+                </span>
+            {{/if}}
+        </button>
+    {{else}}
+        <Table::Cell::ResourceIdentity @row={{this.resource}} @value={{@value}} @column={{this.column}} @onClick={{@onClick}} ...attributes />
+    {{/if}}
+{{else}}
+    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-identity-empty-text ...attributes>{{this.emptyText}}</div>
+{{/if}}

package/addon/components/cell/vehicle-identity.js

@@ -0,0 +1,138 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import config from 'ember-get-config';
+import { resolveIdentityCellResource } from '../../utils/identity-cell-resource';
+
+const DEFAULT_STATUS_TONES = {
+    available: 'text-green-500',
+    active: 'text-green-500',
+    in_service: 'text-green-500',
+    maintenance: 'text-yellow-500',
+    unavailable: 'text-gray-400',
+    inactive: 'text-gray-400',
+    out_of_service: 'text-red-500',
+};
+
+export default class CellVehicleIdentityComponent extends Component {
+    get resource() {
+        return resolveIdentityCellResource(this.args);
+    }
+
+    get emptyText() {
+        return this.args.column?.emptyText ?? '-';
+    }
+
+    get compact() {
+        return this.args.column?.compact ?? false;
+    }
+
+    get showStatus() {
+        return this.args.column?.showStatus ?? true;
+    }
+
+    get label() {
+        const vehicle = this.resource;
+
+        return get(vehicle, 'displayName') ?? get(vehicle, 'display_name') ?? get(vehicle, 'name');
+    }
+
+    get mediaUrl() {
+        return get(this.resource, 'photo_url');
+    }
+
+    get fallbackImage() {
+        return config?.defaultValues?.vehicleAvatar;
+    }
+
+    get hasCompactStatusDot() {
+        return this.args.column?.showStatusDot ?? this.args.column?.showOnlineIndicator ?? true;
+    }
+
+    get compactStatusValue() {
+        const vehicle = this.resource;
+
+        return get(vehicle, 'online') ?? get(vehicle, 'status');
+    }
+
+    get compactStatusToneClass() {
+        const value = this.compactStatusValue;
+        const statusToneMap = {
+            ...DEFAULT_STATUS_TONES,
+            ...(this.args.column?.statusToneMap ?? {}),
+        };
+
+        if (typeof this.args.column?.statusToneClass === 'function') {
+            return this.args.column.statusToneClass(value, this.resource, this.args.column);
+        }
+
+        if (typeof value === 'boolean') {
+            return value ? 'text-green-500' : 'text-yellow-200';
+        }
+
+        return statusToneMap[value] ?? statusToneMap[String(value ?? '').toLowerCase()] ?? 'text-gray-400';
+    }
+
+    get compactStatusDotClass() {
+        return this.compactStatusToneClass;
+    }
+
+    get assignedDriverLabel() {
+        const vehicle = this.resource;
+
+        return get(vehicle, 'driver.displayName') ?? get(vehicle, 'driver.display_name') ?? get(vehicle, 'driver.name') ?? get(vehicle, 'driver_name');
+    }
+
+    get column() {
+        return {
+            ...(this.args.column ?? {}),
+            labelPath: (vehicle) => get(vehicle, 'displayName') ?? get(vehicle, 'display_name') ?? get(vehicle, 'name'),
+            mediaPath: 'photo_url',
+            fallbackImage: config?.defaultValues?.vehicleAvatar,
+            statusPath: this.showStatus ? 'status' : undefined,
+            onlinePath: 'online',
+            showStatusBadge: this.showStatus ? (this.args.column?.showStatusBadge ?? true) : false,
+            statusBadgeSize: this.args.column?.statusBadgeSize ?? 'xxs',
+            statusBadgeWrapperClass: this.args.column?.statusBadgeWrapperClass ?? 'resource-identity-status-badge vehicle-identity-status-badge',
+            metaPaths: [
+                {
+                    value: (vehicle) => get(vehicle, 'plate_number') ?? get(vehicle, 'call_sign') ?? get(vehicle, 'vehicle_number') ?? get(vehicle, 'public_id'),
+                    icon: 'id-card',
+                    style: 'badge',
+                    class: 'max-w-[12rem]',
+                },
+                {
+                    value: (vehicle) => get(vehicle, 'driver.displayName') ?? get(vehicle, 'driver.display_name') ?? get(vehicle, 'driver.name') ?? get(vehicle, 'driver_name'),
+                    icon: 'user',
+                    style: 'badge',
+                    class: 'max-w-[12rem]',
+                },
+            ],
+            statusToneMap: {
+                available: 'text-green-500',
+                active: 'text-green-500',
+                in_service: 'text-green-500',
+                maintenance: 'text-yellow-500',
+                unavailable: 'text-gray-400',
+                inactive: 'text-gray-400',
+                out_of_service: 'text-red-500',
+            },
+        };
+    }
+
+    @action onClick(event) {
+        const { column, onClick } = this.args;
+        const resource = this.resource;
+
+        if (typeof onClick === 'function') {
+            onClick(resource, event);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(resource, event);
+        }
+
+        if (typeof column?.action === 'function') {
+            column.action(resource, event);
+        }
+    }
+}

package/addon/components/device/form.hbs

@@ -10,7 +10,7 @@
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
                     @onChange={{this.selectTelematic}}
-                    @disabled={{cannot-write @resource}}
+                    @disabled={{or (cannot-write @resource) this.isTelematicLocked}}
                     as |model|
                 >
                     <div class="space-x-2 text-sm">
@@ -227,4 +227,4 @@
     <RegistryYield @registry="fleet-ops:component:device:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+</div>

package/addon/components/device/form.js

@@ -8,6 +8,13 @@ export default class DeviceFormComponent extends Component {
     @service currentUser;
     @service notifications;
 
+    get isTelematicLocked() {
+        const resource = this.args.resource;
+        const hasTelematic = Boolean(resource?.telematic_uuid || resource?.telematic?.id);
+
+        return Boolean(hasTelematic && resource?.isNew === false);
+    }
+
     @action selectTelematic(telematic) {
         this.args.resource.setProperties({
             telematic,

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

@@ -1,35 +1,60 @@
-<div class="px-4 py-2">
-    <div class="flex flex-1 flex-row items-start justify-between">
-        <div class="flex flex-row space-x-3">
-            <div class="flex items-start justify-start rounded-full">
+<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={{@resource.photo_url}}
+                    src={{this.resource.photo_url}}
                     @fallbackSrc={{config "defaultValues.placeholderImage"}}
-                    alt={{@resource.displayName}}
+                    alt={{this.name}}
                     height="48"
                     width="48"
-                    class="h-14 w-14 rounded-full shadow-sm"
+                    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={{@resource.displayName}} />
+                    <InputInfo @text={{this.name}} />
                 </Attach::Tooltip>
             </div>
-            <div class="flex flex-col">
-                <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{@resource.displayName}}</h1>
-                <div>
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{concat
-                            (n-a (titleize @resource.provider))
-                            " "
-                            (n-a (get-fleet-ops-option-label "deviceTypes" @resource.type))
-                        }}</div>
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.serial_number}}</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.connectionStatus}} @size="xs">{{smart-humanize this.connectionStatus}}</Badge>
+                </div>
+
+                <div class="mt-1 flex max-w-2xl flex-wrap items-center gap-1.5">
+                    {{#if this.provider}}
+                        <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="satellite-dish" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{titleize this.provider}}</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="microchip" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{n-a (get-fleet-ops-option-label "deviceTypes" this.type)}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.identifier}}
+                        <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.identifier}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.attachedVehicle}}
+                        <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="car" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.attachedVehicle}}</span>
+                        </span>
+                    {{/if}}
+                    <span class="inline-flex max-w-[13rem] 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="clock" class="text-gray-400 dark:text-gray-300" />
+                        <span class="truncate">{{#if this.lastOnlineAt}}{{format-date-fns this.lastOnlineAt "dd MMM yyyy, HH:mm"}}{{else}}No last online{{/if}}</span>
+                    </span>
                 </div>
-                <Badge @status={{if @resource.is_online "online" "offline"}}>{{if @resource.is_online (t "common.online") (t "common.offline")}}</Badge>
             </div>
         </div>
-        <div class="next-view-header-right">
+        <div class="next-view-header-right flex-shrink-0">
             <Layout::Resource::Panel::HeaderActions
-                @resource={{@resource}}
+                @resource={{this.resource}}
                 @saveTask={{@saveTask}}
                 @saveOptions={{@saveOptions}}
                 @saveDisabled={{@saveDisabled}}

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

@@ -1,3 +1,51 @@
 import Component from '@glimmer/component';
+import { get } from '@ember/object';
 
-export default class DevicePanelHeaderComponent extends Component {}
+export default class DevicePanelHeaderComponent extends Component {
+    get resource() {
+        return this.args.resource ?? {};
+    }
+
+    get name() {
+        return (
+            get(this.resource, 'displayName') ??
+            get(this.resource, 'display_name') ??
+            get(this.resource, 'name') ??
+            get(this.resource, 'device_id') ??
+            get(this.resource, 'imei') ??
+            get(this.resource, 'serial_number') ??
+            get(this.resource, 'public_id') ??
+            '-'
+        );
+    }
+
+    get connectionStatus() {
+        return get(this.resource, 'connection_status') ?? get(this.resource, 'status') ?? (get(this.resource, 'is_online') || get(this.resource, 'online') ? 'online' : 'offline');
+    }
+
+    get provider() {
+        return get(this.resource, 'telematic.name') ?? get(this.resource, 'telematic_name') ?? get(this.resource, 'provider');
+    }
+
+    get type() {
+        return get(this.resource, 'type');
+    }
+
+    get identifier() {
+        return get(this.resource, 'imei') ?? get(this.resource, 'serial_number') ?? get(this.resource, 'device_id') ?? get(this.resource, 'public_id');
+    }
+
+    get attachedVehicle() {
+        return (
+            get(this.resource, 'attached_to_name') ??
+            get(this.resource, 'attachable.displayName') ??
+            get(this.resource, 'attachable.display_name') ??
+            get(this.resource, 'attachable.name') ??
+            get(this.resource, 'attachable_uuid')
+        );
+    }
+
+    get lastOnlineAt() {
+        return get(this.resource, 'last_online_at') ?? get(this.resource, 'lastOnlineAt');
+    }
+}

package/addon/components/device/panel-tabs/events.hbs

@@ -0,0 +1,30 @@
+<div class="flex flex-col gap-3 p-3" ...attributes>
+    <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Telemetry Events</h2>
+            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Recent device events, warning signals, and processing state.</p>
+        </div>
+        <Button @icon="refresh" @size="xs" @onClick={{this.refreshEvents}} @isLoading={{this.loadEvents.isRunning}} />
+    </div>
+
+    <Layout::Resource::Tabular
+        @resource="device-event"
+        @title="Telemetry Events"
+        @data={{this.events}}
+        @columns={{this.columns}}
+        @controller={{this}}
+        @pagination={{false}}
+        @withoutHeader={{true}}
+        @tableWrapperClass="no-table-extra-spacing"
+        @emptyStateComponent={{component
+            "table/empty-state"
+            variant="compact"
+            icon="bolt"
+            title="No telemetry events"
+            description="Events appear after this device reports provider activity."
+            primaryText="Refresh"
+            primaryIcon="refresh"
+            primaryAction=this.refreshEvents
+        }}
+    />
+</div>

package/addon/components/device/panel-tabs/events.js

@@ -0,0 +1,128 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+
+const severityOptions = [
+    { label: 'Info', value: 'info' },
+    { label: 'Warning', value: 'warning' },
+    { label: 'Error', value: 'error' },
+    { label: 'Critical', value: 'critical' },
+    { label: 'High', value: 'high' },
+];
+
+function toRecentList(records) {
+    const list = Array.from(records ?? []);
+
+    list.meta = {
+        current_page: 1,
+        last_page: 1,
+        per_page: list.length,
+        total: list.length,
+        from: list.length > 0 ? 1 : 0,
+        to: list.length,
+    };
+
+    return list;
+}
+
+export default class DevicePanelTabsEventsComponent extends Component {
+    @service deviceEventActions;
+    @service store;
+
+    @tracked events = toRecentList();
+
+    constructor() {
+        super(...arguments);
+        this.loadEvents.perform();
+    }
+
+    get device() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    get columns() {
+        return [
+            {
+                sticky: true,
+                label: 'Event',
+                valuePath: 'event_type',
+                cellComponent: 'table/cell/anchor',
+                action: this.deviceEventActions.panel?.view ?? this.deviceEventActions.transition.view,
+                permission: 'fleet-ops view device-event',
+                resizable: true,
+            },
+            {
+                label: 'Severity',
+                valuePath: 'severity',
+                cellComponent: 'table/cell/status',
+                filterOptions: severityOptions,
+                resizable: true,
+            },
+            {
+                label: 'Message',
+                valuePath: 'message',
+                resizable: true,
+            },
+            {
+                label: 'Code',
+                valuePath: 'code',
+                resizable: true,
+            },
+            {
+                label: 'Processed',
+                valuePath: 'processedAt',
+                sortParam: 'processed_at',
+                resizable: true,
+            },
+            {
+                label: 'Occurred',
+                valuePath: 'occurredAt',
+                sortParam: 'occurred_at',
+                resizable: true,
+            },
+            {
+                label: '',
+                cellComponent: 'table/cell/dropdown',
+                ddButtonText: false,
+                ddButtonIcon: 'ellipsis-h',
+                ddButtonIconPrefix: 'fas',
+                wrapperClass: 'flex items-center justify-end mx-2',
+                sticky: 'right',
+                width: 60,
+                actions: [
+                    {
+                        label: 'View event',
+                        fn: this.deviceEventActions.panel?.view ?? this.deviceEventActions.transition.view,
+                        permission: 'fleet-ops view device-event',
+                    },
+                    {
+                        label: 'Mark processed',
+                        fn: this.markProcessed,
+                        permission: 'fleet-ops update device-event',
+                    },
+                ],
+            },
+        ];
+    }
+
+    @action async markProcessed(deviceEvent) {
+        await this.deviceEventActions.markProcessed(deviceEvent);
+        await this.loadEvents.perform();
+    }
+
+    @action refreshEvents() {
+        return this.loadEvents.perform();
+    }
+
+    @task *loadEvents() {
+        if (!this.device?.id) {
+            this.events = toRecentList();
+            return;
+        }
+
+        const events = yield this.store.query('device-event', { device_uuid: this.device.id, limit: 10, sort: '-created_at' });
+        this.events = toRecentList(events);
+    }
+}

package/addon/components/device/panel-tabs/sensors.hbs

@@ -0,0 +1,30 @@
+<div class="flex flex-col gap-3 p-3" ...attributes>
+    <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Sensor Inventory</h2>
+            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Recent sensor readings and health for this device.</p>
+        </div>
+        <Button @icon="refresh" @size="xs" @onClick={{this.refreshSensors}} @isLoading={{this.loadSensors.isRunning}} />
+    </div>
+
+    <Layout::Resource::Tabular
+        @resource="sensor"
+        @title="Device Sensors"
+        @data={{this.sensors}}
+        @columns={{this.columns}}
+        @controller={{this}}
+        @pagination={{false}}
+        @withoutHeader={{true}}
+        @tableWrapperClass="no-table-extra-spacing"
+        @emptyStateComponent={{component
+            "table/empty-state"
+            variant="compact"
+            icon="gauge-high"
+            title="No sensors connected"
+            description="Sensors appear here after provider telemetry links them to this device."
+            primaryText="Refresh"
+            primaryIcon="refresh"
+            primaryAction=this.refreshSensors
+        }}
+    />
+</div>