@fleetbase/fleetops-engine 0.6.54 → 0.6.56

package/addon/utils/leaflet-plugin-loader.js

@@ -79,7 +79,7 @@ function waitForLeafletGlobal({ timeoutMs = 8000 } = {}) {
 
             if (timeoutMs != null && Date.now() - startedAt >= timeoutMs) {
                 clearInterval(interval);
-                reject(new Error('[FleetOps Leaflet] Leaflet global is not available'));
+                reject(new Error('[Fleet-Ops Leaflet] Leaflet global is not available'));
             }
         }, 50);
     });
@@ -105,7 +105,7 @@ function appendStylesheet(href) {
 
 function loadScript(src, { timeoutMs = 8000, isReady = null } = {}) {
     if (typeof document === 'undefined') {
-        return Promise.reject(new Error('[FleetOps Leaflet] document is not available'));
+        return Promise.reject(new Error('[Fleet-Ops Leaflet] document is not available'));
     }
 
     const existing = findAssetElement('script', 'src', src);
@@ -137,7 +137,7 @@ function loadScript(src, { timeoutMs = 8000, isReady = null } = {}) {
 
         const onError = () => {
             cleanup();
-            reject(new Error(`[FleetOps Leaflet] Failed to load ${src}`));
+            reject(new Error(`[Fleet-Ops Leaflet] Failed to load ${src}`));
         };
 
         script.addEventListener('load', onLoad);
@@ -146,7 +146,7 @@ function loadScript(src, { timeoutMs = 8000, isReady = null } = {}) {
         if (timeoutMs != null) {
             timeoutId = setTimeout(() => {
                 cleanup();
-                reject(new Error(`[FleetOps Leaflet] Timed out loading ${src}`));
+                reject(new Error(`[Fleet-Ops Leaflet] Timed out loading ${src}`));
             }, timeoutMs);
         }
 
@@ -202,7 +202,7 @@ export default function ensureLeafletPluginsReady(options = {}) {
         .then(() => {
             const readyLeaflet = normalizeLeafletGlobal();
             if (!hasLeafletPluginsReady()) {
-                throw new Error('[FleetOps Leaflet] Leaflet plugins loaded but required Draw/contextmenu APIs are missing');
+                throw new Error('[Fleet-Ops Leaflet] Leaflet plugins loaded but required Draw/contextmenu APIs are missing');
             }
 
             window.fleetopsLeafletPluginsLoaded = true;

package/addon/utils/map-drawer-dropdown-position.js

@@ -0,0 +1,47 @@
+export default function calculateMapDrawerDropdownPosition(trigger, content) {
+    const dropdownRoot = trigger?.closest?.('.ember-basic-dropdown');
+    const drawerPanel = trigger?.closest?.('.next-drawer-panel');
+
+    if (!trigger || !dropdownRoot) {
+        return { style: {} };
+    }
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const rootRect = dropdownRoot.getBoundingClientRect();
+    const drawerRect = drawerPanel?.getBoundingClientRect?.();
+    const contentRect = content?.getBoundingClientRect?.();
+    const contentWidth = contentRect?.width || 224;
+    // const contentHeight = contentRect?.height || 240;
+    const gap = 6;
+
+    const viewportRect = {
+        top: 0,
+        right: window.innerWidth,
+        bottom: window.innerHeight,
+        left: 0,
+    };
+    const boundaryRect = drawerRect ?? viewportRect;
+    const minLeft = boundaryRect.left - rootRect.left + gap;
+    const maxLeft = boundaryRect.right - rootRect.left - contentWidth - gap;
+    // const minTop = boundaryRect.top - rootRect.top + gap;
+    // const maxTop = boundaryRect.bottom - rootRect.top - contentHeight - gap;
+
+    const preferredLeft = triggerRect.left - rootRect.left - contentWidth - gap;
+    // const preferredTop = triggerRect.top - rootRect.top;
+    const left = clamp(preferredLeft, minLeft, Math.max(minLeft, maxLeft));
+    const top = 0; //clamp(preferredTop, minTop, Math.max(minTop, maxTop));
+
+    return {
+        style: {
+            position: 'absolute',
+            left: `${left}px`,
+            top: `${top}px`,
+            marginTop: '0px',
+            zIndex: '10000',
+        },
+    };
+}
+
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/addon/utils/route-colors.js

@@ -2,7 +2,7 @@
  * Route Colors Utility
  *
  * Provides deterministic color assignment, color manipulation helpers,
- * and status-based route line styling for the FleetOps map visualization.
+ * and status-based route line styling for the Fleet-Ops map visualization.
  */
 
 /**

package/addon/utils/trackable-option.js

@@ -0,0 +1,93 @@
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+import { isArray } from '@ember/array';
+import { get } from '@ember/object';
+
+export function buildTrackableOption(resource, modelName = getTrackableModelName(resource)) {
+    const deviceLabel = trackableDeviceLabel(resource, modelName);
+    const secondaryLabel = trackableSecondaryLabel(resource, modelName);
+    const primaryLabel = getValue(resource, 'name') ?? getValue(resource, 'displayName') ?? getValue(resource, 'display_name') ?? getValue(resource, 'public_id');
+    const trackableSearchText = [
+        primaryLabel,
+        secondaryLabel,
+        getValue(resource, 'public_id'),
+        getValue(resource, 'internal_id'),
+        getValue(resource, 'serial_number'),
+        getValue(resource, 'plate_number'),
+        getValue(resource, 'email'),
+        getValue(resource, 'vin'),
+        getValue(resource, 'call_sign'),
+        deviceLabel,
+    ]
+        .filter(Boolean)
+        .join(' ');
+
+    return {
+        resource,
+        modelName,
+        primaryLabel,
+        secondaryLabel,
+        deviceLabel,
+        trackableSearchText,
+    };
+}
+
+export function trackableSecondaryLabel(resource, modelName = getTrackableModelName(resource)) {
+    if (modelName === 'driver') {
+        return getValue(resource, 'email') ?? getValue(resource, 'phone') ?? getValue(resource, 'vehicle_name') ?? getValue(resource, 'internal_id') ?? getValue(resource, 'public_id');
+    }
+
+    return getValue(resource, 'plate_number') ?? getValue(resource, 'serial_number') ?? getValue(resource, 'internal_id') ?? getValue(resource, 'vin') ?? getValue(resource, 'public_id');
+}
+
+export function trackableDeviceLabel(resource, modelName = getTrackableModelName(resource)) {
+    const devices = trackableDevices(resource, modelName);
+    const labels = devices.map(deviceLabel).filter(Boolean);
+
+    if (labels.length === 0) {
+        return null;
+    }
+
+    return labels.length === 1 ? `Device: ${labels[0]}` : `Devices: ${labels.join(', ')}`;
+}
+
+export function trackableDevices(resource, modelName = getTrackableModelName(resource)) {
+    const devices = modelName === 'driver' ? getValue(resource, 'vehicle.devices') : getValue(resource, 'devices');
+
+    if (!devices) {
+        return [];
+    }
+
+    if (isArray(devices)) {
+        return devices;
+    }
+
+    if (typeof devices.toArray === 'function') {
+        return devices.toArray();
+    }
+
+    return [];
+}
+
+export function deviceLabel(device) {
+    return (
+        getValue(device, 'displayName') ??
+        getValue(device, 'display_name') ??
+        getValue(device, 'name') ??
+        getValue(device, 'device_id') ??
+        getValue(device, 'serial_number') ??
+        getValue(device, 'imei') ??
+        getValue(device, 'public_id')
+    );
+}
+
+function getTrackableModelName(resource) {
+    return getModelName(resource) ?? getValue(resource, 'modelName') ?? resource?.constructor?.modelName;
+}
+
+function getValue(object, path) {
+    if (!object) {
+        return undefined;
+    }
+
+    return get(object, path);
+}

package/app/components/cell/attached-vehicle.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/cell/attached-vehicle';

package/app/components/cell/device-identity.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/cell/device-identity';

package/app/components/cell/driver-identity.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/cell/driver-identity';

package/app/components/cell/equipment-identity.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/cell/equipment-identity';

package/app/components/cell/part-identity.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/cell/part-identity';

package/app/components/cell/telematic-device.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/cell/telematic-device';

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

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/cell/vehicle-identity';

package/app/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/app/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/app/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/app/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);
+    }
+}

package/app/components/device/panel-tabs/vehicle.hbs

@@ -0,0 +1,68 @@
+<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">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>
+        </div>
+        <div class="flex flex-wrap items-center justify-end gap-2">
+            {{#if this.hasVehicle}}
+                {{#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}} />
+            {{else}}
+                <Button @icon="link" @text="Attach Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
+            {{/if}}
+        </div>
+    </div>
+
+    {{#if this.hasVehicle}}
+        <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 gap-3 p-3">
+                <Image
+                    src={{this.vehiclePhotoUrl}}
+                    @fallbackSrc={{config "defaultValues.vehicleAvatar"}}
+                    alt={{this.vehicleName}}
+                    class="h-16 w-16 flex-shrink-0 rounded-md object-cover shadow-sm"
+                />
+                <div class="min-w-0 flex-1">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <h3 class="truncate text-base font-bold text-gray-900 dark:text-gray-100">{{this.vehicleName}}</h3>
+                        {{#if this.vehicleStatus}}
+                            <Badge @status={{this.vehicleStatus}} @size="xs">{{smart-humanize this.vehicleStatus}}</Badge>
+                        {{/if}}
+                    </div>
+                    <div class="mt-1 text-xs text-gray-500 dark:text-gray-300">{{n-a this.vehicleSubtitle}}</div>
+                    <div class="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-3">
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Driver</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.vehicleDriverName}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Attached Device</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.device.displayName this.device.name}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Device Last Seen</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a (format-date-fns this.device.last_online_at "dd MMM yyyy, HH:mm")}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    {{else}}
+        <Telematic::TabEmptyState
+            @tone="warning"
+            @icon="link-slash"
+            @title="No vehicle attached"
+            @message="Attach this device to a vehicle so telemetry has fleet context."
+            @primaryText="Attach Vehicle"
+            @primaryIcon="link"
+            @primaryAction={{this.attachToVehicle}}
+        />
+    {{/if}}
+</div>

package/app/components/device/panel-tabs/vehicle.js

@@ -0,0 +1,90 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default class DevicePanelTabsVehicleComponent extends Component {
+    @service deviceActions;
+    @service hostRouter;
+    @service mapManager;
+    @service vehicleActions;
+
+    get device() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    get vehicle() {
+        return this.device?.attachable;
+    }
+
+    get vehicleName() {
+        return this.device?.attached_to_name ?? this.vehicle?.displayName ?? this.vehicle?.display_name ?? this.vehicle?.name;
+    }
+
+    get vehicleSubtitle() {
+        return this.vehicle?.plate_number ?? this.vehicle?.call_sign ?? this.vehicle?.vin ?? this.vehicle?.public_id ?? this.device?.attachable_uuid;
+    }
+
+    get vehiclePhotoUrl() {
+        return this.vehicle?.photo_url ?? this.vehicle?.avatar_url;
+    }
+
+    get vehicleStatus() {
+        return this.vehicle?.status ?? (this.vehicle?.online ? 'online' : null);
+    }
+
+    get vehicleDriverName() {
+        return this.vehicle?.driver?.displayName ?? this.vehicle?.driver?.display_name ?? this.vehicle?.driver?.name ?? this.vehicle?.driver_name;
+    }
+
+    get hasVehicle() {
+        return Boolean(this.vehicleName || this.device?.attachable_uuid);
+    }
+
+    get canOpenVehicle() {
+        return Boolean(this.vehicle?.id);
+    }
+
+    get canLocateVehicle() {
+        return Boolean(this.vehicle?.id && (this.vehicle?.location || this.vehicle?.last_position));
+    }
+
+    @action attachToVehicle() {
+        return this.deviceActions.attachToVehicle(this.device, { callback: () => this.device?.reload?.() });
+    }
+
+    @action detachFromVehicle() {
+        return this.deviceActions.detachFromVehicle(this.device, { callback: () => this.device?.reload?.() });
+    }
+
+    @action openVehicle() {
+        if (this.vehicle?.id) {
+            return this.vehicleActions.panel?.view
+                ? this.vehicleActions.panel.view(this.vehicle)
+                : this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', this.vehicle);
+        }
+    }
+
+    @action async locateVehicle() {
+        if (!this.vehicle?.id) {
+            return;
+        }
+
+        await this.transitionToLiveMap();
+        await this.mapManager.waitForMap({ timeoutMs: 8000 });
+
+        this.mapManager.focusResource(this.vehicle, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.vehicleActions.panel?.view?.(this.vehicle, { closeOnTransition: true });
+            },
+        });
+    }
+
+    async transitionToLiveMap() {
+        try {
+            await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
+        } catch (_) {
+            // Keep locate usable if another transition is already active.
+        }
+    }
+}