@fleetbase/fleetops-engine 0.6.53 → 0.6.55

package/addon/components/order/form/service-rate.js

@@ -1,18 +1,72 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { task } from 'ember-concurrency';
+import { task, timeout } from 'ember-concurrency';
+import { SERVICE_QUOTE_REFRESH_REQUESTED } from '../../../services/order-creation';
+
+const SERVICE_QUOTE_REFRESH_DEBOUNCE_MS = 500;
 
 export default class OrderFormServiceRateComponent extends Component {
     @service serviceRateActions;
+    @service orderCreation;
     @tracked selectedRate;
     @tracked serviceRates = [];
     @tracked serviceQuotes = [];
+    @tracked isAutoRefreshingServiceQuotes = false;
+    serviceQuoteRefreshRequestId = 0;
+
+    constructor() {
+        super(...arguments);
+        this._serviceQuoteRefreshRequested = (event) => this.handleServiceQuoteRefreshRequest(event);
+        this.orderCreation.on(SERVICE_QUOTE_REFRESH_REQUESTED, this._serviceQuoteRefreshRequested);
+    }
+
+    willDestroy() {
+        this.orderCreation.off(SERVICE_QUOTE_REFRESH_REQUESTED, this._serviceQuoteRefreshRequested);
+        this.refreshServiceQuotes.cancelAll();
+        super.willDestroy(...arguments);
+    }
 
     get isServicable() {
         return this.args.resource?.order_config && this.args.resource?.payloadCoordinates?.length >= 2;
     }
 
+    get canRefreshServiceQuotes() {
+        return this.args.resource?.servicable && this.selectedRate && this.args.resource?.payloadCoordinates?.length >= 2;
+    }
+
+    get hasServiceQuotes() {
+        return this.serviceQuotes?.length > 0;
+    }
+
+    get isLoadingServiceQuotes() {
+        return this.getServiceQuotes.isRunning || this.isAutoRefreshingServiceQuotes;
+    }
+
+    get shouldShowServiceQuotesLoader() {
+        return this.isLoadingServiceQuotes && !this.hasServiceQuotes;
+    }
+
+    get serviceQuoteOverride() {
+        return this.orderCreation.getServiceQuoteOverride(this.args.resource);
+    }
+
+    get hasServiceQuoteOverride() {
+        return this.serviceQuoteOverride?.mode === 'locked';
+    }
+
+    get overrideQuote() {
+        return this.serviceQuoteOverride?.quote;
+    }
+
+    get overrideQuoteItems() {
+        return this.overrideQuote?.items ?? [];
+    }
+
+    get overrideCurrency() {
+        return this.overrideQuote?.currency ?? this.serviceQuoteOverride?.currency ?? 'USD';
+    }
+
     @task *queryServiceRates(toggled) {
         this.args.resource.servicable = toggled;
         if (!toggled) return;
@@ -21,6 +75,74 @@ export default class OrderFormServiceRateComponent extends Component {
 
     @task *getServiceQuotes(serviceRate) {
         this.selectedRate = serviceRate;
-        this.serviceQuotes = yield this.serviceRateActions.getServiceQuotes.perform(serviceRate, this.args.resource);
+        yield this.loadServiceQuotes(serviceRate);
+    }
+
+    @task *refreshServiceQuotes(refreshRequestId) {
+        this.isAutoRefreshingServiceQuotes = true;
+
+        try {
+            yield timeout(SERVICE_QUOTE_REFRESH_DEBOUNCE_MS);
+
+            if (!this.canRefreshServiceQuotes) {
+                return;
+            }
+
+            yield this.loadServiceQuotes(this.selectedRate);
+        } finally {
+            if (refreshRequestId === this.serviceQuoteRefreshRequestId) {
+                this.isAutoRefreshingServiceQuotes = false;
+            }
+        }
+    }
+
+    handleServiceQuoteRefreshRequest({ order } = {}) {
+        if (order && order !== this.args.resource) {
+            return;
+        }
+
+        if (this.hasServiceQuoteOverride) {
+            return;
+        }
+
+        if (this.args.resource?.servicable && !this.serviceRates?.length && !this.queryServiceRates.isRunning) {
+            this.queryServiceRates.perform(true);
+        }
+
+        if (!this.canRefreshServiceQuotes) {
+            return;
+        }
+
+        this.refreshServiceQuotes.cancelAll();
+        this.serviceQuoteRefreshRequestId++;
+        this.isAutoRefreshingServiceQuotes = true;
+        this.refreshServiceQuotes.perform(this.serviceQuoteRefreshRequestId);
+    }
+
+    async loadServiceQuotes(serviceRate) {
+        const serviceQuotes = await this.serviceRateActions.getServiceQuotes.perform(serviceRate, this.args.resource);
+        this.serviceQuotes = serviceQuotes ?? [];
+        this.clearStaleSelectedServiceQuote();
+    }
+
+    clearStaleSelectedServiceQuote() {
+        const selectedServiceQuote = this.args.resource?.service_quote_uuid;
+
+        if (!selectedServiceQuote) {
+            return;
+        }
+
+        if (!this.serviceQuotes?.length) {
+            this.args.resource.service_quote_uuid = null;
+            return;
+        }
+
+        const selectedQuoteExists = this.serviceQuotes.some((serviceQuote) => {
+            return serviceQuote?.uuid === selectedServiceQuote || serviceQuote?.id === selectedServiceQuote;
+        });
+
+        if (!selectedQuoteExists) {
+            this.args.resource.service_quote_uuid = null;
+        }
     }
 }

package/addon/components/order/form.hbs

@@ -10,6 +10,7 @@
                 ServiceRate=(component "order/form/service-rate" resource=@resource)
                 Notes=(component "order/form/notes" resource=@resource)
                 Documents=(component "order/form/documents" resource=@resource)
+                OrchestratorConstraints=(component "order/form/orchestrator-constraints" resource=@resource)
                 Metadata=(component "order/form/metadata" resource=@resource)
             )
         }}
@@ -23,6 +24,7 @@
         <Order::Form::ServiceRate @resource={{@resource}} />
         <Order::Form::Notes @resource={{@resource}} />
         <Order::Form::Documents @resource={{@resource}} />
+        <Order::Form::OrchestratorConstraints @resource={{@resource}} />
         <Order::Form::Metadata @resource={{@resource}} />
     {{/if}}
 </div>

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

@@ -1,29 +1,61 @@
-<div class="px-4 py-2">
-    <div class="flex flex-1 flex-row items-start justify-between">
-        <div class="flex flex-row space-x-3">
-            <div class="flex items-start justify-start rounded-full">
+<div class="px-4 py-3" ...attributes>
+    <div class="flex flex-1 flex-row items-start justify-between gap-4">
+        <div class="flex min-w-0 flex-row items-start gap-3">
+            <div class="relative flex flex-shrink-0 items-start justify-start">
                 <Image
                     src={{@resource.photo_url}}
                     @fallbackSrc={{config "defaultValues.placeholderImage"}}
-                    alt={{@resource.displayName}}
+                    alt={{this.name}}
                     height="48"
                     width="48"
-                    class="h-14 w-14 rounded-full shadow-sm"
+                    class="h-14 w-14 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700"
                 />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                    <InputInfo @text={{@resource.displayName}} />
+                    <InputInfo @text={{this.name}} />
                 </Attach::Tooltip>
             </div>
-            <div class="flex flex-col">
-                <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{@resource.displayName}}</h1>
-                <div>
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a (get-fleet-ops-option-label "sensorTypes" @resource.type)}}</div>
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.serial_number}}</div>
+            <div class="flex min-w-0 flex-col">
+                <div class="flex min-w-0 flex-wrap items-center gap-2">
+                    <h1 class="truncate text-base font-semibold leading-5 text-gray-900 dark:text-gray-100">{{this.name}}</h1>
+                    <Badge @status={{this.status}} @size="xs">{{smart-humanize this.status}}</Badge>
+                    {{#if this.thresholdStatus}}
+                        <Badge @status={{if (eq this.thresholdStatus "normal") "success" "warning"}} @size="xs">{{smart-humanize this.thresholdStatus}}</Badge>
+                    {{/if}}
+                </div>
+
+                <div class="mt-1 flex max-w-2xl flex-wrap items-center gap-1.5">
+                    {{#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="gauge-high" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{n-a (get-fleet-ops-option-label "sensorTypes" this.type)}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.identifier}}
+                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="id-card" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.identifier}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.reading}}
+                        <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="chart-line" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.reading}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.deviceName}}
+                        <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="microchip" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.deviceName}}</span>
+                        </span>
+                    {{/if}}
+                    <span class="inline-flex max-w-[13rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                        <FaIcon @icon="clock" class="text-gray-400 dark:text-gray-300" />
+                        <span class="truncate">{{#if this.lastReadingAt}}{{format-date-fns this.lastReadingAt "dd MMM yyyy, HH:mm"}}{{else}}No reading yet{{/if}}</span>
+                    </span>
                 </div>
-                <Badge @status={{if @resource.online "online" "offline"}}>{{if @resource.online (t "common.online") (t "common.offline")}}</Badge>
             </div>
         </div>
-        <div class="next-view-header-right">
+        <div class="next-view-header-right flex-shrink-0">
             <Layout::Resource::Panel::HeaderActions
                 @resource={{@resource}}
                 @saveTask={{@saveTask}}
@@ -36,4 +68,4 @@
             />
         </div>
     </div>
-</div>
+</div>

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

@@ -1,3 +1,61 @@
 import Component from '@glimmer/component';
+import { get } from '@ember/object';
 
-export default class SensorPanelHeaderComponent extends Component {}
+export default class SensorPanelHeaderComponent extends Component {
+    get resource() {
+        return this.args.resource;
+    }
+
+    get name() {
+        return (
+            get(this.resource, 'displayName') ??
+            get(this.resource, 'display_name') ??
+            get(this.resource, 'name') ??
+            get(this.resource, 'serial_number') ??
+            get(this.resource, 'imei') ??
+            get(this.resource, 'public_id') ??
+            '-'
+        );
+    }
+
+    get status() {
+        return get(this.resource, 'status') ?? (get(this.resource, 'is_active') ? 'active' : 'inactive');
+    }
+
+    get thresholdStatus() {
+        return get(this.resource, 'threshold_status');
+    }
+
+    get type() {
+        return get(this.resource, 'type');
+    }
+
+    get identifier() {
+        return get(this.resource, 'serial_number') ?? get(this.resource, 'imei') ?? get(this.resource, 'internal_id') ?? get(this.resource, 'public_id');
+    }
+
+    get reading() {
+        const value = get(this.resource, 'last_value');
+        const unit = get(this.resource, 'unit');
+
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+
+        return unit ? `${value} ${unit}` : String(value);
+    }
+
+    get deviceName() {
+        return (
+            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_uuid')
+        );
+    }
+
+    get lastReadingAt() {
+        return get(this.resource, 'last_reading_at') ?? get(this.resource, 'lastReadingAt');
+    }
+}

package/addon/components/table/cell/dropdown/action-item.hbs

@@ -0,0 +1,31 @@
+{{#if this.visible}}
+    {{#if @columnAction.separator}}
+        <div class="next-dd-menu-seperator"></div>
+    {{else}}
+        <div role="group" class="px-1">
+            <a
+                href="javascript:;"
+                role="menuitem"
+                class="next-dd-item {{@columnAction.class}} {{if this.disabled 'disabled'}}"
+                disabled={{this.disabled}}
+                {{on "click" (fn this.onClick @columnAction @row @dd)}}
+            >
+                {{#if @columnAction.icon}}
+                    <div class="w-6">
+                        <FaIcon class={{@columnAction.iconClass}} @icon={{@columnAction.icon}} @prefix={{@columnAction.iconPrefix}} />
+                    </div>
+                {{/if}}
+                {{@columnAction.label}}
+                {{#if this.doesntHavePermissions}}
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @columnAction.tooltipPlacement "right"}}>
+                        <InputInfo @text={{t "common.unauthorized"}} />
+                    </Attach::Tooltip>
+                {{else if @columnAction.helpText}}
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @columnAction.tooltipPlacement "right"}}>
+                        <InputInfo @text={{@columnAction.helpText}} @exampleText={{@columnAction.exampleText}} />
+                    </Attach::Tooltip>
+                {{/if}}
+            </a>
+        </div>
+    {{/if}}
+{{/if}}

package/addon/components/table/cell/dropdown/action-item.js

@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isNone } from '@ember/utils';
+
+export default class TableCellDropdownActionItemComponent extends Component {
+    @service abilities;
+    @tracked permissionRequired;
+    @tracked doesntHavePermissions = false;
+    @tracked disabled = false;
+    @tracked visible = true;
+
+    constructor(owner, { columnAction = {}, row = {}, disabled = false, permission = null }) {
+        super(...arguments);
+        this.permissionRequired = columnAction.permission ?? permission;
+        this.disabled = this.disabledCheck(columnAction, this.permissionRequired, disabled);
+        this.visible = (columnAction.visible ?? true) && this.visibilityCheck(columnAction, row);
+    }
+
+    @action onClick(columnAction, row, dd) {
+        if (this.disabled) {
+            return;
+        }
+
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof columnAction?.fn === 'function') {
+            columnAction.fn(row);
+        }
+    }
+
+    disabledCheck(columnAction, permission, defaultValue = false) {
+        let disabled = columnAction.disabled ?? defaultValue;
+        if (!disabled) {
+            disabled = permission && this.abilities.cannot(permission);
+            this.doesntHavePermissions = disabled;
+        }
+
+        return disabled;
+    }
+
+    visibilityCheck(columnAction, context) {
+        const isVisible = columnAction.isVisible;
+
+        if (isNone(context) || !isVisible) {
+            return true;
+        }
+
+        if (typeof isVisible === 'boolean') {
+            return isVisible;
+        }
+
+        if (typeof isVisible === 'function') {
+            return isVisible(context);
+        }
+
+        return true;
+    }
+}

package/addon/components/table/cell/dropdown.hbs

@@ -0,0 +1,28 @@
+<div class="cell-dropdown-button overflow-visible {{@column.wrapperClass}}" {{did-insert this.setupComponent}} ...attributes>
+    <DropdownButton
+        @icon={{@column.ddButtonIcon}}
+        @iconPrefix={{@column.ddButtonIconPrefix}}
+        @text={{this.buttonText}}
+        @size="xs"
+        @horizontalPosition="left"
+        @calculatePosition={{this.calculatePosition}}
+        @renderInPlace={{true}}
+        @onOpen={{this.onOpen}}
+        @onClose={{this.onClose}}
+        as |dd|
+    >
+        <div class="next-dd-menu next-dd-menu-table-dd mt-0i {{@column.ddMenuWrapperClass}}" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+            {{#if @column.ddMenuLabel}}
+                <div class="next-dd-menu-label-container px-1">
+                    <div class="next-dd-menu-label {{@column.ddMenuLabelClass}}">
+                        {{@column.ddMenuLabel}}
+                    </div>
+                </div>
+                <div class="next-dd-menu-seperator"></div>
+            {{/if}}
+            {{#each @column.actions as |columnAction|}}
+                <Table::Cell::Dropdown::ActionItem @columnAction={{columnAction}} @row={{@row}} @column={{@column}} @dd={{dd}} />
+            {{/each}}
+        </div>
+    </DropdownButton>
+</div>

package/addon/components/table/cell/dropdown.js

@@ -0,0 +1,91 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+
+export default class TableCellDropdownComponent extends Component {
+    @tracked tableCellNode;
+    defaultButtonText = 'Actions';
+
+    @computed('args.column.ddButtonText', 'defaultButtonText') get buttonText() {
+        const { ddButtonText } = this.args.column;
+
+        if (ddButtonText === undefined) {
+            return this.defaultButtonText;
+        }
+
+        if (ddButtonText === false) {
+            return null;
+        }
+
+        return ddButtonText;
+    }
+
+    @action setupComponent(dropdownWrapperNode) {
+        const tableCellNode = this.getOwnerTableCell(dropdownWrapperNode);
+
+        if (tableCellNode) {
+            tableCellNode.style.overflow = 'visible';
+        }
+
+        this.tableCellNode = tableCellNode;
+    }
+
+    @action onOpen() {
+        if (!this.tableCellNode) {
+            return;
+        }
+
+        const currentZIndex = Number.parseInt(this.tableCellNode.style.zIndex, 10) || 0;
+        this.tableCellNode.style.zIndex = currentZIndex + 1;
+    }
+
+    @action onClose() {
+        if (!this.tableCellNode) {
+            return;
+        }
+
+        const currentZIndex = Number.parseInt(this.tableCellNode.style.zIndex, 10) || 1;
+        this.tableCellNode.style.zIndex = currentZIndex - 1;
+    }
+
+    @action getOwnerTableCell(dropdownWrapperNode) {
+        while (dropdownWrapperNode) {
+            dropdownWrapperNode = dropdownWrapperNode.parentNode;
+
+            if (dropdownWrapperNode?.tagName?.toLowerCase() === 'td') {
+                return dropdownWrapperNode;
+            }
+        }
+
+        return undefined;
+    }
+
+    @action onDropdownItemClick(columnAction, row, dd) {
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof columnAction?.fn === 'function') {
+            columnAction.fn(row);
+        }
+    }
+
+    @action calculatePosition(trigger, content) {
+        if (typeof this.args.column?.calculatePosition === 'function') {
+            return this.args.column.calculatePosition(trigger, content);
+        }
+
+        const triggerRect = trigger.getBoundingClientRect();
+        const contentRect = content?.getBoundingClientRect?.();
+        const contentWidth = contentRect?.width || 224;
+
+        const style = {
+            position: 'fixed',
+            marginTop: '0px',
+            left: `${triggerRect.left - contentWidth - 3}px`,
+            top: `${triggerRect.top}px`,
+        };
+
+        return { style };
+    }
+}

package/addon/components/telematic/details.hbs

@@ -32,7 +32,7 @@
     {{#if this.attentionItems.length}}
         <section class="flex flex-col gap-3">
             {{#each this.attentionItems as |item|}}
-                <div class="w-full rounded-md border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-gray-800">
+                <div class="w-full rounded-md border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-yellow-900/20">
                     <div class="flex items-start gap-3">
                         <div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300">
                             <FaIcon @icon={{item.icon}} />
@@ -88,6 +88,12 @@
                             <div class="text-yellow-700 dark:text-yellow-300">Webhook URL unavailable until this integration has a public ID.</div>
                         {{/if}}
                     </div>
+                {{else}}
+                    <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>
                 {{/if}}
             </div>
         </div>

package/addon/components/telematic/form.js

@@ -415,13 +415,17 @@ export default class TelematicFormComponent extends Component {
         this.args.resource.setProperties({
             name: this.args.resource.name ?? provider.label,
             provider: provider.key,
-            credentials: (provider.required_fields ?? []).reduce((acc, item) => {
-                acc[item.name] = item.advanced || item.is_endpoint ? null : (item.default_value ?? null);
-                return acc;
-            }, {}),
+            credentials: this.buildProviderCredentials(provider),
         });
     }
 
+    buildProviderCredentials(provider) {
+        return (provider.required_fields ?? []).reduce((acc, item) => {
+            acc[item.name] = item.default_value ?? null;
+            return acc;
+        }, {});
+    }
+
     @action goToStep(index) {
         if (!this.canReachStep(index)) {
             return;
@@ -553,10 +557,7 @@ export default class TelematicFormComponent extends Component {
         this.lastConnectionTestCompletedAt = null;
 
         try {
-            const result = yield this.fetch.post(`telematics/${this.selectedProvider.key}/test-credentials`, {
-                credentials: this.args.resource.credentials,
-                telematic_id: this.args.resource?.id,
-            });
+            const result = yield this.fetch.post(`telematics/${this.selectedProvider.key}/test-credentials`, this.getConnectionTestPayload());
             this.connectionTestResult = result;
             this.lastConnectionTestCompletedAt = new Date();
             this.updateResourceConnectionTestMeta(result);
@@ -577,6 +578,13 @@ export default class TelematicFormComponent extends Component {
         }
     }
 
+    getConnectionTestPayload() {
+        return {
+            credentials: this.args.resource.credentials,
+            telematic_id: this.args.resource?.id,
+        };
+    }
+
     updateResourceConnectionTestMeta(result) {
         const meta = this.args.resource?.meta ?? {};
         const testedAt = this.lastConnectionTestCompletedAt ?? new Date();