@fleetbase/fleetops-engine 0.6.55 → 0.6.56

package/addon/components/admin/map-settings.hbs

@@ -1,5 +1,5 @@
 <ContentPanel @title="Configure Map" @open={{true}} @wrapperClass="bordered-classic">
-    <InputGroup @name="Default Map Provider" @helpText="Sets the default map provider for all organizations unless they override it in their own FleetOps map settings.">
+    <InputGroup @name="Default Map Provider" @helpText="Sets the default map provider for all organizations unless they override it in their own Fleet-Ops map settings.">
         <Select
             class="w-full flex-1"
             @value={{this.mapProvider}}

package/addon/components/device/details.js

@@ -111,7 +111,7 @@ export default class DeviceDetailsComponent extends Component {
     }
 
     get unprocessedEventsCount() {
-        return this.events.filter((event) => !event.processed_at && !event.is_processed).length;
+        return this.events.filter((event) => !event.processed_at).length;
     }
 
     get activeSensorsCount() {

package/addon/components/device-event/details.hbs

@@ -0,0 +1,192 @@
+<div class="flex flex-col gap-3 p-3" ...attributes>
+    <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 flex-col gap-3 p-3 lg:flex-row lg:items-start lg:justify-between">
+            <div class="min-w-0">
+                <div class="flex flex-wrap items-center gap-2">
+                    <h2 class="truncate text-base font-bold text-gray-900 dark:text-gray-100">{{smart-humanize this.eventType}}</h2>
+                    <Badge @status={{this.severity}} @hideStatusDot={{true}}>{{smart-humanize this.severity}}</Badge>
+                    <Badge @status={{this.processedStatus}} @hideStatusDot={{true}}>{{this.processedLabel}}</Badge>
+                </div>
+
+                <p class="mt-2 max-w-4xl text-sm leading-5 text-gray-700 dark:text-gray-200">{{n-a this.message}}</p>
+
+                <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
+                    <span>Occurred: {{n-a (format-date-fns this.occurredAt "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Processed: {{n-a (format-date-fns this.processedAt "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Public ID: {{n-a @resource.public_id}}</span>
+                    <span>UUID: {{n-a @resource.id}}</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
+        {{#each this.metrics as |metric|}}
+            <div class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile {{metric.accentClass}} relative min-h-[82px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
+                <div class="flex h-full items-start justify-between gap-2 p-3">
+                    <div class="min-w-0">
+                        <div class="truncate text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400">{{metric.label}}</div>
+                        <div class="mt-1 truncate text-lg font-extrabold leading-none text-gray-900 dark:text-gray-50">{{n-a metric.value}}</div>
+                        {{#if metric.meta}}
+                            <div class="mt-1 truncate text-xs text-gray-500 dark:text-gray-300">{{metric.meta}}</div>
+                        {{/if}}
+                    </div>
+                    <div class="fleetops-connectivity-kpi-icon flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-[13px]">
+                        <FaIcon @icon={{metric.icon}} />
+                    </div>
+                </div>
+            </div>
+        {{/each}}
+    </section>
+
+    <section class="grid grid-cols-1 gap-3 xl:grid-cols-2">
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Event Details</h3>
+            </div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="field-info-container">
+                    <div class="field-name">Event Type</div>
+                    <div class="field-value">{{n-a (smart-humanize this.eventType)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Severity</div>
+                    <div class="field-value"><Badge @status={{this.severity}}>{{smart-humanize this.severity}}</Badge></div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">State</div>
+                    <div class="field-value">{{n-a (smart-humanize @resource.state)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Code</div>
+                    <div class="field-value">{{n-a @resource.code}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Reason</div>
+                    <div class="field-value">{{n-a @resource.reason}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Mileage</div>
+                    <div class="field-value">{{n-a @resource.mileage}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Age</div>
+                    <div class="field-value">{{#if this.ageMinutes}}{{this.ageMinutes}} minutes{{else}}{{n-a null}}{{/if}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Processing Delay</div>
+                    <div class="field-value">{{#if this.processingDelay}}{{this.processingDelay}} minutes{{else}}{{n-a null}}{{/if}}</div>
+                </div>
+                <div class="field-info-container sm:col-span-2 lg:col-span-3">
+                    <div class="field-name">Comment</div>
+                    <div class="field-value whitespace-pre-line">{{n-a @resource.comment}}</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Device & Provider</h3>
+            </div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="field-info-container">
+                    <div class="field-name">Device</div>
+                    <div class="field-value">
+                        {{#if this.deviceRouteModel}}
+                            <button
+                                type="button"
+                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                                data-test-device-event-device-link
+                                {{on "click" this.openDevice}}
+                            >
+                                {{n-a this.deviceName}}
+                            </button>
+                        {{else}}
+                            {{n-a this.deviceName}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device UUID</div>
+                    <div class="field-value">{{n-a @resource.device_uuid}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device ID</div>
+                    <div class="field-value">{{n-a @resource.device_id}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IMEI</div>
+                    <div class="field-value">{{n-a @resource.device_imei}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Serial Number</div>
+                    <div class="field-value">{{n-a @resource.device_serial_number}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IDENT</div>
+                    <div class="field-value">{{n-a @resource.ident}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Provider</div>
+                    <div class="field-value">
+                        {{#if this.telematicRouteModel}}
+                            <button
+                                type="button"
+                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                                data-test-device-event-telematic-link
+                                {{on "click" this.openTelematic}}
+                            >
+                                {{n-a this.providerLabel}}
+                            </button>
+                        {{else}}
+                            {{n-a this.providerLabel}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Protocol</div>
+                    <div class="field-value">{{n-a @resource.protocol}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Telematic UUID</div>
+                    <div class="field-value">{{n-a @resource.telematic_uuid}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device Status</div>
+                    <div class="field-value" data-test-device-event-device-status>
+                        {{#if this.deviceStatus}}
+                            <Badge @status={{this.deviceStatus}}>{{smart-humanize this.deviceStatus}}</Badge>
+                        {{else}}
+                            {{n-a null}}
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="grid grid-cols-1 gap-3 xl:grid-cols-3">
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Payload</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.payloadJson}}</pre>
+        </div>
+
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Data</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.dataJson}}</pre>
+        </div>
+
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Meta</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.metaJson}}</pre>
+        </div>
+    </section>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/device-event/details.js

@@ -0,0 +1,151 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+const warningSeverities = ['warning', 'error', 'critical', 'high'];
+
+function firstPresent(...values) {
+    return values.find((value) => value !== undefined && value !== null && value !== '');
+}
+
+function prettyJson(value) {
+    if (!value) {
+        return null;
+    }
+
+    if (typeof value === 'string') {
+        try {
+            return JSON.stringify(JSON.parse(value), null, 2);
+        } catch {
+            return value;
+        }
+    }
+
+    return JSON.stringify(value, null, 2);
+}
+
+export default class DeviceEventDetailsComponent extends Component {
+    @service hostRouter;
+
+    get resource() {
+        return this.args.resource ?? {};
+    }
+
+    get eventType() {
+        return firstPresent(get(this.resource, 'event_type'), get(this.resource, 'eventType'), get(this.resource, 'type'));
+    }
+
+    get severity() {
+        return firstPresent(get(this.resource, 'severity'), 'info');
+    }
+
+    get isProcessed() {
+        return Boolean(firstPresent(get(this.resource, 'processed_at'), get(this.resource, 'processedAt')));
+    }
+
+    get processedStatus() {
+        return this.isProcessed ? 'success' : 'warning';
+    }
+
+    get processedLabel() {
+        return this.isProcessed ? 'Processed' : 'Unprocessed';
+    }
+
+    get severityAccentClass() {
+        return warningSeverities.includes(String(this.severity ?? '').toLowerCase()) ? 'fleetops-connectivity-kpi-accent-amber' : 'fleetops-connectivity-kpi-accent-green';
+    }
+
+    get message() {
+        return get(this.resource, 'message');
+    }
+
+    get occurredAt() {
+        return firstPresent(get(this.resource, 'occurred_at'), get(this.resource, 'occurredAt'), get(this.resource, 'created_at'), get(this.resource, 'createdAt'));
+    }
+
+    get processedAt() {
+        return firstPresent(get(this.resource, 'processed_at'), get(this.resource, 'processedAt'));
+    }
+
+    get processingDelay() {
+        return firstPresent(get(this.resource, 'processing_delay_minutes'), get(this.resource, 'processingDelayMinutes'));
+    }
+
+    get ageMinutes() {
+        return firstPresent(get(this.resource, 'age_minutes'), get(this.resource, 'ageMinutes'));
+    }
+
+    get deviceName() {
+        return firstPresent(
+            get(this.resource, 'device.displayName'),
+            get(this.resource, 'device.display_name'),
+            get(this.resource, 'device.name'),
+            get(this.resource, 'device_name'),
+            get(this.resource, 'device_id')
+        );
+    }
+
+    get deviceIdentifier() {
+        return firstPresent(
+            get(this.resource, 'device_id'),
+            get(this.resource, 'device.device_id'),
+            get(this.resource, 'device_imei'),
+            get(this.resource, 'device_serial_number'),
+            get(this.resource, 'ident')
+        );
+    }
+
+    get deviceRouteModel() {
+        return firstPresent(get(this.resource, 'device.id'), get(this.resource, 'device.public_id'), get(this.resource, 'device_uuid'));
+    }
+
+    get providerLabel() {
+        return firstPresent(get(this.resource, 'provider_descriptor.label'), get(this.resource, 'telematic.name'), get(this.resource, 'telematic_name'), get(this.resource, 'provider'));
+    }
+
+    get telematicRouteModel() {
+        return firstPresent(get(this.resource, 'telematic.id'), get(this.resource, 'telematic.public_id'), get(this.resource, 'telematic_uuid'));
+    }
+
+    get deviceStatus() {
+        return firstPresent(get(this.resource, 'device.status'), get(this.resource, 'device_status'), get(this.resource, 'device_connection_status'));
+    }
+
+    get metrics() {
+        return [
+            { label: 'Severity', value: this.severity, icon: 'triangle-exclamation', accentClass: this.severityAccentClass },
+            {
+                label: 'Processing',
+                value: this.processedLabel,
+                icon: this.isProcessed ? 'check' : 'clock',
+                accentClass: this.isProcessed ? 'fleetops-connectivity-kpi-accent-green' : 'fleetops-connectivity-kpi-accent-rose',
+            },
+            { label: 'Device', value: this.deviceName, meta: this.deviceIdentifier, icon: 'microchip', accentClass: 'fleetops-connectivity-kpi-accent-blue' },
+            { label: 'Provider', value: this.providerLabel, icon: 'satellite-dish', accentClass: 'fleetops-connectivity-kpi-accent-green' },
+        ];
+    }
+
+    get payloadJson() {
+        return prettyJson(get(this.resource, 'payload'));
+    }
+
+    get dataJson() {
+        return prettyJson(get(this.resource, 'data'));
+    }
+
+    get metaJson() {
+        return prettyJson(get(this.resource, 'meta'));
+    }
+
+    @action openDevice() {
+        if (this.deviceRouteModel) {
+            return this.hostRouter.transitionTo('console.fleet-ops.connectivity.devices.index.details', this.deviceRouteModel);
+        }
+    }
+
+    @action openTelematic() {
+        if (this.telematicRouteModel) {
+            return this.hostRouter.transitionTo('console.fleet-ops.connectivity.telematics.details', this.telematicRouteModel);
+        }
+    }
+}

package/addon/components/driver/schedule.js

@@ -219,7 +219,7 @@ export default class DriverScheduleComponent extends Component {
     }
 
     /**
-     * Load HOS (Hours of Service) status from the FleetOps driver endpoint.
+     * Load HOS (Hours of Service) status from the Fleet-Ops driver endpoint.
      * Best-effort — if the endpoint is not yet implemented hosStatus stays null.
      */
     @task *loadHOSStatus() {

package/addon/components/layout/fleet-ops-sidebar.js

@@ -63,6 +63,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'truck',
                 route: 'management',
                 defaultRoute: 'management.index',
+                requiresVisibleChildren: true,
                 keywords: ['drivers', 'vehicles', 'fleets', 'contacts', 'places'],
                 children: this.resourcesItems,
             }),
@@ -72,6 +73,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'cog',
                 route: 'maintenance',
                 defaultRoute: 'maintenance.index',
+                requiresVisibleChildren: true,
                 keywords: ['work orders', 'equipment', 'parts'],
                 children: this.maintenanceItems,
             }),
@@ -81,6 +83,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'satellite-dish',
                 route: 'connectivity',
                 defaultRoute: 'connectivity.telematics',
+                requiresVisibleChildren: true,
                 keywords: ['telematics', 'fuel integrations', 'devices', 'sensors'],
                 children: this.connectivityItems,
             }),
@@ -90,6 +93,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'chart-line',
                 route: 'analytics',
                 defaultRoute: 'analytics.index',
+                requiresVisibleChildren: true,
                 keywords: ['reports', 'metrics'],
                 children: this.analyticsItems,
             }),
@@ -99,6 +103,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'gear',
                 route: 'settings',
                 defaultRoute: 'settings.index',
+                requiresVisibleChildren: true,
                 keywords: ['configuration', 'navigator', 'map', 'routing', 'notifications'],
                 children: this.settingsItems,
             }),
@@ -164,7 +169,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
 
     get connectivityItems() {
         return this.withRegistryItems('connectivity', [
-            this.createItem('menu.telematics', 'satellite-dish', 'connectivity.telematics', 'fleet-ops list telematic', 'fleet-ops see telematic', ['connectivity hub']),
+            this.createHubItem(this.intl.t('menu.telematics'), 'satellite-dish', 'connectivity.telematics', 'fleet-ops list telematic', 'fleet-ops see telematic', ['connectivity hub']),
             this.createItem('menu.fuel-providers', 'gas-pump', 'connectivity.fuel-providers', 'fleet-ops list fuel-report', 'fleet-ops see fuel-report', ['fuel integrations']),
             this.createItem('menu.devices', 'hard-drive', 'connectivity.devices', 'fleet-ops list device', 'fleet-ops see device'),
             this.createItem('menu.sensors', 'temperature-full', 'connectivity.sensors', 'fleet-ops list sensor', 'fleet-ops see sensor'),
@@ -247,13 +252,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         this.universeSettingsMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'settings');
     }
 
-    createBranch({ id, label, icon, route, defaultRoute, children, keywords = [] }) {
+    createBranch({ id, label, icon, route, defaultRoute, requiresVisibleChildren = false, children, keywords = [] }) {
         return {
             id,
             label,
             icon,
             route: this.fullRoute(route),
             defaultRoute: this.fullRoute(defaultRoute),
+            requiresVisibleChildren,
             children: children.filter((item) => item.visible !== false),
             keywords,
         };
@@ -267,12 +273,12 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             icon,
             route: this.fullRoute(route),
             permission,
-            visible: this.abilities.can(ability),
+            visiblePermission: ability,
             keywords: [intl, route, ...keywords].filter(Boolean),
         };
     }
 
-    createHubItem(label, icon, route, permission, ability, keywords = []) {
+    createHubItem(label, icon, route, _permission, _ability, keywords = []) {
         return {
             pinnedFirst: true,
             priority: this.defaultPriorityForRoute(route),
@@ -280,8 +286,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             description: label,
             icon,
             route: this.fullRoute(route),
-            permission,
-            visible: this.abilities.can(ability),
+            isNavigationHub: true,
             keywords: [label, route, ...keywords].filter(Boolean),
         };
     }
@@ -390,10 +395,11 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         }
     }
 
-    @action shouldSyncInitialActiveParent({ activePath = [], routeName }) {
+    @action shouldSyncInitialActiveParent({ activePath = [], currentURL }) {
         const [parent, child] = activePath;
-        const defaultOrdersRoutes = [this.fullRoute('operations.orders'), this.fullRoute('operations.orders.index')];
-        const isDefaultOrdersLanding = parent?.id === 'operations' && child?.route === this.fullRoute('operations.orders') && defaultOrdersRoutes.includes(routeName);
+        const normalizedURL = (currentURL ?? '').split('?')[0].replace(/\/+$/, '') || '/';
+        const isFleetOpsRootURL = normalizedURL === '/fleet-ops';
+        const isDefaultOrdersLanding = parent?.id === 'operations' && child?.route === this.fullRoute('operations.orders') && isFleetOpsRootURL;
 
         return !isDefaultOrdersLanding;
     }

package/addon/components/telematic/details.hbs

@@ -92,7 +92,7 @@
                     <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700 md:col-span-2">
                         <div class="text-gray-400 dark:text-gray-500">Update Mode</div>
                         <div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">Provider polling</div>
-                        <div class="mt-1 text-gray-500 dark:text-gray-400">FleetOps polls this provider for device snapshots and telemetry updates.</div>
+                        <div class="mt-1 text-gray-500 dark:text-gray-400">Fleet-Ops polls this provider for device snapshots and telemetry updates.</div>
                     </div>
                 {{/if}}
             </div>

package/addon/components/telematic/form.hbs

@@ -70,7 +70,7 @@
                 <div class="mb-3">
                     <div>
                         <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Credentials</h2>
-                        <p class="text-xs text-gray-500 dark:text-gray-300">FleetOps uses these credentials to test the connection and sync devices.</p>
+                        <p class="text-xs text-gray-500 dark:text-gray-300">Fleet-Ops uses these credentials to test the connection and sync devices.</p>
                     </div>
                 </div>
 
@@ -266,7 +266,7 @@
                     </InputGroup>
                 {{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 lg:col-span-2">
-                        This provider does not require FleetOps webhook configuration.
+                        This provider does not require Fleet-Ops webhook configuration.
                     </div>
                 {{/if}}
             </div>

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/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

@@ -86,13 +86,13 @@ 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);
+            return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details.positions', this.vehicle.public_id);
         }
     }
 

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

@@ -1,3 +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';
 
-export default class ConnectivityEventsDetailsController extends Controller {}
+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;
+        }
+    }
+}

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

@@ -178,6 +178,8 @@ export default class ConnectivitySensorsIndexController extends Controller {
             filterParam: 'type',
             filterComponent: 'filter/multi-option',
             filterOptions: fleetOpsOptions('sensorTypes'),
+            filterOptionLabel: 'label',
+            filterOptionValue: 'value',
         },
         {
             label: 'Last Value',
@@ -200,6 +202,8 @@ export default class ConnectivitySensorsIndexController extends Controller {
             filterable: true,
             filterComponent: 'filter/multi-option',
             filterOptions: fleetOpsOptions('sensorStatuses'),
+            filterOptionLabel: 'label',
+            filterOptionValue: 'value',
         },
         {
             label: 'Threshold',

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

@@ -40,7 +40,7 @@ export default class ConnectivityTelematicsDetailsEventsController extends Contr
     }
 
     get unprocessedEventsCount() {
-        return this.events.filter((event) => !event.processed_at && !event.is_processed).length;
+        return this.events.filter((event) => !event.processed_at).length;
     }
 
     get deviceCount() {