@fleetbase/fleetops-engine 0.6.53 → 0.6.55

package/addon/components/device/details.js

@@ -1,3 +1,176 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
 
-export default class DeviceDetailsComponent extends Component {}
+const warningSeverities = ['warning', 'error', 'critical', 'high'];
+
+export default class DeviceDetailsComponent extends Component {
+    @service store;
+    @service intl;
+
+    @tracked sensors = [];
+    @tracked events = [];
+    @tracked sensorTotal;
+    @tracked eventTotal;
+
+    constructor() {
+        super(...arguments);
+        this.loadOperationalSummary.perform();
+    }
+
+    get resource() {
+        return this.args.resource;
+    }
+
+    get displayName() {
+        return this.resource?.displayName ?? this.resource?.name ?? this.resource?.device_id ?? this.resource?.serial_number ?? this.resource?.public_id ?? this.intl.t('resource.device');
+    }
+
+    get providerDescriptor() {
+        return this.resource?.telematic?.provider_descriptor;
+    }
+
+    get providerLabel() {
+        return this.providerDescriptor?.label ?? this.resource?.telematic?.name ?? this.resource?.provider ?? this.resource?.telematic_name;
+    }
+
+    get providerIcon() {
+        return this.providerDescriptor?.icon;
+    }
+
+    get connectionStatus() {
+        return this.resource?.connection_status ?? (this.resource?.is_online ? 'online' : 'offline');
+    }
+
+    get connectionTone() {
+        switch (this.connectionStatus) {
+            case 'online':
+                return 'online';
+            case 'recently_offline':
+                return 'warning';
+            case 'never_connected':
+            case 'long_offline':
+                return 'danger';
+            default:
+                return 'offline';
+        }
+    }
+
+    get connectionLabel() {
+        return this.connectionStatus ? this.connectionStatus.replaceAll('_', ' ') : 'Unknown';
+    }
+
+    get attachedVehicleName() {
+        return this.resource?.attached_to_name ?? this.resource?.attachable?.displayName ?? this.resource?.attachable?.display_name ?? this.resource?.attachable?.name;
+    }
+
+    get attachmentLabel() {
+        return this.attachedVehicleName ?? 'Unattached';
+    }
+
+    get attachmentTone() {
+        return this.attachedVehicleName ? 'success' : 'warning';
+    }
+
+    get lastSeenLabel() {
+        return this.resource?.last_online_at ?? this.resource?.lastOnlineAt;
+    }
+
+    get signalLabel() {
+        return this.resource?.signal_strength ?? this.resource?.data?.signal_strength ?? this.resource?.meta?.signal_strength;
+    }
+
+    get firmwareLabel() {
+        return this.resource?.firmware_version ?? this.resource?.data?.firmware_version ?? this.resource?.meta?.firmware_version;
+    }
+
+    get lastPositionLabel() {
+        const position = this.resource?.last_position;
+
+        if (!position) {
+            return null;
+        }
+
+        if (typeof position === 'string') {
+            return position;
+        }
+
+        const latitude = position.latitude ?? position.lat ?? position.coordinates?.[1];
+        const longitude = position.longitude ?? position.lng ?? position.lon ?? position.coordinates?.[0];
+
+        if (latitude && longitude) {
+            return `${latitude}, ${longitude}`;
+        }
+
+        return null;
+    }
+
+    get warningEventsCount() {
+        return this.events.filter((event) => warningSeverities.includes(String(event.severity ?? '').toLowerCase())).length;
+    }
+
+    get unprocessedEventsCount() {
+        return this.events.filter((event) => !event.processed_at && !event.is_processed).length;
+    }
+
+    get activeSensorsCount() {
+        return this.sensors.filter((sensor) => sensor.is_active || sensor.status === 'active' || sensor.status === 'online').length;
+    }
+
+    get reportingSensorsCount() {
+        return this.sensors.filter((sensor) => sensor.last_value || sensor.last_reading_at).length;
+    }
+
+    get metrics() {
+        return [
+            {
+                label: 'Connection',
+                value: this.connectionLabel,
+                icon: this.connectionStatus === 'online' ? 'signal' : 'power-off',
+                accentClass: this.connectionStatus === 'online' ? 'fleetops-connectivity-kpi-accent-green' : 'fleetops-connectivity-kpi-accent-rose',
+            },
+            {
+                label: 'Sensors',
+                value: this.sensorTotal ?? this.sensors.length,
+                meta: `${this.activeSensorsCount} active`,
+                icon: 'gauge-high',
+                accentClass: 'fleetops-connectivity-kpi-accent-blue',
+            },
+            {
+                label: 'Events',
+                value: this.eventTotal ?? this.events.length,
+                meta: `${this.warningEventsCount + this.unprocessedEventsCount} need review`,
+                icon: 'bolt',
+                accentClass: this.warningEventsCount || this.unprocessedEventsCount ? 'fleetops-connectivity-kpi-accent-amber' : 'fleetops-connectivity-kpi-accent-green',
+            },
+            {
+                label: 'Vehicle',
+                value: this.attachmentLabel,
+                icon: this.attachedVehicleName ? 'truck' : 'link-slash',
+                accentClass: this.attachedVehicleName ? 'fleetops-connectivity-kpi-accent-green' : 'fleetops-connectivity-kpi-accent-amber',
+            },
+        ];
+    }
+
+    @task *loadOperationalSummary() {
+        if (!this.resource?.id) {
+            return;
+        }
+
+        try {
+            const [sensors, events] = yield Promise.all([
+                this.store.query('sensor', { device_uuid: this.resource.id, limit: 10 }),
+                this.store.query('device-event', { device_uuid: this.resource.id, limit: 10, sort: '-created_at' }),
+            ]);
+
+            this.sensors = Array.from(sensors ?? []);
+            this.events = Array.from(events ?? []);
+            this.sensorTotal = sensors?.meta?.total;
+            this.eventTotal = events?.meta?.total;
+        } catch {
+            this.sensors = [];
+            this.events = [];
+        }
+    }
+}

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.online "online" "offline"}}>{{if @resource.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}}
@@ -40,4 +65,4 @@
             />
         </div>
     </div>
-</div>
+</div>

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>

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

@@ -0,0 +1,93 @@
+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';
+
+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 DevicePanelTabsSensorsComponent extends Component {
+    @service sensorActions;
+    @service store;
+
+    @tracked sensors = toRecentList();
+
+    constructor() {
+        super(...arguments);
+        this.loadSensors.perform();
+    }
+
+    get device() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    get columns() {
+        return [
+            {
+                sticky: true,
+                label: 'Sensor',
+                valuePath: 'name',
+                cellComponent: 'table/cell/anchor',
+                action: this.sensorActions.panel?.view ?? this.sensorActions.transition.view,
+                permission: 'fleet-ops view sensor',
+                resizable: true,
+            },
+            {
+                label: 'Type',
+                valuePath: 'type',
+                cellComponent: 'table/cell/base',
+                humanize: true,
+                resizable: true,
+            },
+            {
+                label: 'Value',
+                valuePath: 'last_value',
+                resizable: true,
+            },
+            {
+                label: 'Unit',
+                valuePath: 'unit',
+                resizable: true,
+            },
+            {
+                label: 'Status',
+                valuePath: 'status',
+                cellComponent: 'table/cell/status',
+                resizable: true,
+            },
+            {
+                label: 'Last Reading',
+                valuePath: 'lastReadingAt',
+                sortParam: 'last_reading_at',
+                resizable: true,
+            },
+        ];
+    }
+
+    @action refreshSensors() {
+        return this.loadSensors.perform();
+    }
+
+    @task *loadSensors() {
+        if (!this.device?.id) {
+            this.sensors = toRecentList();
+            return;
+        }
+
+        const sensors = yield this.store.query('sensor', { device_uuid: this.device.id, limit: 10, sort: '-updated_at' });
+        this.sensors = toRecentList(sensors);
+    }
+}