@fleetbase/fleetops-engine 0.6.53 → 0.6.55

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

@@ -0,0 +1,82 @@
+<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={{this.imageUrl}}
+                    @fallbackSrc={{config "defaultValues.vendorImage"}}
+                    alt={{this.name}}
+                    height="48"
+                    width="48"
+                    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={{this.name}} />
+                </Attach::Tooltip>
+            </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.status}} @size="xs">{{smart-humanize this.status}}</Badge>
+                </div>
+
+                <div class="mt-1 flex max-w-2xl flex-wrap items-center gap-1.5">
+                    {{#if this.businessId}}
+                        <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.businessId}}</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="building" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{smart-humanize this.type}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.email}}
+                        <span class="inline-flex max-w-[14rem] 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="envelope" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.email}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.phone}}
+                        <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="phone" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.phone}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.country}}
+                        <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="globe" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate"><CountryName @country={{this.country}} @showFlag={{true}} /></span>
+                        </span>
+                    {{/if}}
+                    {{#if this.address}}
+                        <span class="inline-flex max-w-[16rem] 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="location-dot" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.address}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.website}}
+                        <span class="inline-flex max-w-[14rem] 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="link" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.website}}</span>
+                        </span>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+        <div class="next-view-header-right flex-shrink-0">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+
+export default class VendorPanelHeaderComponent extends Component {
+    get resource() {
+        return this.args.resource;
+    }
+
+    get imageUrl() {
+        return get(this.resource, 'photo_url') ?? get(this.resource, 'logo_url');
+    }
+
+    get name() {
+        return get(this.resource, 'name') ?? get(this.resource, 'displayName') ?? get(this.resource, 'business_id') ?? get(this.resource, 'public_id') ?? '-';
+    }
+
+    get status() {
+        return get(this.resource, 'status') ?? 'active';
+    }
+
+    get businessId() {
+        return get(this.resource, 'business_id') ?? get(this.resource, 'internal_id') ?? get(this.resource, 'public_id');
+    }
+
+    get type() {
+        return get(this.resource, 'type');
+    }
+
+    get email() {
+        return get(this.resource, 'email');
+    }
+
+    get phone() {
+        return get(this.resource, 'phone');
+    }
+
+    get country() {
+        return get(this.resource, 'country');
+    }
+
+    get address() {
+        return get(this.resource, 'address_street') ?? get(this.resource, 'address');
+    }
+
+    get website() {
+        return get(this.resource, 'website_url');
+    }
+}

package/addon/components/work-order/details.hbs

@@ -20,6 +20,10 @@
                 <div class="field-name">Subject</div>
                 <div class="field-value">{{n-a @resource.subject}}</div>
             </div>
+            <div class="field-info-container col-span-2">
+                <div class="field-name">Category</div>
+                <div class="field-value">{{n-a (smart-humanize @resource.category)}}</div>
+            </div>
 
             {{! — Status & Priority — }}
             <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
@@ -185,4 +189,4 @@
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
 
     <Spacer @height="200px" />
-</div>
+</div>

package/addon/components/work-order/form.hbs

@@ -13,6 +13,27 @@
                 <Input @value={{@resource.subject}} @type="text" class="w-full form-input" placeholder="Brief description of the work order" disabled={{cannot-write @resource}} />
             </InputGroup>
 
+            {{! Work Classification }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Work Order Classification
+            </div>
+            <InputGroup @name="Category" @wrapperClass="col-span-1 lg:col-span-2">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.categoryOptions}}
+                        @selected={{find-by "value" @resource.category this.categoryOptions}}
+                        @onChange={{set-model-attr @resource "category"}}
+                        @placeholder="Select Category"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |category|
+                    >
+                        <div class="font-semibold normalize-in-trigger">{{category.label}}</div>
+                        <div class="hide-from-trigger">{{category.description}}</div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
             {{! Status & Priority }}
             <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
                 Status & Priority
@@ -21,14 +42,15 @@
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{this.statusOptions}}
-                        @selected={{@resource.status}}
-                        @onChange={{fn (mut @resource.status)}}
+                        @selected={{find-by "value" @resource.status this.statusOptions}}
+                        @onChange={{set-model-attr @resource "status"}}
                         @placeholder="Select Status"
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
                         as |status|
                     >
-                        {{smart-humanize status}}
+                        <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
+                        <div class="hide-from-trigger">{{status.description}}</div>
                     </PowerSelect>
                 </div>
             </InputGroup>
@@ -243,4 +265,4 @@
     <ContentPanel @title="Metadata" @open={{false}} @wrapperClass="bordered-top">
         <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
     </ContentPanel>
-</div>
+</div>

package/addon/components/work-order/form.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { workOrderCategories, workOrderStatuses } from '../../utils/fleet-ops-options';
 
 /**
  * Maps a user-facing polymorphic type string to the Ember Data model name
@@ -42,7 +43,10 @@ const ASSIGNEE_MODEL_TO_TYPE = {
 
 export default class WorkOrderFormComponent extends Component {
     /** Status options for work orders. */
-    statusOptions = ['open', 'in_progress', 'on_hold', 'completed', 'cancelled'];
+    statusOptions = workOrderStatuses;
+
+    /** Operational category options for work orders. */
+    categoryOptions = workOrderCategories;
 
     /** Priority options for work orders. */
     priorityOptions = ['low', 'medium', 'high', 'critical'];

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

@@ -1,3 +1,246 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
 
-export default class ConnectivityDevicesIndexDetailsEventsController extends Controller {}
+const severityOptions = [
+    { label: 'Info', value: 'info' },
+    { label: 'Warning', value: 'warning' },
+    { label: 'Error', value: 'error' },
+    { label: 'Critical', value: 'critical' },
+    { label: 'High', value: 'high' },
+];
+
+const warningSeverities = ['warning', 'error', 'critical', 'high'];
+
+export default class ConnectivityDevicesIndexDetailsEventsController extends Controller {
+    @service deviceEventActions;
+    @service hostRouter;
+    @service intl;
+
+    @tracked queryParams = [
+        'events_page',
+        'events_limit',
+        'events_sort',
+        'events_query',
+        'events_event_type',
+        'events_severity',
+        'events_processed',
+        'events_occurred_at',
+        'events_created_at',
+    ];
+    @tracked device;
+    @tracked events_page = 1;
+    @tracked events_limit;
+    @tracked events_sort = '-created_at';
+    @tracked events_query;
+    @tracked events_event_type;
+    @tracked events_severity;
+    @tracked events_processed;
+    @tracked events_occurred_at;
+    @tracked events_created_at;
+
+    @tracked bulkActions = [];
+
+    get events() {
+        return Array.from(this.model ?? []);
+    }
+
+    get totalEvents() {
+        return this.model?.meta?.total ?? this.events.length;
+    }
+
+    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 processedEventsCount() {
+        return Math.max(this.events.length - this.unprocessedEventsCount, 0);
+    }
+
+    get hasHealthyEventState() {
+        return this.events.length > 0 && this.warningEventsCount === 0 && this.unprocessedEventsCount === 0 && !this.hasActiveFilters;
+    }
+
+    get hasActiveFilters() {
+        return Boolean(this.events_query || this.events_event_type || this.events_severity || this.events_processed || this.events_occurred_at || this.events_created_at);
+    }
+
+    get metrics() {
+        return [
+            { label: 'Recent events', value: this.totalEvents, icon: 'list', accentClass: 'fleetops-connectivity-kpi-accent-blue' },
+            {
+                label: 'Warnings',
+                value: this.warningEventsCount,
+                icon: 'triangle-exclamation',
+                accentClass: this.warningEventsCount ? 'fleetops-connectivity-kpi-accent-amber' : 'fleetops-connectivity-kpi-accent-green',
+            },
+            {
+                label: 'Unprocessed',
+                value: this.unprocessedEventsCount,
+                icon: 'clock',
+                accentClass: this.unprocessedEventsCount ? 'fleetops-connectivity-kpi-accent-rose' : 'fleetops-connectivity-kpi-accent-green',
+            },
+            { label: 'Processed', value: this.processedEventsCount, icon: 'check', accentClass: 'fleetops-connectivity-kpi-accent-green' },
+        ];
+    }
+
+    get actionButtons() {
+        return [
+            {
+                icon: 'refresh',
+                size: 'sm',
+                onClick: this.refresh,
+                helpText: this.intl.t('common.refresh'),
+                wrapperClass: 'fleetops-telematics-action-button',
+                isLoading: this.refreshTask.isRunning,
+                disabled: this.refreshTask.isRunning,
+            },
+        ];
+    }
+
+    get columns() {
+        return [
+            {
+                sticky: true,
+                label: 'Event',
+                valuePath: 'event_type',
+                cellComponent: 'table/cell/anchor',
+                action: this.deviceEventActions.transition.view,
+                permission: 'fleet-ops view device-event',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'events_event_type',
+                filterComponent: 'filter/string',
+            },
+            {
+                label: 'Severity',
+                valuePath: 'severity',
+                cellComponent: 'table/cell/status',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'events_severity',
+                filterComponent: 'filter/multi-option',
+                filterOptions: severityOptions,
+                filterOptionLabel: 'label',
+                filterOptionValue: 'value',
+            },
+            {
+                label: 'Message',
+                valuePath: 'message',
+                resizable: true,
+                sortable: false,
+            },
+            {
+                label: 'Code',
+                valuePath: 'code',
+                resizable: true,
+                sortable: true,
+            },
+            {
+                label: 'Processed',
+                valuePath: 'processedAt',
+                sortParam: 'processed_at',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'events_processed',
+                filterComponent: 'filter/multi-option',
+                filterOptions: [
+                    { label: 'Processed', value: 'processed' },
+                    { label: 'Unprocessed', value: 'unprocessed' },
+                ],
+                filterOptionLabel: 'label',
+                filterOptionValue: 'value',
+            },
+            {
+                label: 'Occurred',
+                valuePath: 'occurredAt',
+                sortParam: 'occurred_at',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'events_occurred_at',
+                filterComponent: 'filter/date',
+            },
+            {
+                label: this.intl.t('column.created-at'),
+                valuePath: 'createdAt',
+                sortParam: 'created_at',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'events_created_at',
+                filterComponent: 'filter/date',
+                hidden: true,
+            },
+            {
+                label: '',
+                cellComponent: 'table/cell/dropdown',
+                ddButtonText: false,
+                ddButtonIcon: 'ellipsis-h',
+                ddButtonIconPrefix: 'fas',
+                ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.device-event') }),
+                cellClassNames: 'overflow-visible align-middle',
+                wrapperClass: 'flex items-center justify-end mx-2',
+                sticky: 'right',
+                width: 60,
+                actions: [
+                    {
+                        label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.device-event') }),
+                        fn: this.deviceEventActions.transition.view,
+                        permission: 'fleet-ops view device-event',
+                    },
+                    {
+                        label: 'Mark processed',
+                        fn: this.markProcessed,
+                        permission: 'fleet-ops update device-event',
+                    },
+                ],
+                sortable: false,
+                filterable: false,
+                resizable: false,
+                searchable: false,
+            },
+        ];
+    }
+
+    @action refresh() {
+        if (this.refreshTask.isRunning) {
+            return;
+        }
+
+        return this.refreshTask.perform();
+    }
+
+    @action async markProcessed(deviceEvent) {
+        await this.deviceEventActions.markProcessed(deviceEvent);
+        await this.hostRouter.refresh();
+    }
+
+    @task *refreshTask() {
+        yield this.hostRouter.refresh();
+    }
+
+    @task({ restartable: true }) *searchTask(event) {
+        const {
+            target: { value },
+        } = event;
+
+        if (!value) {
+            this.events_query = null;
+            return;
+        }
+
+        yield timeout(250);
+        if (this.events_page > 1) this.events_page = 1;
+        this.events_query = value;
+    }
+}

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

@@ -0,0 +1,199 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
+import fleetOpsOptions from '../../../../../utils/fleet-ops-options';
+
+export default class ConnectivityDevicesIndexDetailsSensorsController extends Controller {
+    @service sensorActions;
+    @service hostRouter;
+    @service intl;
+
+    @tracked queryParams = ['sensors_page', 'sensors_limit', 'sensors_sort', 'sensors_query', 'sensors_status', 'sensors_type', 'sensors_last_reading_at'];
+    @tracked device;
+    @tracked sensors_page = 1;
+    @tracked sensors_limit;
+    @tracked sensors_sort = '-updated_at';
+    @tracked sensors_query;
+    @tracked sensors_status;
+    @tracked sensors_type;
+    @tracked sensors_last_reading_at;
+
+    @tracked bulkActions = [];
+
+    get sensors() {
+        return Array.from(this.model ?? []);
+    }
+
+    get totalSensors() {
+        return this.model?.meta?.total ?? this.sensors.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 outOfRangeSensorsCount() {
+        return this.sensors.filter((sensor) => ['out_of_range', 'above_maximum', 'below_minimum'].includes(sensor.threshold_status)).length;
+    }
+
+    get hasActiveFilters() {
+        return Boolean(this.sensors_query || this.sensors_status || this.sensors_type || this.sensors_last_reading_at);
+    }
+
+    get metrics() {
+        return [
+            { label: 'Sensors', value: this.totalSensors, icon: 'gauge-high', accentClass: 'fleetops-connectivity-kpi-accent-blue' },
+            { label: 'Active', value: this.activeSensorsCount, icon: 'signal', accentClass: 'fleetops-connectivity-kpi-accent-green' },
+            { label: 'Reporting', value: this.reportingSensorsCount, icon: 'chart-line', accentClass: 'fleetops-connectivity-kpi-accent-amber' },
+            {
+                label: 'Out of range',
+                value: this.outOfRangeSensorsCount,
+                icon: 'triangle-exclamation',
+                accentClass: this.outOfRangeSensorsCount ? 'fleetops-connectivity-kpi-accent-rose' : 'fleetops-connectivity-kpi-accent-green',
+            },
+        ];
+    }
+
+    get actionButtons() {
+        return [
+            {
+                icon: 'refresh',
+                size: 'sm',
+                onClick: this.refresh,
+                helpText: this.intl.t('common.refresh'),
+                wrapperClass: 'fleetops-telematics-action-button',
+                isLoading: this.refreshTask.isRunning,
+                disabled: this.refreshTask.isRunning,
+            },
+        ];
+    }
+
+    get columns() {
+        return [
+            {
+                sticky: true,
+                label: this.intl.t('column.name'),
+                valuePath: 'name',
+                cellComponent: 'table/cell/anchor',
+                action: this.sensorActions.transition.view,
+                permission: 'fleet-ops view sensor',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'sensors_query',
+                filterComponent: 'filter/string',
+            },
+            {
+                label: 'Type',
+                valuePath: 'type',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'sensors_type',
+                filterComponent: 'filter/multi-option',
+                filterOptions: fleetOpsOptions('sensorTypes'),
+            },
+            {
+                label: 'Value',
+                valuePath: 'last_value',
+                resizable: true,
+                sortable: true,
+            },
+            {
+                label: 'Unit',
+                valuePath: 'unit',
+                resizable: true,
+                sortable: true,
+            },
+            {
+                label: 'Threshold',
+                valuePath: 'threshold_status',
+                cellComponent: 'table/cell/status',
+                resizable: true,
+                sortable: true,
+            },
+            {
+                label: this.intl.t('column.status'),
+                valuePath: 'status',
+                cellComponent: 'table/cell/status',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'sensors_status',
+                filterComponent: 'filter/multi-option',
+                filterOptions: fleetOpsOptions('sensorStatuses'),
+            },
+            {
+                label: 'Last Reading',
+                valuePath: 'lastReadingAt',
+                sortParam: 'last_reading_at',
+                resizable: true,
+                sortable: true,
+                filterable: true,
+                filterParam: 'sensors_last_reading_at',
+                filterComponent: 'filter/date',
+            },
+            {
+                label: '',
+                cellComponent: 'table/cell/dropdown',
+                ddButtonText: false,
+                ddButtonIcon: 'ellipsis-h',
+                ddButtonIconPrefix: 'fas',
+                ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.sensor') }),
+                cellClassNames: 'overflow-visible align-middle',
+                wrapperClass: 'flex items-center justify-end mx-2',
+                sticky: 'right',
+                width: 60,
+                actions: [
+                    {
+                        label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.sensor') }),
+                        fn: this.sensorActions.transition.view,
+                        permission: 'fleet-ops view sensor',
+                    },
+                    {
+                        label: this.intl.t('common.edit-resource', { resource: this.intl.t('resource.sensor') }),
+                        fn: this.sensorActions.transition.edit,
+                        permission: 'fleet-ops update sensor',
+                    },
+                ],
+                sortable: false,
+                filterable: false,
+                resizable: false,
+                searchable: false,
+            },
+        ];
+    }
+
+    @action refresh() {
+        if (this.refreshTask.isRunning) {
+            return;
+        }
+
+        return this.refreshTask.perform();
+    }
+
+    @task *refreshTask() {
+        yield this.hostRouter.refresh();
+    }
+
+    @task({ restartable: true }) *searchTask(event) {
+        const {
+            target: { value },
+        } = event;
+
+        if (!value) {
+            this.sensors_query = null;
+            return;
+        }
+
+        yield timeout(250);
+        if (this.sensors_page > 1) this.sensors_page = 1;
+        this.sensors_query = value;
+    }
+}