@fleetbase/fleetops-engine 0.6.52 → 0.6.54

package/addon/components/device/details.hbs

@@ -1,154 +1,125 @@
-<div class="details-wrapper" ...attributes>
-    <ContentPanel @title="Integration" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container lg:col-span-3">
-                <div class="field-name">{{t "device.fields.telematic"}}</div>
-                <div class="field-value">
-                    {{#if @resource.telematic}}
-                        <div class="flex flex-row space-x-2 text-sm">
-                            <div class="pt-1.5">
-                                <Image src={{@resource.telematic.provider_descriptor.icon}} class="w-5 h-5" />
-                            </div>
-                            <div>
-                                <div class="font-semibold">{{@resource.telematic.provider_descriptor.label}}</div>
-                                <div class="text-xs text-gray-400 dark:text-gray-500">
-                                    {{n-a @resource.telematic.provider_descriptor.description}}
-                                </div>
-                            </div>
-                        </div>
-                    {{else}}
-                        {{n-a null}}
-                    {{/if}}
+<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">{{this.displayName}}</h2>
+                    <Badge @status={{this.connectionTone}}>{{smart-humanize this.connectionLabel}}</Badge>
+                    <Badge @status={{this.attachmentTone}}>{{this.attachmentLabel}}</Badge>
+                </div>
+                <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
+                    <span>Last seen: {{n-a (format-date-fns this.lastSeenLabel "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Provider: {{n-a (titleize this.providerLabel)}}</span>
+                    <span>Signal: {{n-a this.signalLabel}}</span>
+                    <span>Device ID: {{n-a @resource.device_id}}</span>
                 </div>
             </div>
 
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.data-frequency"}}</div>
-                <div class="field-value">{{n-a @resource.data_frequency}}</div>
-            </div>
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Identity" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-name"}}</div>
-                <div class="field-value">{{n-a @resource.name}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-type"}}</div>
-                <div class="field-value">{{n-a (get-fleet-ops-option-label "deviceTypes" @resource.type)}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-id"}}</div>
-                <div class="field-value">{{n-a @resource.device_id}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Internal ID</div>
-                <div class="field-value">{{n-a @resource.internal_id}}</div>
-            </div>
+            {{#if this.providerIcon}}
+                <div class="flex flex-shrink-0 items-center gap-2 rounded-md border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-800/70">
+                    <Image src={{this.providerIcon}} class="h-6 w-6 rounded" />
+                    <span class="text-xs font-semibold text-gray-700 dark:text-gray-200">{{n-a this.providerLabel}}</span>
+                </div>
+            {{/if}}
         </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Hardware" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-provider"}}</div>
-                <div class="field-value">{{n-a (titleize @resource.provider)}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-model"}}</div>
-                <div class="field-value">{{n-a @resource.model}}</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">{{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>
 
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.manufacturer"}}</div>
-                <div class="field-value">{{n-a @resource.manufacturer}}</div>
+    <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">Operational Snapshot</h3>
             </div>
-
-            <div class="field-info-container lg:col-span-3">
-                <div class="field-name">{{t "device.fields.serial-number"}}</div>
-                <div class="field-value">{{n-a @resource.serial_number}}</div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2">
+                <div class="field-info-container">
+                    <div class="field-name">Location</div>
+                    <div class="field-value">{{n-a (or @resource.location this.lastPositionLabel)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.data-frequency"}}</div>
+                    <div class="field-value">{{n-a @resource.data_frequency}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Firmware</div>
+                    <div class="field-value">{{n-a this.firmwareLabel}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.installation-date"}}</div>
+                    <div class="field-value">{{n-a (format-date @resource.installation_date)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.last-maintenance-date"}}</div>
+                    <div class="field-value">{{n-a (format-date @resource.last_maintenance_date)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.status"}}</div>
+                    <div class="field-value"><Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge></div>
+                </div>
             </div>
         </div>
-    </ContentPanel>
 
-    <ContentPanel @title="Installation & Maintenance" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container lg:col-span-2">
-                <div class="field-name">{{t "device.fields.device-location"}}</div>
-                <div class="field-value">{{n-a @resource.location}}</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">Critical Details</h3>
             </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.installation-date"}}</div>
-                <div class="field-value">{{or (format-date @resource.installation_date) "-"}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.last-maintenance-date"}}</div>
-                <div class="field-value">{{or (format-date @resource.last_maintenance_date) "-"}}</div>
-            </div>
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Connectivity" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "common.online"}}</div>
-                <div class="field-value">
-                    {{#if @resource.is_online}}
-                        <Badge @status="online">{{t "common.online"}}</Badge>
-                    {{else}}
-                        <Badge @status="offline">{{t "common.offline"}}</Badge>
-                    {{/if}}
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2">
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.device-type"}}</div>
+                    <div class="field-value">{{n-a (get-fleet-ops-option-label "deviceTypes" @resource.type)}}</div>
                 </div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "common.last-seen-at"}}</div>
-                <div class="field-value">{{or (format-date @resource.last_online_at) "-"}}</div>
-            </div>
-
-            {{#if @resource.signal_strength}}
                 <div class="field-info-container">
-                    <div class="field-name">{{t "device.fields.signal-strength"}}</div>
-                    <div class="field-value">{{n-a @resource.signal_strength}}</div>
+                    <div class="field-name">{{t "device.fields.device-model"}}</div>
+                    <div class="field-value">{{n-a @resource.model}}</div>
                 </div>
-            {{/if}}
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Warranty & Status" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.status"}}</div>
-                <div class="field-value">
-                    <Badge @status={{@resource.status}}>
-                        {{smart-humanize @resource.status}}
-                    </Badge>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.manufacturer"}}</div>
+                    <div class="field-value">{{n-a @resource.manufacturer}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.serial-number"}}</div>
+                    <div class="field-value">{{n-a @resource.serial_number}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IMEI</div>
+                    <div class="field-value">{{n-a @resource.imei}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IMSI</div>
+                    <div class="field-value">{{n-a @resource.imsi}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Internal ID</div>
+                    <div class="field-value">{{n-a @resource.internal_id}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.warranty"}}</div>
+                    <div class="field-value">{{n-a (or @resource.warranty.name @resource.warranty_name)}}</div>
+                </div>
+                <div class="field-info-container sm:col-span-2">
+                    <div class="field-name">{{t "device.fields.notes"}}</div>
+                    <div class="field-value whitespace-pre-line">{{n-a @resource.notes}}</div>
                 </div>
-            </div>
-
-            <div class="field-info-container lg:col-span-2">
-                <div class="field-name">{{t "device.fields.warranty"}}</div>
-                <div class="field-value">{{n-a @resource.warranty.name}}</div>
-            </div>
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Notes" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-1 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.notes"}}</div>
-                <div class="field-value">{{n-a @resource.notes}}</div>
             </div>
         </div>
-    </ContentPanel>
+    </section>
 
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+</div>

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/panel-header.hbs

@@ -24,7 +24,7 @@
                         }}</div>
                     <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.serial_number}}</div>
                 </div>
-                <Badge @status={{if @resource.online "online" "offline"}}>{{if @resource.online (t "common.online") (t "common.offline")}}</Badge>
+                <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">
@@ -40,4 +40,4 @@
             />
         </div>
     </div>
-</div>
+</div>