@fleetbase/fleetops-engine 0.6.55 → 0.6.57

package/addon/components/fleet/hierarchy-tree.js

@@ -0,0 +1,528 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { debug } from '@ember/debug';
+
+const FILTER_ALL = 'all';
+const FILTER_DRIVERS = 'drivers';
+const FILTER_VEHICLES = 'vehicles';
+const FILTER_ONLINE = 'online';
+
+export default class FleetHierarchyTreeComponent extends Component {
+    @service store;
+
+    @tracked expandedFleetIds = new Set();
+    @tracked query = '';
+    @tracked activeFilter = FILTER_ALL;
+    @tracked loadedDriversByFleetKey = {};
+    @tracked loadedVehiclesByFleetKey = {};
+    loadingDriverFleetKeys = new Set();
+    loadingVehicleFleetKeys = new Set();
+
+    constructor() {
+        super(...arguments);
+        this.expandedFleetIds = new Set(this.initialExpandedFleetIds);
+    }
+
+    get filters() {
+        return [
+            { id: FILTER_ALL, label: 'All' },
+            { id: FILTER_DRIVERS, label: 'Drivers' },
+            { id: FILTER_VEHICLES, label: 'Vehicles' },
+            { id: FILTER_ONLINE, label: 'Online' },
+        ];
+    }
+
+    get rootFleet() {
+        return this.args.fleet;
+    }
+
+    get fleets() {
+        return this.rootFleet ? [this.rootFleet] : [];
+    }
+
+    get normalizedQuery() {
+        return String(this.query ?? '')
+            .trim()
+            .toLowerCase();
+    }
+
+    get hasQuery() {
+        return this.normalizedQuery.length > 0;
+    }
+
+    get hasActiveFilter() {
+        return this.activeFilter !== FILTER_ALL;
+    }
+
+    get hasControlsApplied() {
+        return this.hasQuery || this.hasActiveFilter;
+    }
+
+    get hasHierarchyResources() {
+        return this.fleets.some((fleet) => this.fleetHasChildren(fleet));
+    }
+
+    get allFleetNodesExpanded() {
+        const fleetKeys = this.collectFleetKeys(this.fleets);
+
+        return fleetKeys.length > 0 && fleetKeys.every((key) => this.expandedFleetIds.has(key));
+    }
+
+    get expandCollapseIcon() {
+        return this.allFleetNodesExpanded ? 'down-left-and-up-right-to-center' : 'up-right-and-down-left-from-center';
+    }
+
+    get expandCollapseHelpText() {
+        return this.allFleetNodesExpanded ? 'Collapse all' : 'Expand all';
+    }
+
+    get visibleRows() {
+        if (this.hasControlsApplied) {
+            return this.buildFilteredFleetRows(this.fleets);
+        }
+
+        return this.buildFleetRows(this.fleets);
+    }
+
+    get emptyTitle() {
+        if (this.hasControlsApplied) {
+            return 'No matching resources';
+        }
+
+        return 'No fleet resources assigned';
+    }
+
+    get emptyDescription() {
+        if (this.hasControlsApplied) {
+            return 'Clear the current search or filter to show the full fleet hierarchy.';
+        }
+
+        return 'Assign drivers or vehicles to make this fleet operationally useful.';
+    }
+
+    get initialExpandedFleetIds() {
+        return this.fleets.flatMap((fleet) => {
+            const key = this.fleetKey(fleet);
+            const childKeys = this.fleetSubfleets(fleet)
+                .map((subfleet) => this.fleetKey(subfleet))
+                .filter(Boolean);
+
+            return [key, ...childKeys].filter(Boolean);
+        });
+    }
+
+    resourceArray(resources) {
+        if (!resources) {
+            return [];
+        }
+
+        if (typeof resources.toArray === 'function') {
+            return resources.toArray();
+        }
+
+        return Array.isArray(resources) ? resources : [];
+    }
+
+    @action displayName(resource) {
+        return resource?.displayName ?? resource?.display_name ?? resource?.name ?? resource?.public_id ?? 'Unnamed resource';
+    }
+
+    fleetKey(fleet) {
+        return String(fleet?.id ?? fleet?.uuid ?? fleet?.public_id ?? fleet?.name ?? '');
+    }
+
+    fleetSubfleets(fleet) {
+        return this.sortByName(this.resourceArray(fleet?.subfleets));
+    }
+
+    @action fleetSubfleetCount(fleet) {
+        return this.fleetSubfleets(fleet).length;
+    }
+
+    fleetDrivers(fleet) {
+        const embeddedDrivers = this.resourceArray(fleet?.drivers);
+
+        if (embeddedDrivers.length) {
+            return this.sortOnlineFirst(embeddedDrivers);
+        }
+
+        return this.sortOnlineFirst(this.loadedDriversByFleetKey[this.fleetKey(fleet)] ?? []);
+    }
+
+    fleetVehicles(fleet) {
+        const embeddedVehicles = this.resourceArray(fleet?.vehicles);
+
+        if (embeddedVehicles.length) {
+            return this.sortOnlineFirst(embeddedVehicles);
+        }
+
+        return this.sortOnlineFirst(this.loadedVehiclesByFleetKey[this.fleetKey(fleet)] ?? []);
+    }
+
+    fleetDriverCount(fleet) {
+        return Number(fleet?.drivers_count ?? fleet?.driver_count ?? this.fleetDrivers(fleet).length ?? 0);
+    }
+
+    fleetVehicleCount(fleet) {
+        return Number(fleet?.vehicles_count ?? fleet?.vehicle_count ?? this.fleetVehicles(fleet).length ?? 0);
+    }
+
+    fleetOnlineDriverCount(fleet) {
+        return Number(fleet?.drivers_online_count ?? this.fleetDrivers(fleet).filter((driver) => driver?.online).length ?? 0);
+    }
+
+    fleetOnlineVehicleCount(fleet) {
+        return Number(fleet?.vehicles_online_count ?? this.fleetVehicles(fleet).filter((vehicle) => vehicle?.online).length ?? 0);
+    }
+
+    @action fleetSubtitle(fleet) {
+        return `${this.fleetOnlineDriverCount(fleet)}/${this.fleetDriverCount(fleet)} drivers online - ${this.fleetOnlineVehicleCount(fleet)}/${this.fleetVehicleCount(fleet)} vehicles online`;
+    }
+
+    @action driverSubtitle(driver) {
+        return [driver?.vehicle_name, driver?.status, driver?.public_id].filter(Boolean).join(' - ') || (driver?.online ? 'Online' : 'Offline');
+    }
+
+    @action vehicleSubtitle(vehicle) {
+        return [vehicle?.driver_name, vehicle?.plate_number, vehicle?.vin, vehicle?.status, vehicle?.public_id].filter(Boolean).join(' - ') || (vehicle?.online ? 'Online' : 'Offline');
+    }
+
+    @action fleetHasChildren(fleet) {
+        return this.fleetSubfleets(fleet).length > 0 || this.fleetDriverCount(fleet) > 0 || this.fleetVehicleCount(fleet) > 0;
+    }
+
+    @action isFleetExpanded(fleet) {
+        return this.expandedFleetIds.has(this.fleetKey(fleet));
+    }
+
+    buildFleetRows(fleets = [], depth = 0) {
+        return fleets.flatMap((fleet) => {
+            const rows = [this.fleetRow(fleet, depth)];
+
+            if (!this.isFleetExpanded(fleet)) {
+                return rows;
+            }
+
+            rows.push(...this.childRows(fleet, depth + 1));
+
+            return rows;
+        });
+    }
+
+    buildFilteredFleetRows(fleets = [], depth = 0) {
+        return fleets.flatMap((fleet) => {
+            const fleetMatches = this.fleetMatches(fleet);
+            const childDepth = depth + 1;
+            const subfleetRows = this.buildFilteredFleetRows(this.fleetSubfleets(fleet), childDepth);
+            const driverRows = this.fleetDrivers(fleet)
+                .filter((driver) => this.driverVisible(driver))
+                .map((driver) => this.driverRow(driver, childDepth));
+            const vehicleRows = this.fleetVehicles(fleet)
+                .filter((vehicle) => this.vehicleVisible(vehicle))
+                .map((vehicle) => this.vehicleRow(vehicle, childDepth));
+
+            if (fleetMatches) {
+                return [this.fleetRow(fleet, depth), ...this.childRows(fleet, childDepth, true)];
+            }
+
+            if (!subfleetRows.length && !driverRows.length && !vehicleRows.length) {
+                return [];
+            }
+
+            return [this.fleetRow(fleet, depth), ...subfleetRows, ...driverRows, ...vehicleRows];
+        });
+    }
+
+    childRows(fleet, depth, forceExpanded = false) {
+        const rows = [];
+
+        this.fleetSubfleets(fleet).forEach((subfleet) => {
+            if (forceExpanded) {
+                rows.push(this.fleetRow(subfleet, depth), ...this.childRows(subfleet, depth + 1, true));
+            } else {
+                rows.push(...this.buildFleetRows([subfleet], depth));
+            }
+        });
+
+        if (this.activeFilter !== FILTER_VEHICLES) {
+            this.fleetDrivers(fleet)
+                .filter((driver) => this.activeFilter !== FILTER_ONLINE || driver?.online)
+                .forEach((driver) => rows.push(this.driverRow(driver, depth)));
+        }
+
+        if (this.activeFilter !== FILTER_DRIVERS) {
+            this.fleetVehicles(fleet)
+                .filter((vehicle) => this.activeFilter !== FILTER_ONLINE || vehicle?.online)
+                .forEach((vehicle) => rows.push(this.vehicleRow(vehicle, depth)));
+        }
+
+        return rows;
+    }
+
+    fleetRow(fleet, depth) {
+        return {
+            type: 'fleet',
+            key: `fleet:${this.fleetKey(fleet)}`,
+            fleet,
+            depth,
+            depthClass: this.depthClass(depth),
+        };
+    }
+
+    driverRow(driver, depth) {
+        return {
+            type: 'driver',
+            key: `driver:${driver?.id ?? driver?.uuid ?? driver?.public_id ?? this.displayName(driver)}`,
+            driver,
+            depth,
+            depthClass: this.depthClass(depth),
+        };
+    }
+
+    vehicleRow(vehicle, depth) {
+        return {
+            type: 'vehicle',
+            key: `vehicle:${vehicle?.id ?? vehicle?.uuid ?? vehicle?.public_id ?? this.displayName(vehicle)}`,
+            vehicle,
+            depth,
+            depthClass: this.depthClass(depth),
+        };
+    }
+
+    depthClass(depth) {
+        return `fleet-hierarchy-tree-row-depth-${Math.min(Number(depth) || 0, 5)}`;
+    }
+
+    fleetMatches(fleet) {
+        return this.resourceMatches(fleet, ['name', 'public_id', 'status', 'slug'], [this.fleetSubtitle(fleet)]);
+    }
+
+    driverMatches(driver) {
+        return this.resourceMatches(driver, ['displayName', 'display_name', 'name', 'public_id', 'status', 'vehicle_name'], [this.driverSubtitle(driver)]);
+    }
+
+    vehicleMatches(vehicle) {
+        return this.resourceMatches(vehicle, ['displayName', 'display_name', 'name', 'public_id', 'status', 'driver_name', 'plate_number', 'vin'], [this.vehicleSubtitle(vehicle)]);
+    }
+
+    driverVisible(driver) {
+        if (this.activeFilter === FILTER_VEHICLES) {
+            return false;
+        }
+
+        if (this.activeFilter === FILTER_ONLINE && !driver?.online) {
+            return false;
+        }
+
+        return !this.hasQuery || this.driverMatches(driver);
+    }
+
+    vehicleVisible(vehicle) {
+        if (this.activeFilter === FILTER_DRIVERS) {
+            return false;
+        }
+
+        if (this.activeFilter === FILTER_ONLINE && !vehicle?.online) {
+            return false;
+        }
+
+        return !this.hasQuery || this.vehicleMatches(vehicle);
+    }
+
+    resourceMatches(resource, fields = [], extraValues = []) {
+        if (!this.hasQuery) {
+            return true;
+        }
+
+        const values = [...fields.map((field) => resource?.[field]), ...extraValues];
+
+        return values.filter(Boolean).some((value) => String(value).toLowerCase().includes(this.normalizedQuery));
+    }
+
+    sortOnlineFirst(resources = []) {
+        return [...resources].sort((a, b) => {
+            const onlineSort = Number(Boolean(b?.online)) - Number(Boolean(a?.online));
+
+            if (onlineSort !== 0) {
+                return onlineSort;
+            }
+
+            return String(this.displayName(a)).localeCompare(String(this.displayName(b)));
+        });
+    }
+
+    sortByName(resources = []) {
+        return [...resources].sort((a, b) => String(this.displayName(a)).localeCompare(String(this.displayName(b))));
+    }
+
+    @action toggleFleet(fleet) {
+        const key = this.fleetKey(fleet);
+        const expandedFleetIds = new Set(this.expandedFleetIds);
+        const willExpand = !expandedFleetIds.has(key);
+
+        if (!willExpand) {
+            expandedFleetIds.delete(key);
+        } else {
+            expandedFleetIds.add(key);
+        }
+
+        this.expandedFleetIds = expandedFleetIds;
+
+        if (willExpand) {
+            this.loadFleetResources(fleet);
+        }
+    }
+
+    @action expandAll() {
+        this.expandedFleetIds = new Set(this.collectFleetKeys(this.fleets));
+        this.loadVisibleFleetResources();
+    }
+
+    @action collapseAll() {
+        this.expandedFleetIds = new Set(this.fleets.map((fleet) => this.fleetKey(fleet)).filter(Boolean));
+    }
+
+    @action toggleExpandCollapseAll() {
+        if (this.allFleetNodesExpanded) {
+            this.collapseAll();
+        } else {
+            this.expandAll();
+        }
+    }
+
+    collectFleetKeys(fleets = []) {
+        return fleets.flatMap((fleet) => [this.fleetKey(fleet), ...this.collectFleetKeys(this.fleetSubfleets(fleet))].filter(Boolean));
+    }
+
+    visibleFleets(fleets = this.fleets) {
+        return fleets.flatMap((fleet) => {
+            if (!this.isFleetExpanded(fleet)) {
+                return [fleet];
+            }
+
+            return [fleet, ...this.visibleFleets(this.fleetSubfleets(fleet))];
+        });
+    }
+
+    @action loadVisibleFleetResources() {
+        this.visibleFleets().forEach((fleet) => this.loadFleetResources(fleet));
+    }
+
+    loadFleetResources(fleet) {
+        if (!fleet) {
+            return;
+        }
+
+        if (!this.fleetDrivers(fleet).length && this.fleetDriverCount(fleet) > 0) {
+            this.loadFleetDrivers(fleet);
+        }
+
+        if (!this.fleetVehicles(fleet).length && this.fleetVehicleCount(fleet) > 0) {
+            this.loadFleetVehicles(fleet);
+        }
+    }
+
+    async loadFleetDrivers(fleet) {
+        const key = this.fleetKey(fleet);
+
+        if (!key || this.loadingDriverFleetKeys.has(key) || this.loadedDriversByFleetKey[key]) {
+            return;
+        }
+
+        this.loadingDriverFleetKeys.add(key);
+
+        try {
+            const drivers = await this.store.query('driver', { fleet: fleet.id, limit: -1 });
+            this.loadedDriversByFleetKey = {
+                ...this.loadedDriversByFleetKey,
+                [key]: this.resourceArray(drivers),
+            };
+        } catch (error) {
+            debug(`Unable to load hierarchy drivers for fleet ${key}: ${error.message}`);
+        } finally {
+            this.loadingDriverFleetKeys.delete(key);
+        }
+    }
+
+    async loadFleetVehicles(fleet) {
+        const key = this.fleetKey(fleet);
+
+        if (!key || this.loadingVehicleFleetKeys.has(key) || this.loadedVehiclesByFleetKey[key]) {
+            return;
+        }
+
+        this.loadingVehicleFleetKeys.add(key);
+
+        try {
+            const vehicles = await this.store.query('vehicle', { fleet: fleet.id, limit: -1 });
+            this.loadedVehiclesByFleetKey = {
+                ...this.loadedVehiclesByFleetKey,
+                [key]: this.resourceArray(vehicles),
+            };
+        } catch (error) {
+            debug(`Unable to load hierarchy vehicles for fleet ${key}: ${error.message}`);
+        } finally {
+            this.loadingVehicleFleetKeys.delete(key);
+        }
+    }
+
+    @action updateQuery(event) {
+        this.query = event.target.value;
+    }
+
+    @action clearFilters() {
+        this.query = '';
+        this.activeFilter = FILTER_ALL;
+    }
+
+    @action setFilter(filter) {
+        this.activeFilter = filter;
+    }
+
+    @action viewFleet(fleet) {
+        if (typeof this.args.onViewFleet === 'function') {
+            return this.args.onViewFleet(fleet);
+        }
+    }
+
+    @action viewDriver(driver) {
+        if (typeof this.args.onViewDriver === 'function') {
+            return this.args.onViewDriver(driver);
+        }
+    }
+
+    @action viewVehicle(vehicle) {
+        if (typeof this.args.onViewVehicle === 'function') {
+            return this.args.onViewVehicle(vehicle);
+        }
+    }
+
+    @action assignDriver(fleet) {
+        if (typeof this.args.onAssignDriver === 'function') {
+            return this.args.onAssignDriver(fleet);
+        }
+    }
+
+    @action assignVehicle(fleet) {
+        if (typeof this.args.onAssignVehicle === 'function') {
+            return this.args.onAssignVehicle(fleet);
+        }
+    }
+
+    @action calculateDropdownLeftPosition(trigger, content) {
+        const triggerRect = trigger.getBoundingClientRect();
+        const contentRect = content?.getBoundingClientRect?.();
+        const contentWidth = contentRect?.width || 224;
+
+        return {
+            style: {
+                position: 'fixed',
+                marginTop: '0px',
+                left: triggerRect.left - triggerRect.width / 2 - contentWidth - 9,
+                top: triggerRect.top - triggerRect.height / 2 + 5,
+            },
+        };
+    }
+}

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

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

package/addon/components/map/drawer/device-event-listing.js

@@ -116,6 +116,7 @@ export default class MapDrawerDeviceEventListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.device-event') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                renderInPlace: false,
                 calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '10%',
                 actions: [

package/addon/components/map/drawer/driver-listing.js

@@ -72,6 +72,7 @@ export default class MapDrawerDriverListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.driver') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                renderInPlace: false,
                 calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [

package/addon/components/map/drawer/place-listing.js

@@ -54,6 +54,7 @@ export default class MapDrawerPlaceListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.place') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                renderInPlace: false,
                 calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [

package/addon/components/map/drawer/vehicle-listing.js

@@ -66,6 +66,7 @@ export default class MapDrawerVehicleListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.vehicle') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                renderInPlace: false,
                 calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [